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

Архив меток: CSS 3

Фиксированный заголовок с выделенными разделами при прокрутке

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

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

Анимация переменных шрифтов с помощью 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-эффект для текста

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

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

Субпиксельный рендеринг и обводки

От автора: я был невероятно счастлив, что смог недавно выступить на первом Talk.CSS в Мельбурне, и после этого у меня был хороший разговор с одним из участников о проблемах субпиксельного рендеринга для тонких обводок CSS в разных браузерах. Во время своего выступления я очень кратко затронул тему субпиксельного рендеринга при освещении свертывания полей. Если у вас есть полностью пустой блок, ...

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

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

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

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

Работа с несколькими столбцами — CSS Multi-column Layout

От автора: несмотря на то, что он предшествовал Grid and Flexbox, Multi-column Layout в CSS представляет собой — по крайней мере, для меня — еще более радикальный отход от того, что мы обычно делаем, и как думаем о макете CSS. Разделение только одного элемента на его многоколоночное представление содержимого кажется странным, даже еретическим. Установка многостолбцового контекста означает, что контент (поток) ...

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

Естественно адаптивная сетка CSS с помощью minmax() и min()

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

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

Использование пользовательских атрибутов CSS, сгенерированных JavaScript, в качестве механизма передачи

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

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

Самый простой способ асинхронной загрузки CSS

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

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