Создание красивого сайта с 3D анимацией волны (HTML + CSS)

Подписаться 303 тыс.

Просмотров 15 тыс.

50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
В этом уроке мы рассмотрим создание сайта с красивой 3D анимацией волны при наведении мыши на чистом HTML и CSS. Главный замысел урока - показать возможности стилизации соседних элементов в CSS. Немногие знают, что стилизовать можно не только последующие элементы, посредством использования плюс, но и предыдущие элементы от выбранного.
Страница урока: webdesign-master.ru/blog/html...
Таймкоды:
00:00 Начало урока
00:30 Приступаем к HTML верстке сайта
05:49 CSS стилизация элементов
11:43 Верстка 3D эффекта волны
23:49 Анимация при движении мыши
25:46 Плавная анимация цвета в CSS
29:53 Анимация по клику без JS
33:55 Что ещё изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

Опубликовано:

15 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 28

@wdm Месяц назад

💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses

@blckwht_ 2 месяца назад

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

@user-ey2wx2fu7h Месяц назад

Лучшие уроки от по технологиям фронта у вас на канале, спасибо за труд ❤

@Gda64 2 месяца назад

Снова нереальная красота. Спасибо.

@user-hp7gl8hj3f Месяц назад

Шедевр. Спасибо за урок.

@UsaFarmstylelife 2 месяца назад

Наконец-то мастер в сети

@GGSoft2009 2 месяца назад

Ну Вы даете!!!! Как много чего я нашел на этом уроке. Когда я перейду к изучению фронтента, начну с Ваших курсов, обязательно. Спасибо за очень интересный контент !!!!

@justme3015 2 месяца назад

Какая красота!!! Вы просто гений!!! Я закончила курс по HTML/CSS у одной девочки с Канады. Так вот я сейчас первый раз слышу про псевдоклассы, z-index и все остальное!!! Я из вашего урока узнала больше чем у нее за 2 месяца на курсе! Спасибо вам большое за такой прекрасный контент!

@user-ve8ux5yy7y 2 месяца назад

Шикарно. Спасибо большое

@Artmel 2 месяца назад

Спасибо за ваш труд🤝

@user-mo4ne2gi9o 2 месяца назад

Очень крутое видео и объяснение, спасибо

@lernikharutyunyan604 9 дней назад

👍 гениально!

@rostyslavkinash5232 Месяц назад

Спасибо за урок, всегда удивляюсь как с помощью простого CSS можно делать такие вещи.

@gamingplay5415 2 месяца назад

классно ❤

@8nhuman8 2 месяца назад

К верстке вообще отношения не имею, но все равно нравится смотреть ваши видео

@koljasha_nafman 2 месяца назад

Я не очень люблю верстку, даже больше скажу, она меня напрягает. Но после Ваших уроков она открывается на совсем другом уровне. Спасибо 👍

@MrKatunins 2 месяца назад

css мощь!!!

@Semiero_Jonskay 2 месяца назад

Привет, у тебя очень классные видео, за короткий промежуток времени узнаёшь много полезного, все на доступном языке. Я вот хотел поинтересоваться, ты выбираешь сразу пару строк и пишешь там, надо ли зажимать какую то кнопку? Работает ли эта фича в обычном блокноте?

@wdm 2 месяца назад

Привет. Спасибо. В обычном блокноте такой фичи нет, только в редакторе кода. Почти все современные редакторы кода поддерживают множественное выделение. В редакторе VS Code это можно сделать либо зажав колесо мыши и выделив строки по вертикали, либо зажав Alt и сделав множественное выделение в нужных местах.

@BoomKillazz 2 месяца назад

💣💣💣

@towelie117 2 месяца назад

Спасибо за урок! Заметил что ваш vscode выглядит как-то иначе по сравнению с текущей версией по умолчанию. Больше соответствует стилю windows 11. Расскажите как этого добились?)

@wdm 2 месяца назад

Здравствуйте. А это кастомная тема для записи уроков. Чтобы не мешало ничего.

@user-pd9gl3pt1u 2 месяца назад

Подскажите пожалуйста как она называется) @@wdm

@kristinadudina8098 Месяц назад

Добрый день Алексей. у меня проблема. и не могу найти ответ. фотографии у меня выходят вертикально по левой стороне. если можно и как исправить. благодарю за ранее. Спасибо за ваш курс. мне очень понравился.

@wdm Месяц назад

Здравствуйте. Покажите скриншот или опишите подробнее проблему.