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

#почитать

Эволюцией 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 для ответов на вопросы по синтаксису.
▫️Если технология поддерживает скрипты, информация находится в привязках.

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

Настройка цитат в HTML и CSS

#почитать

Цитаты позволяют выделять часть текста и придавать особое значение.

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

Что нужно знать про OOCSS и организацию CSS

#почитать

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

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

🖥 Хотите сделать красивый README на GitHub?

Я вообще обожаю описывать Readme файл и кайфую, когда всё красиво, чётко и ясно. Мне трудно понять людей, которые не ведут документируют собственные проекты, ведь это помогает не только другим, но и автору кода!

Например, недавно я создавала первый проект с Docker, Jenkins и генерацией отчета тестирования. Захотела сделать всё «по-умному», чтобы джобы сами работали и всё в этом духе. Так вот, мой Readme файл пригодился не только девопсу разобраться с моим кодом и помочь, но и мне! Потому что все эти команды запомнить не очень просто, а благодаря документации всё становится структурированным (это моё личное наслаждение)

Я пишу Readme по всем канонам: с тайтлами, изображениями, блоками кода, сносками и так далее. И вам советую! Потому что таким образом вашу документацию будет проще читать и использовать.

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

А именно поэтому я хочу поделиться подборкой полезных ресурсов, которые помогут сделать вашу «визитную карточку» на GitHub более привлекательной:

▫️awesome-github-profile-readme
▫️creative-profile-readme
▫️skill-icons
▫️github-readme-stats
▫️cicirello/user-statistician
▫️dec0dOS/amazing-github-template
▫️markdown-badges

(источник)

Стилизация meter

#почитать

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

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

CSS Wrapped 2024

#почитать

Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the forest, over the mountains, and across the seas as they explore the latest CSS launched for Chrome and the web platform in 2024.

⏱Посмотреть