Учимся анимировать в CSS за 20 минут

CSS предлагает два метода анимирования: переходы (transitions) и анимации (animations). Переходы плавно изменяют свойства, а анимации контролируются по ключевым кадрам.

Для создания перехода используются свойства transition: duration, timing function, delay. Анимации создаются с помощью @keyframes и параметров, таких как имя и длительность.

Также есть утилитарные классы, которые упрощают использование анимаций: slideInLeft, slideInRight, rotate и bounce.

Держите статью, где подробно разбирают процесс создания различных анимаций и объясняют принцип их работы.

#css #frontend

Разбор вопросов с собеседований frontend-разработчика

Держите целую серию небольших видео, в которых автор разбирает распространённые вопросы с собеседований на тему HTML, CSS и JS. Например, «позиционирование в CSS», «разница между == и ===», «чем отличается адаптивный и отзывчивый дизайн» и многое другое.

@prog_point #frontend #трудоустройство

Где бесплатно выучить HTML и CSS?

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

Например, вот тут много курсов для начинающих:
— htmlacademy.ru
— hexlet.io
— wayup.in
— itproger.com
— stepik.org

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

@prog_point #web #frontend #html #css

​​Шпаргалка по CSS Grid в картинках, ещё и с единорогами

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

Приглашаем к прочтению

@prog_point #web #frontend #css

Шпаргалка по CSS, ещё и интерактивная

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

Кидайте в закладки эту шпаргалку

@prog_point #web #frontend #css

Всё о 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 #веб