Всё о CSS Grid за 13 минут

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

Также использование CSS Grid помогает сократить количество кода, улучшить читаемость стилей и сделать макеты более предсказуемыми и контролируемыми.

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

https://youtu.be/MEOR2b69Pl4?si=Jk6MQxo7VHO-VP_v

@prog_point #web #frontend #css

​​24 CSS-проекта: Анимация загрузки, индикаторы выполнения, карточки и многое другое

На freeCodeCamp вышло новое видео, в котором вы сможете узнать, насколько хорошо вы на самом деле знаете CSS.

На протяжении 24 заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и Instagram. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS: https://youtu.be/TzuWIHGFKCQ

#css

Детальный справочник для веб-разработчиков от А до Я

Если вы искали ресурс, где в одном месте собрано всё, что нужно знать по фронтенд-разработке, то рекомендуем вам Дока. Здесь собрана информация как по основам вёрстки, так и по фреймворкам, JS и TS. Абсолютно бесплатно!

https://doka.guide/

#шпаргалка #веб #javascript #html #css

​​​Old but gold: Десять советов по улучшению CSS-переходов и анимации

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

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций:

https://joshcollinsworth.com/blog/great-transitions

#css

6 полезных свойств CSS за 10 минут

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

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

Если хотите смотреть оригинал, то он доступен по ссылке.

#видео #css #веб

Медитативное программирование: Делаем бесконечную лестницу на чистом HTML и CSS без лишних слов

#видео #html #css #веб

Небольшая шпаргалка по относительным величинам CSS

Здесь наглядно показано, чем отличается em от rem. Сохраняйте, чтобы не забыть.

#шпаргалка #css

Вы правда думаете, что знаете все возможности Box Shadows в CSS?

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

Загляните к нему и посмотрите сами.

#веб #css #ненормальноепрограммирование

Саморисующиеся фигуры на CSS

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

Всё, что вам требуется, добавить в код SVG к строку pathLength="1", а затем прописать следующие стили в CSS:

path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

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

Подробнее о способе можно почитать здесь.

#css #лайфхак

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

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

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

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

#css #веб

Switch Day and Night - Cat

Проект, который реализован на чистом CSS, покажет вам, как можно создать переключатель стилей по псевдоклассу :checked

#codepen #css

Интерактивное руководство по CSS Transitions

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

https://www.joshwcomeau.com/animation/css-transitions/

#css #веб #фронтенд

Матовое стекло следующего уровня с backdrop-filter в CSS

Для создания эффекта матового стекла на веб-сайте самый просто способ — использования filter: blur(). Но Джош Комо предлагает вариант с помощью backdrop-filter: blur(), ещё одного CSS-свойства, которое делает эффект круче.

В этой статье вы узнаете, чем оно отличается от классического свойства filter, как браузер вычисляет «то, что под элементом», какие эффекты (blur, brightness, contrast…) сочетаются между собой и где сегодня есть поддержка. В конце — интерактивная песочница: меняйте параметры и сразу видите результат.

#фронтенд #css

Первый сайт «своими руками»: пошаговая инструкция без фреймворков

Начало не всегда должно быть сложным. В этом гайде поэтапно разбирается создание сайта на чистом HTML и CSS — от структуры папок до стилей, адаптивного меню и внедрения Google Fonts. Полезно как новичкам, так и тем, кто хочет освежить фундамент перед переходом на современные фреймворки.

А вы когда последний раз вручную писали сайт без сборщиков?

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

Возможно, что эти HTML- и CSS-ошибки есть в вашем коде

Казалось бы, основные грабли веб-верстки давно известны, но ловушки ждут в деталях — от неожиданных эффектов font-size в rem и px до проблем с outline и адаптацией стилей к accessibility.

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

https://habr.com/ru/companies/ruvds/articles/928018/

Я вот не задумывался о некоторых нюансах, описанных в статье. А вы?

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

Что такое @scope в CSS #простымисловами

@scope в CSS — это возможность ограничивать действие стилей определённой областью на странице. То есть вы можете задать стили, которые будут применяться только внутри конкретного блока, а не по всей странице.

Простой пример

Допустим, у вас есть два блока с одинаковыми заголовками:

<section class="blog">
  <h2>Заголовок блога</h2>
</section>

<section class="sidebar">
  <h2>Заголовок сайдбара</h2>
</section>

Раньше вам приходилось писать селекторы вроде .blog h2 { ... }, чтобы не затронуть другие заголовки. С @scope можно сделать это аккуратнее:

@scope (.blog) {
  h2 {
    color: darkblue;
  }
}

Теперь стиль применяется только к заголовкам внутри .blog, и не влияет на другие h2 на странице.

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

— Уменьшает конфликт между стилями разных компонентов.
— Упрощает переиспользование компонентов — один блок не «ломает» другой.
— Делает CSS более предсказуемым и читаемым.

### Что важно знать

— @scope сейчас поддерживается не во всех браузерах, но его уже можно попробовать в Chrome (начиная с версии 117) и некоторых других.
— Это не замена классическим селекторам, а дополнительный инструмент для ограничения области действия стилей.

#css #фронтенд

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

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

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

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