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

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

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

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

Как работает CSS Flexbox: элегантная система макетов с визуальным разбором

Для новичков в вебе стоит сказать, что CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. О самой технологии можно прочитать здесь.

Мы же решили объяснить возможности CSS Flexbox с использованием гифок, чтобы получилась настоящая наглядная flex-шпаргалка. Что получилось, можно увидеть в статье: https://tproger.ru/translations/how-css-flexbox-works

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

Что новенького есть в CSS в 2025 году

Вы уверены, что используете все возможности CSS? Скорее всего сегодня вы можете делать гораздо больше благодаря современным свойствам и функциям таблицы.

В этой статье автор разобрал актуальные фишки CSS, о которых вы могли не знать.

#css #фронтенд

Пример необычной анимации на чистом JS и CSS

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

Как это реализовано, можно посмотреть по ссылке. Там же можно поиграться со значениями, чтобы лучше понять алгоритм.

#codepen #javascript #css

Нашёл инструкцию, как делать 3D-текст без использования JavaScript

Я не знаю в каком проекте вы решите это применить, но выглядит это необычно. На самом деле так можно обрабатывать не только текст, но и SVG-изображения.

На видео, которое вы видите не используется JavaScript. Тут только HTML и CSS. Как это сделать, автор рассказывает у себя в серии статей. В первой части о том, как в принципе сделать такой текст. А в следующих уже будет о том, как его анимировать.

#css #фронтенд

Коллекция странностей CSS, которые могут сломать вам мозг

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

Чтобы не попасться в ловушку особенностей CSS, рекомендую вам хотя бы мельком прочитать эту статью. Здесь про calc(), aspect-ratio, absolute и многое другое.

#css #фронтенд

Адаптивные изображения и подписи на CSS: как работают container queries и :has()

Container queries и селектор :has() делают адаптивность вёрстки проще и чище. Разбираем, как с их помощью построить компонент с feature image, который подстраивается под контейнеры, меняет расположение и стиль подписи, оставаясь стабильным при любой ширине.

Подробности тут.

#фронтенд #css

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

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

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

#фронтенд #css

Как работает псевдокласс :has() в CSS

Псевдокласс :has — это мощный инструмент в CSS, который позволяет выбирать элементы, основываясь на их содержимом или дочерних элементах. Другими словами, он даёт возможность стилизовать элементы на основе контекста внутри них, чего раньше невозможно было сделать только средствами CSS.

Как это работает?

element:has(selector) выбирает элемент, который содержит определённого потомка или соответствует указанному селектору.

/* Выбрать карточки, содержащие кнопку */
.card:has(button) {
    border: 2px solid blue;
}

Здесь будут выделены только те .card, внутри которых есть <button>.

Зачем он нужен?

1. Работа с родительскими элементами. Например, стилизовать <div>, если внутри него есть конкретный элемент.

2. Условное форматирование. Например, вы можете выбрать контейнеры, в которых есть определённое состояние, например, отмеченный чекбокс.

/* Стилизовать родительский div, если внутри есть отмеченный чекбокс */
div:has(input[type="checkbox"]:checked) {
    background-color: lightgreen;
}

#простымисловами #css

Третья и завершающая часть гайда по созданию 3D-текста без JS

Мы уже с вами научились создавать текст в первой части и добавлять анимацию во второй части. Теперь же перейдём к самому крутому — добавим тексту интерактивности и динамичности. Он сможет меняться от взаимодействия с ним, например, по ховеру или клику.

Гайд ждёт вас тут.

#css #фронтенд