CSS3 flexbox практика | Эффект при наведении в CSS

Опубликовано: 12 Февраль 2025
на канале: Denis Gorelov

11,292

580

Исходный код с картинками - http://bit.ly/2zgpG2F
Шпаргалка по #EMMET - http://bit.ly/2zwDk1p

В текущем уроке поработаем с изображениями. При помощи #transform и #transition, сделаем по наведению следующую анимацию, изображение немного повернем, увеличим его в размерах, и сделаем его немного бесцветным. С левой стороны будут выезжать два блока с текстовой информацией. В нижней части появляется блок с иконками, которые подключим через сайт #font-awesome. По наведению на иконку сделаем им индивидуальный цвет.

Для иконок задействуем #flexbox. Также все блоки будут адаптивны, и подстраиваются под разные форматах экранов. Все это реализуем на #flex #box и #медиа #запросах.

Для материальной поддержки канала:
WMR - R165181087249
WMZ - Z138569415925
PayPal - paypal.me/dwstv
Яндекс - 410011610186118
Сбербанк - 4276-3000-2291-1211

Во время урока я использую:
Документацию по #CSS3, HTML5
Редактор #PhpStorm

*Видео метки*:
[01:08] - Обзор урока
[01:53] - Html структура блоков
[04:27] - Устанавливаем иконки
[06:12] - Cтили оформление изображения
[09:15] - Позиционирование текста
[10:51] - Добавляем динамуку для картинки
[11:32] - Оформляем иконки
[15:34] - Адаптируем при помощи flexbox
[18:44] - Адаптируем при помощи @media
[23:37] - Проверяем результат

Обсуждение видео: • CSS3 flexbox практика | Эффект при на...
Скачать архив с урока - https://goo.gl/nk1WuJ
Скачать картинки - https://goo.gl/wcSphu
Урок по плагину EMMET - • Как научиться быстро верстать? | Плаг...
Подписка на канал: https://dwstroy.ru/~dwstv
Видео сборник: https://dwstroy.ru/~S126H

*Другие видео на канале DWSTV*:
JavaScript Основы - http://bit.ly/2udeTq3
Сайт с нуля - https://dwstroy.ru/~7KNnM
Уроки по #CSS - https://dwstroy.ru/~paoBU
1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q
Управление системой Битрикс - https://dwstroy.ru/~Zdt4K
Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ

Добавляйтесь к нам в друзья:
Сайт видео-уроков: http://dwsttv.ru/
Канал в VK автора уроков: https://vk.com/dwstv
Канал группы в VK: https://dwstroy.ru/~MJM28

Мы очень рады если видео "#CSS3 #flaxbox #практика | #Эффект при #наведении в #CSS" было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.