https://github.com/yauhenkavalchuk/css-effects
Код из выпусков видеокаста “CSS Эффекты” на YouTube-канале webDev (https://tinyurl.com/7pjhftxp)
https://github.com/yauhenkavalchuk/css-effects
css css3 html html-css html5 sass
Last synced: 6 months ago
JSON representation
Код из выпусков видеокаста “CSS Эффекты” на YouTube-канале webDev (https://tinyurl.com/7pjhftxp)
- Host: GitHub
- URL: https://github.com/yauhenkavalchuk/css-effects
- Owner: YauhenKavalchuk
- Created: 2019-10-28T10:57:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-06T10:30:46.000Z (over 3 years ago)
- Last Synced: 2025-04-04T01:05:12.294Z (6 months ago)
- Topics: css, css3, html, html-css, html5, sass
- Language: HTML
- Homepage: http://youtube.com/c/YauhenKavalchuk/
- Size: 125 KB
- Stars: 17
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Эффекты
### Описание:
В данном видеокасте мы с вами будем рассматривать и создавать различные дизайнерские элементы пользовательского интерфейса (UI).
Примерами будут служить оригинальные анимации, необычные трансформации и переходы.
Любой элемент можно можно использовать для вдохновения, а так же дорабатывать или переделывать самостоятельно, т.к. весь код можно найти в GitHub репозитории.
Разметка будет писаться на HTML, а все эффекты создаваться только с помощью CSS (с использованием препроцессора SASS).
### Поддержать развитие канала:
[
][sponsor]
[
][patron]
---
### Список уроков:
- [#1 Оригинальный Hover-эффект кнопки](https://youtu.be/qYkqQCohfAc)
- [#2 Анимация 3D переворота карточки](https://youtu.be/l7UbiJwE9mc)
- [#3 Карточки со скошенным дизайном](https://youtu.be/1JYPSI1ZDBc)
- [#4 Кнопки социальных сетей с креативным Hover-эффектом](https://youtu.be/IqMBPjwg8nM)
- [#5 Кнопка с неоновым светом](https://youtu.be/iha5Z6qv8xs)
- [#6 Минималистичная страница ошибки](https://youtu.be/32GwTL-8yXQ)
- [#7 Отзывчивое меню навигации](https://youtu.be/z-3hnHn6V5w)
- [#8 Анимированный индикатор выполнения](https://youtu.be/z-jJrClQXRQ)
- [#9 Анимация 3D вращения](https://youtu.be/LKI-i_J79EQ)
- [#10 Анимированный текст загрузки](https://youtu.be/ITYNnrDSk68)
- [#11 Анимированные кнопки с градиентом](https://youtu.be/TfziVoVo-94)
- [#12 Круговая полоса прогресса](https://youtu.be/hRYA1CXfwP4)
- [#13 Оригинальный эффект вращения карточки](https://youtu.be/d1xGDF2ToEY)
- [#14 Анимированный загрузчик Pacman](https://youtu.be/t8jMqkEzpKo)
- [#15 Креативный одностраничный слайдер](https://youtu.be/sOsDBYOi74Q)
- [#16 Параллакс эффект](https://youtu.be/QEGsNQosAt0)
- [#17 Glitch эффект](https://youtu.be/gbXx9I1qQN4)
- [#18 Вращающиеся 3D кнопки](https://youtu.be/XlsEP9iQs1s)
- [#19 Кнопка с анимацией волны](https://youtu.be/hSeNSV2Epzo)
- [#20 Интересный Hover-эффект карточки](https://youtu.be/5dbRRfmNsss)
- [#21 Креативная карточка продукта](https://youtu.be/T9Vq-8BXFXA)
- [#22 Анимированный эффект градиентной тени](https://youtu.be/3naanA-_Krw)
- [#23 Оригинальный Hover-эффект элементов меню](https://youtu.be/FTvMze67TTo)
- [#24 Анимация границы карточки товара](https://youtu.be/4eDhKnDhzb8)
- [#25 Скошенное меню с иконками](https://youtu.be/5dbRRfmNsss)
- [#26 Пользовательский анимированный Checkbox](https://youtu.be/tjMiFkQrHHQ)
- [#27 Стильный пользовательский Scrollbar](https://youtu.be/gv0tk3_Ou70)
- [#28 Креативная кнопка-переключатель](https://youtu.be/puA9tOWt7V8)
- [#29 Анимированное окно поиска](https://youtu.be/OG2zy0-sRe8)
- [#30 Неоновый Checkbox](https://youtu.be/E1byOJ9eOoE)
- [#31 Стильный Hover-эффект карточки](https://youtu.be/-ZHXKSwFICE)
---
### Связаться со мной:
[
][youtube]
[
][instagram]
[
][linkedin]
[
][twitter]
[
][vk]
[youtube]: https://youtube.com/YauhenKavalchuk
[instagram]: https://instagram.com/YauhenKavalchuk
[linkedin]: https://linkedin.com/in/YauhenKavalchuk
[vk]: https://vk.com/YauhenKavalchuk
[twitter]: https://twitter.com/YauhenKavalchuk
[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join
[patron]: https://www.patreon.com/YauhenKavalchuk