{"id":19486024,"url":"https://github.com/yauhenkavalchuk/css-effects","last_synced_at":"2026-03-04T20:02:46.397Z","repository":{"id":41191762,"uuid":"218026153","full_name":"YauhenKavalchuk/css-effects","owner":"YauhenKavalchuk","description":"Код из выпусков видеокаста “CSS Эффекты” на YouTube-канале webDev (https://tinyurl.com/7pjhftxp)","archived":false,"fork":false,"pushed_at":"2022-02-06T10:30:46.000Z","size":128,"stargazers_count":17,"open_issues_count":0,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-25T18:39:10.915Z","etag":null,"topics":["css","css3","html","html-css","html5","sass"],"latest_commit_sha":null,"homepage":"http://youtube.com/c/YauhenKavalchuk/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YauhenKavalchuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-28T10:57:18.000Z","updated_at":"2025-03-12T18:11:48.000Z","dependencies_parsed_at":"2022-09-13T05:03:27.368Z","dependency_job_id":null,"html_url":"https://github.com/YauhenKavalchuk/css-effects","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/YauhenKavalchuk/css-effects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss-effects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss-effects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss-effects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss-effects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YauhenKavalchuk","download_url":"https://codeload.github.com/YauhenKavalchuk/css-effects/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss-effects/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30091571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T19:41:02.502Z","status":"ssl_error","status_checked_at":"2026-03-04T19:40:05.550Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","html","html-css","html5","sass"],"created_at":"2024-11-10T20:33:02.554Z","updated_at":"2026-03-04T20:02:46.362Z","avatar_url":"https://github.com/YauhenKavalchuk.png","language":"HTML","funding_links":["https://www.patreon.com/YauhenKavalchuk"],"categories":[],"sub_categories":[],"readme":"# CSS Эффекты\n\n### Описание:\nВ данном видеокасте мы с вами будем рассматривать и создавать различные дизайнерские элементы пользовательского интерфейса (UI).\nПримерами будут служить оригинальные анимации, необычные трансформации и переходы.\nЛюбой элемент можно можно использовать для вдохновения, а так же дорабатывать или переделывать самостоятельно, т.к. весь код можно найти в GitHub репозитории.\nРазметка будет писаться на HTML, а все эффекты создаваться только с помощью CSS (с использованием препроцессора SASS).\n\n### Поддержать развитие канала:\n[\u003cimg alt=\"webDev | YouTube Sponsor\" src=\"https://img.shields.io/badge/Become a sponsor-F70000.svg?\u0026style=for-the-badge\u0026logo=youtube\u0026logoColor=fff\" /\u003e][sponsor]\n[\u003cimg alt=\"webDev | Patreon\" src=\"https://img.shields.io/badge/Become a patron-EF6451.svg?\u0026style=for-the-badge\u0026logo=patreon\u0026logoColor=fff\" /\u003e][patron]\n\n---\n\n### Список уроков:\n- [#1 Оригинальный Hover-эффект кнопки](https://youtu.be/qYkqQCohfAc)\n- [#2 Анимация 3D переворота карточки](https://youtu.be/l7UbiJwE9mc)\n- [#3 Карточки со скошенным дизайном](https://youtu.be/1JYPSI1ZDBc)\n- [#4 Кнопки социальных сетей с креативным Hover-эффектом](https://youtu.be/IqMBPjwg8nM)\n- [#5 Кнопка с неоновым светом](https://youtu.be/iha5Z6qv8xs)\n- [#6 Минималистичная страница ошибки](https://youtu.be/32GwTL-8yXQ)\n- [#7 Отзывчивое меню навигации](https://youtu.be/z-3hnHn6V5w)\n- [#8 Анимированный индикатор выполнения](https://youtu.be/z-jJrClQXRQ)\n- [#9 Анимация 3D вращения](https://youtu.be/LKI-i_J79EQ)\n- [#10 Анимированный текст загрузки](https://youtu.be/ITYNnrDSk68)\n- [#11 Анимированные кнопки с градиентом](https://youtu.be/TfziVoVo-94)\n- [#12 Круговая полоса прогресса](https://youtu.be/hRYA1CXfwP4)\n- [#13 Оригинальный эффект вращения карточки](https://youtu.be/d1xGDF2ToEY)\n- [#14 Анимированный загрузчик Pacman](https://youtu.be/t8jMqkEzpKo)\n- [#15 Креативный одностраничный слайдер](https://youtu.be/sOsDBYOi74Q)\n- [#16 Параллакс эффект](https://youtu.be/QEGsNQosAt0)\n- [#17 Glitch эффект](https://youtu.be/gbXx9I1qQN4)\n- [#18 Вращающиеся 3D кнопки](https://youtu.be/XlsEP9iQs1s)\n- [#19 Кнопка с анимацией волны](https://youtu.be/hSeNSV2Epzo)\n- [#20 Интересный Hover-эффект карточки](https://youtu.be/5dbRRfmNsss)\n- [#21 Креативная карточка продукта](https://youtu.be/T9Vq-8BXFXA)\n- [#22 Анимированный эффект градиентной тени](https://youtu.be/3naanA-_Krw)\n- [#23 Оригинальный Hover-эффект элементов меню](https://youtu.be/FTvMze67TTo)\n- [#24 Анимация границы карточки товара](https://youtu.be/4eDhKnDhzb8)\n- [#25 Скошенное меню с иконками](https://youtu.be/5dbRRfmNsss)\n- [#26 Пользовательский анимированный Checkbox](https://youtu.be/tjMiFkQrHHQ)\n- [#27 Стильный пользовательский Scrollbar](https://youtu.be/gv0tk3_Ou70)\n- [#28 Креативная кнопка-переключатель](https://youtu.be/puA9tOWt7V8)\n- [#29 Анимированное окно поиска](https://youtu.be/OG2zy0-sRe8)\n- [#30 Неоновый Checkbox](https://youtu.be/E1byOJ9eOoE)\n- [#31 Стильный Hover-эффект карточки](https://youtu.be/-ZHXKSwFICE)\n\n---\n\n### Связаться со мной:\n[\u003cimg alt=\"webDev | YouTube\" src=\"https://img.shields.io/badge/youtube-FF0000.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e][youtube]\n[\u003cimg alt=\"webDev | Instagram\" src=\"https://img.shields.io/badge/instagram-E4405F.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e][instagram]\n[\u003cimg alt=\"webDev | LinkedIn\" src=\"https://img.shields.io/badge/linkedin-0077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" /\u003e][linkedin]\n[\u003cimg alt=\"webDev | Twitter\" src=\"https://img.shields.io/badge/twitter-1DA1F2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" /\u003e][twitter]\n[\u003cimg alt=\"webDev | VK\" src=\"https://img.shields.io/badge/vk-4680C2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" /\u003e][vk]\n\n[youtube]: https://youtube.com/YauhenKavalchuk\n[instagram]: https://instagram.com/YauhenKavalchuk\n[linkedin]: https://linkedin.com/in/YauhenKavalchuk\n[vk]: https://vk.com/YauhenKavalchuk\n[twitter]: https://twitter.com/YauhenKavalchuk\n[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join\n[patron]: https://www.patreon.com/YauhenKavalchuk\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyauhenkavalchuk%2Fcss-effects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyauhenkavalchuk%2Fcss-effects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyauhenkavalchuk%2Fcss-effects/lists"}