Главная » Архив меток: CSS3

Архив меток: CSS3

Анимация переменных шрифтов с помощью CSS и Splitting JS

От автора: некоторое время назад я создал на Codepen демо-версию анимированного переменного шрифта. В этой статье я объясню, что такое переменные шрифты, как можно сделать их анимацию, и как я создал этот потрясающий эффект с помощью CSS и немного Javascript. See the Pen Variable font animation by Michelle Barker (@michellebarker) on CodePen. Представляем переменные шрифты Переменные шрифты — это захватывающая ...

Читать далее »

Усеченный многострочный текст с кнопкой «показать больше» (только с помощью CSS)

От автора: на днях у нас в офисе зашла дискуссия об усечении текста, и я с тех пор задался вопросом, зашел ли CSS достаточно далеко, чтобы можно было правильно сделать усеченный текст, например, с помощью checkbox. То есть поддерживает ли он следующее: Несколько строк Кнопку «Показать больше», которая отображает полный текст при нажатии text-overflow: ellipsis не поддерживает несколько строк, но ...

Читать далее »

Почему вы обязательно должны научиться использовать CSS-in-JS

От автора: время от времени я слышу, что CSS-in-JS создает барьер для входа некоторым людям. Как и любая новая программная абстракция, CSS-in-JS предназначен для того чтобы убрать некоторые сложности из реализации более низкого уровня, в данном случае CSS. Абстракции не являются ни хорошими, ни плохими, но они требуют изучения новых вещей. Использование CSS-in-JS позволяет стилизовать приложения, не беспокоясь о некоторых ...

Читать далее »

Не упустите из виду переменные CSS

От автора: сначала, когда я услышал о переменных CSS, я был настроен немного скептически. Зачем кому-то использовать их, если есть такие языки расширения, как scss, sass, less и stylus. Через несколько лет я начал замечать, что все больше и больше людей используют их, пишут об этом и говорят об этом. Я что-то упустил из виду… Это заняло какое-то время, но ...

Читать далее »

Добавление крутых эффектов с помощью режимов наложения CSS

От автора: в последние годы веб-дизайн, особенно CSS, приобрели предсказуемый характер. Во-первых, мы создаем специальные эффекты, которые интенсивно используют изображения, внешние библиотеки или и то, и другое. Затем приходит CSS и добавляет эти возможности — значительно сокращая потребность во внешних ресурсах. Это означает, что большая часть скрытой мощности, которая нам нужна, просто встроена в браузер. Режим наложения CSS является одним ...

Читать далее »

4 причины, по которым ваш z-index CSS не работает (и как это исправить)

От автора: Z-index — это свойство CSS, которое позволяет размещать элементы в слоях друг над другом. Это супер полезно, и, честно говоря, очень важно знать, как использовать в CSS этот инструмент. К сожалению, z-index является одним из тех свойств, которые не всегда ведут себя интуитивно. Сначала это кажется простым — более высокий номер z-индекса означает, что элемент будет поверх элементов ...

Читать далее »

О, так много способов создать строку ссылок в виде треугольных лент!

От автора: давайте рассмотрим, как мы можем создать строку ссылок, которые следуют друг за другом в ленте, состоящей из фрагментов, похожих на шевроны, которые вы могли видеть в иерархических системах навигации. Вы, наверное, часто встречали этот шаблон. Например, в многошаговых формах и меню хлебных крошек. Для наших целей мы будем называть эти шаблоны «лентами», чтобы вы знали, что мы имеем ...

Читать далее »

Использование миксинов, чтобы убрать математику из Responsive Font Size

От автора: Responsive Font Size (RFS) представляет собой движок, который автоматически вычисляет и обновляет свойство font-size для элементов на основе размеров окна просмотра браузера. Если вы чувствуете, что это звучит знакомо, то это потому, что есть множество инструментов, которые предлагают различные подходы для гибкой типографии. Фактически, совсем недавно Крис собрал кучу подобных инструментов. Ознакомьтесь с этой подборкой, потому что всегда ...

Читать далее »

Адаптивный дизайн и пользовательские свойства CSS: определение переменных и контрольных точек

От автора: пользовательские свойства CSS (или переменные CSS) становятся все более и более популярными. Они наконец достигли достойной поддержки браузерами и постепенно пробиваются в различные производственные среды. Популярность пользовательских свойств не должна вызывать удивления, поскольку они могут быть очень полезны во многих случаях, включая управление цветовой палитрой, настройку компонентов и создание тем. Но переменные также могут быть очень полезны, когда ...

Читать далее »

Как работает @supports в CSS

От автора: CSS имеет удобную функцию, которая позволяет нам проверять, поддерживает ли браузер определенное свойство или сочетание свойство: значение перед тем, как применять блок стилей — подобно тому, как обрабатывается @media-запрос, например, когда ширина окна браузера уже некоторого заданного размера, вступает в силу CSS внутри него. В том же духе CSS внутри этой функции вступит в силу, когда проверяемая пара ...

Читать далее »