Magic CSS Border Animation 🖼
Видели эффект меняющегося цвета в border, но не знали как его сделать?
Мы с вами разберем 3 способа, как этого можно добиться.
1) Первый способ - анимация положения фонового линейного гридиентного цвета.
2) Второй способ - анимация кастомной переменной и конический градиент.
3) Третий способ - анимация примененного фильтра hue-rotate.
4) Бонусом сделаем анимацию переменной наклона фонового линейного градиента.
Разметка представляет из себя кнопки и ссылки с классами .btn и дополнительными классами для задания будущей анимации.
В :root в переменную прописан будущий градиент.
Для класса .btn указаны базовые стили, минимальная ширина, padding, фоновый цвет, border в виде прозрачной рамки, border-radius и background-clip: padding-box, сквозь который и будет просвечивать цветная рамка.
Псевдоэлемент абсолютно позиционирован и через inset растянут на величину border-а.
Background эффект сделан через линейный градиент с увеличенным размером фона, который анимируется от начала до конца.
Rotate эффект сделан через конический градиент. И анимируем мы переменную –deg. А чтобы это сделать нам необходимо определить переменную через @property.
Hue-эффект сделан через линейный градиент. Мы лишь меняем цвет через фильтр hue-rotate.
• Magic 🪄 CSS Border 🚪 Animation - 3-мя разн... - ссылка на полное видео.
https://github.com/Pots1988/l-b-hover... - ссылка на эффект.
#css #html #web #webdevelopment #frontend #htmlcss #html5 #htmltutorial #htmlelements #css3 #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects
#webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #javascript #vue #react #angular #svelte #vanillajs #js #animation #cssawesome #learncss #course #programming #crash_course
Подписывайтесь на меня в соц. сетях:
👨💻 LinkedIn - / maksymfariga
✈️ Telegram - канал Web🤖Education
📷 Instagram - / maksym_fariga (@maksym_fariga)
📖 Facebook - / maksymfariga
🐤 Twitter - / fariga_m
🎶 TikTok - / maksym_fariga
✍️ Tumblr - / maksymfariga
💬 Twitch - / maksym_fariga
🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉 • А px, то не настоящий! PPI и DPI, DPPX и ... ✍️
🪃 Не знаете какие есть единицы для задания углов или когда и какие применять? 👉 • CSS Units: Deg, Rad, Grad, Turn . ✍️
📏 Абсолютные единицы измерения в CSS? 👉 • Нужны ли они нам? Абсолютные единицы измер... . ✍️
📐 Относительные единицы измерения ex, ch, ic, lh 👉 • Зачем они были добавлены? CSS Units: ex, c... ✍️
🔍 Не знаете что выбрать REM или EM 👉 • Вы точно не знаете зачем мы используем REM... ✍️
💻 Все про viewport, vh, vw, vmin, vmax 👉 • 😏 CSS Viewport Units: vw, vh, vmin, vmax! ... ✍️