Скелетон: как сделать загрузку визуально приятной

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

Я нашёл для вас гайд, как сверстать такой скелетон для карточки статьи за несколько минут. Демонстрируется HTML-код и CSS-стили с переменными, чтобы сразу получать плавную анимацию и адаптивную структуру без кучи лишнего кода.

#css #фронтенд #ux

Продолжаем делать 3D-текст без использования JS

В прошлой статье мы научились создавать статичный текст с эффектом 3D, используя современные возможности CSS. На этот раз пойдем дальше и добавим ему анимацию.

Первая часть тут.
А вторая тут.

#фронтенд #css

— Насколько хорошо вы умеете работать с CSS?
— Настолько, что рисую на CSS картины.
— Что?
— Что?

Целый аккаунт с похожими работами: https://twitter.com/asyrafhussin4

#css @tproger_web

Гигантская библиотека CSS-анимаций

Если хотите добавить анимацию, но не до конца понимаете, как она будет выглядеть, то вам поможет Animista.

Просто откройте каталог, выберите нужную анимацию и посмотрите, как она выглядит. Такой подход помогает быстрее подобрать необходимый тип и настройки анимации.

Пробуем по ссылке.

#css #веб

Полезная функция в Chrome Dev Tools

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

Инструкция по входу в раздел на видео.

#css #chrome