Загрузка видео...

Не удалось загрузить видео

На главную

"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner

CodePen's profile picture

CodePen.IO

204,269 subscribers

21,647 просмотров • 9 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

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

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

182,528 просмотров • 3 лет назад

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }
0:19

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }

jhey ʕ•ᴥ•ʔ

111,340 просмотров • 1 год назад

I love animating using CSS.
0:19

I love animating using CSS.

David Aerne

120,514 просмотров • 2 лет назад

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇
0:17

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

517,488 просмотров • 2 лет назад

Responsive grid layout using HTML and CSS 🚀
0:11

Responsive grid layout using HTML and CSS 🚀

David Mráz

100,843 просмотров • 2 лет назад

Little skeumorphic button experiment using css box-shadow
0:15

Little skeumorphic button experiment using css box-shadow

Petr Knoll

362,819 просмотров • 1 год назад

Got carried away with this interactive module for breaking down the CSS mask-image property
0:16

Got carried away with this interactive module for breaking down the CSS mask-image property

rauno

30,879 просмотров • 10 месяцев назад

created this animated vestaboard, made using Next.js and Tailwind CSS
0:11

created this animated vestaboard, made using Next.js and Tailwind CSS

OPM

12,995 просмотров • 7 месяцев назад

I made a version of this using only modern CSS. 👀
0:13

I made a version of this using only modern CSS. 👀

H. Kyle Foster

64,822 просмотров • 7 месяцев назад

Create this layout using nested css grids and media queries 💪
0:14

Create this layout using nested css grids and media queries 💪

David Mráz

14,283 просмотров • 1 год назад

Create this responsive flex layout using just HTML and CSS 🚀
0:10

Create this responsive flex layout using just HTML and CSS 🚀

David Mráz

38,100 просмотров • 1 год назад

Made this 404 error page just using CSS ✅ Code 👇
0:13

Made this 404 error page just using CSS ✅ Code 👇

Atharva ☄️

190,529 просмотров • 3 лет назад

Create sidebar using HTML and CSS 🚀 Code in the comments 👨‍💻
0:11

Create sidebar using HTML and CSS 🚀 Code in the comments 👨‍💻

David Mráz

300,162 просмотров • 2 лет назад

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳
0:19

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳

jhey ʕ•ᴥ•ʔ

156,911 просмотров • 7 месяцев назад

Create these burgers using HTML and CSS 🚀 Code in the comments 👨‍💻
0:11

Create these burgers using HTML and CSS 🚀 Code in the comments 👨‍💻

David Mráz

33,732 просмотров • 1 год назад

Password checker using HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻
0:10

Password checker using HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

David Mráz

13,658 просмотров • 11 месяцев назад

Face Expression Rating using HTML/CSS 🚀🚀 How's it folks...? Code 👇
0:18

Face Expression Rating using HTML/CSS 🚀🚀 How's it folks...? Code 👇

Anas

157,555 просмотров • 3 лет назад

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;
0:13

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;

jhey ʕ•ᴥ•ʔ

208,853 просмотров • 20 дней назад

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔
0:11

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

140,209 просмотров • 3 лет назад