Верстка \ CSS 3

CSS-эффекты для лендинга

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

Продолжить чтение

Верстка \ CSS 3

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

От автора: мы собираемся реализовать зафиксированный заголовок, в котором при прокрутке автоматически выделяется каждый раздел, когда пользователь прокручивает их. Мы воспользуемся несколькими хуками.

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

CSS-эффект для текста

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

Продолжить чтение