Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Little skeumorphic button experiment using css box-shadow

iampetrknoll's profile picture

Petr Knoll

3,217 subscribers

362,819 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitimSanat
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 1 yıl önce

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇
0:14

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

167,991 görüntüleme • 2 yıl önce

Button Experiment 2 LIVE, Sunday 1PM EST
0:13

Button Experiment 2 LIVE, Sunday 1PM EST

Boosfer

29,447 görüntüleme • 5 ay önce

A little Framer experiment using Mapbox. An animated map to show your location ☁️✈️
0:18

A little Framer experiment using Mapbox. An animated map to show your location ☁️✈️

Frank Lagendijk

19,828 görüntüleme • 2 yıl önce

I love animating using CSS.
0:19

I love animating using CSS.

David Aerne

120,495 görüntüleme • 2 yıl önce

To all the devs telling me my button style was impossible to build with code. I did it in Webflow in 10 minutes using only HTML/CSS. No SVGs.
0:13

To all the devs telling me my button style was impossible to build with code. I did it in Webflow in 10 minutes using only HTML/CSS. No SVGs.

Brett

130,023 görüntüleme • 1 yıl önce

glow with care 👨‍🍳 stack css drop-shadow() with increasing blur and saturation + brighten the text color one shadow ≠ glow
0:18

glow with care 👨‍🍳 stack css drop-shadow() with increasing blur and saturation + brighten the text color one shadow ≠ glow

jhey ʕ•ᴥ•ʔ

20,046 görüntüleme • 6 ay önce

Responsive grid layout using HTML and CSS 🚀
0:11

Responsive grid layout using HTML and CSS 🚀

David Mráz

100,825 görüntüleme • 2 yıl önce

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move
0:18

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move

jhey ʕ•ᴥ•ʔ

200,156 görüntüleme • 6 ay önce

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.
0:12

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

Soren

425,266 görüntüleme • 8 ay önce

Mfs will literally shadow box anywhere 😂
0:13

Mfs will literally shadow box anywhere 😂

MrTestoestrogen

55,929 görüntüleme • 1 yıl önce

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

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

CodePen.IO

21,647 görüntüleme • 8 ay önce

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔
0:12

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

203,341 görüntüleme • 3 yıl önce

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 görüntüleme • 6 ay önce

Love this little CSS steps trick for animations
0:10

Love this little CSS steps trick for animations

Andreas Storm

826,315 görüntüleme • 2 yıl önce

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,815 görüntüleme • 7 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

I haven’t seen Sean O’Malley shadow box like this 😮
0:14

I haven’t seen Sean O’Malley shadow box like this 😮

MrTestoestrogen

131,241 görüntüleme • 4 ay önce

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 ʕ•ᴥ•ʔ

139,739 görüntüleme • 7 ay önce