Изображения. Быстрый бесплатный курс для новых фронтендеров

#почитать

Курс от знакомства с элементом и до CDN-сетей доставки.

⏱Читать

25 передовых CSS-техник

#почитать

scroll-behavior: smooth и так далее

⏱Читать

Специфичность в CSS

#почитать

Специфичность в CSS определяет, как браузеры определяют важность, актуальность и «старшинство» стилей, то есть как разрешаются уонфликтующие стили.

⏱Читать статью

Синус и косинус в веб-дизайне

#почитать

В CSS добавились новые стилевые тригонометрические функции, такие как sin(), cos(), tan() и др. В физике, математике и программировании, понятно, тригонометрические функции востребованы и нужны для различных вычислений. Но где их можно применять в веб-дизайне? В итоге появление всяких синусов и косинусов вызвало недоумение у многих веб-разработчиков.

⏱Читать статью

Кратко о методологиях объектно-ориентированного CSS: OOCSS, SMACSS, BEM и SASS

#почитать

Многие девелоперы, даже имея за плечами не один успешно выполненный коммерческий проект не оставляют поиски наилучшего способа организации стилей в макете. И большинство из них остановились на синтезе OOCSS, SMACSS, BEM и SASS. В этой статье мы не только поговорим о том, что из себя представляет правильный CSS.

⏱Читать статью

Стилевая функция rgb()

#почитать

Цвет в виде шестнадцатеричного значения не всегда удобен для использования из-за сложности перевода десятичных чисел в шестнадцатеричные. В качестве альтернативы в CSS имеется стилевая функция rgb(), позволяющая задавать компоненты цвета в виде десятичных чисел.

Сама функция rgb() принимается в качестве значения стилевого свойства и позволяет установить цвет фона или текста с помощью цветовой модели RGB. В настоящий момент функция rgb() поддерживает два синтаксиса, несколько различающихся между собой: традиционный и современный.

⏱Читать статью

Псевдокласс :has()

#почитать

В CSS не существует селектора родителя, позволяющего применить стиль к родителю при наличии у него указанного дочернего элемента. Роль такого селектора выполняет псевдокласс :has().

Псевдокласс :has() применяет стилевые правила к элементу, если у него есть указанный потомок или родственный элемент. Это даёт возможность задавать стили родителя на основе его дочерних элементов.

⏱Читать статью

Комбинированные селекторы

#почитать

Иногда при написании стилей мы хотим обратиться к селектору более точно, чем просто по имени класса или тега. Для этого можно использовать различные комбинации.

⏱Читать статью

Всё о селекторах в CSS: от основ до высшего пилотажа

#почитать

Быстрый гайд от МТС.

⏱Читать статью

Переходы и анимация

#почитать

Эволюцией CSS3 стала возможность задавать поведение для переходов и анимации. Фронтенд-разработчики много лет просили реализовать эти взаимодействия внутри HTML и CSS, без использования JavaScript или Flash.

С помощью переходов CSS3 у вас есть потенциал менять внешний вид и поведение элемента всякий раз, когда происходит изменение его состояния, к примеру, когда на элемент наводится курсор, он получает фокус, становится активным или к элементу происходит переход по ссылке.

Анимация в CSS3 позволяет менять внешний вид и поведение элемента с помощью нескольких ключевых кадров. Переходы обеспечивают смену от одного состояния к другому, в то время как анимация может установить несколько точек перехода через разные ключевые кадры.

⏱Быстрый гайд WebRef

Определение типа с @property

#почитать

Большой гайд.

⏱Читать статью

CSS по БЭМ. Описание с примерами

#почитать

В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов.

⏱Читать статью

Фоны для блочной модели

#почитать

Можно ограничить распространение background-image элемента с помощью background-clip. Это означает, что можно применить различные фоны, скажем, к padding и border.

⏱Читать статью

Адаптивная вёрстка сайта

#почитать

▫️Прочность
▫️Относительность единиц измерения
▫️Использование контрольных точек
▫️Максимальные и минимальные значения
▫️Вложенность объектов
▫️Правильные шрифты
▫️Грамотное использование графики
▫️Выдерживание размеров макетов

⏱Читать статью

Семантическая вёрстка

#почитать

Подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока.

⏱Читать статью

Elastic Overflow Scrolling

#почитать

Для начала понадобится какой-то элемент, выступающий в качестве контейнера для прокручиваемого контента. Конечно, можно JS, но это потребует добавления слушателей прокрутки или комбинации событий pointerDown, pointerUp и pointerMove, не говоря уже об отслеживании положения, инерционного движения и т. д. Идеальным было бы решение на CSS, и вот оно

⏱Читать статью

▫️CSS-анимации для начинающих

#почитать

Фундаментальный практикум на русском, по книге CSS Animation 101

⏱Читать статью
⏱Скачать шпаргалку

Видеопрактика:
▫️ Основы анимации для новичков ⏱30 минут
▫️ Гайд по CSS анимации. Transition / Animation ⏱20 минут

Как читать W3C-спецификации

#почитать

▫️Поймите, что спецификации W3C написаны для разработчиков реализаций, а не для конечных пользователей.
▫️Во многих спецификациях есть раздел с описанием, как они организованы и как их нужно читать.
▫️Знайте словарь, используемый в спецификациях.
▫️Помните, что не нужно читать каждое слово. Бегло просматривайте в поисках частей, которые имеют смысл.
▫️Избегайте обсуждений пространств имен.
▫️Научитесь читать BNF — он используется во многих местах.
▫️Научитесь читать DTD для ответов на вопросы по синтаксису.
▫️Если технология поддерживает скрипты, информация находится в привязках.

⏱Читать статью