Верстка \ CSS 3

Как сделать прелоадер для сайта

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

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

Верстка \ CSS 3

Псевдокласс :focus-within

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

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

Верстка \ CSS 3

Пользовательские CSS-свойства – ежедневное использование

От автора: если коротко: мы используем переменные postcss-css для обработки стилей, чтобы можно было использовать пользовательские CSS-свойства в разработке, сохраняя кроссбраузерность. Похоже, что сейчас пользовательские CSS-свойства (или CSS переменные) просто везде. В сети полно постов, показывающих как, что и каким образом делать, но очень мало примеров повседневного использования. Если у вас нет четкого определения пользовательским свойствам, то на Smashing Magazine есть хорошая статья – пора использовать пользовательские CSS-свойства.

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

Верстка \ CSS 3

Пошаговое руководство по созданию тултипов на чистом CSS

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

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

Верстка \ CSS 3

Свойство backdrop-filter

От автора: свойство backdrop-filter CSS позволяет применять фильтры к контенту позади элемента. Свойство является расширением к спецификации Filter Effects Module Level 1, в которой вводится свойство filter. Новое свойство использует синтаксис filter, но сам эффект применяется к фону элемента.

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

Верстка \ CSS 3

Нативная валидация форм

От автора: в этой серии статей я буду излагать свои мысли после тщательного изучения современной валидации форм в CSS и JS. Я расскажу про нативные сообщения в HTML-валидации, CSS псевдоклассы :invalid и :valid, а также про Constraint Validation API, которое должно было упростить валидацию форм, но получилось слегка иначе.

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

Верстка \ CSS 3

Свойство outline-offset

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

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

Верстка \ CSS 3

Как сделать пользовательские свойства (CSS-переменные) более динамичными

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

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

Верстка \ CSS 3

Смотрите спецификацию CSS Grid Layout или что написано в шапке спецификации

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

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