Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

subtle css border pulse effect w/ :active + offset opacity transition 🧑‍🍳 button::after { border: 1px solid #000; opacity: 0; transition: opacity 0.6s 0.1s var(--ease); } button:active::after { opacity: 1; transition-duration: 0s; }

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,078 subscribers

44,884 görüntüleme • 5 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition
0:26

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition

jhey ʕ•ᴥ•ʔ

354,982 görüntüleme • 7 ay önce

image crossfade with CSS :has() 💅 img { transition: opacity 0.24s; } ul:has(li:nth-of-type(2):hover) img:nth-of-type(2) { mix-blend-mode: plus-lighter; opacity: 1; z-index: 2; } few tricks to this demo 🤙
0:25

image crossfade with CSS :has() 💅 img { transition: opacity 0.24s; } ul:has(li:nth-of-type(2):hover) img:nth-of-type(2) { mix-blend-mode: plus-lighter; opacity: 1; z-index: 2; } few tricks to this demo 🤙

jhey ʕ•ᴥ•ʔ

108,894 görüntüleme • 1 yıl önce

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇
0:25

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

729,091 görüntüleme • 2 yıl önce

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌
0:29

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

jhey ʕ•ᴥ•ʔ

257,886 görüntüleme • 1 yıl önce

Fade elements in and out on scroll in a window with CSS? ✅ ul { scroll-padding-inline: 200px; } article { animation: highlight; animation-timeline: view(inline); } @​keyframes highlight { entry 0%, exit 100% { opacity: 0; } entry 100%, exit 0% { opacity: 1; } } cc Adam Wathan
0:36

Fade elements in and out on scroll in a window with CSS? ✅ ul { scroll-padding-inline: 200px; } article { animation: highlight; animation-timeline: view(inline); } @​keyframes highlight { entry 0%, exit 100% { opacity: 0; } entry 100%, exit 0% { opacity: 1; } } cc Adam Wathan

jhey ʕ•ᴥ•ʔ

222,266 görüntüleme • 2 yıl önce

CSS text reveal on scroll 📜 <span style="--start: 210; --end: 280;">details</span> span { animation: reveal; animation-timeline: --section; animation-range: contain calc(var(--start) * 1px) contain calc(var(--end) * 1px); } @​keyframes reveal { 0% { opacity: 0.2; }}
0:37

CSS text reveal on scroll 📜 <span style="--start: 210; --end: 280;">details</span> span { animation: reveal; animation-timeline: --section; animation-range: contain calc(var(--start) * 1px) contain calc(var(--end) * 1px); } @​keyframes reveal { 0% { opacity: 0.2; }}

jhey ʕ•ᴥ•ʔ

164,348 görüntüleme • 2 yıl önce

— 🖤 • ʚ How to make 4 easy transitions in Adobe After Effects Tutorial! ɞ 🧵🖤 ♡・ I'll show you how to do a scale, position, rotation, and opacity transition, pt 2 is in the comments!・ ♡ #VTuberAssets #Vtuber
2:00

— 🖤 • ʚ How to make 4 easy transitions in Adobe After Effects Tutorial! ɞ 🧵🖤 ♡・ I'll show you how to do a scale, position, rotation, and opacity transition, pt 2 is in the comments!・ ♡ #VTuberAssets #Vtuber

♰﹒akumii 🦇💜┊vgen open!

38,750 görüntüleme • 2 yıl önce

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @​keyframes fx { 0% { filter: blur(20px); opacity: 0; }}
0:25

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @​keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

jhey ʕ•ᴥ•ʔ

121,664 görüntüleme • 1 yıl önce

Isa's Customizable Model v.1.01 a small update~ ✦ color sliders for human, elf, wing ears ✦ color & opacity slider for blush ✦ opacity slider for nose shine ✦ eyelash types can be combined ✦ eye size slider ✦ opacity slider for neck shade ✦ face texture moves with mouth
0:43

Isa's Customizable Model v.1.01 a small update~ ✦ color sliders for human, elf, wing ears ✦ color & opacity slider for blush ✦ opacity slider for nose shine ✦ eyelash types can be combined ✦ eye size slider ✦ opacity slider for neck shade ✦ face texture moves with mouth

isa ✧ Komiket Makati A11

16,088 görüntüleme • 5 ay önce

Reduce opacity by 10% everyday 😂😂
0:31

Reduce opacity by 10% everyday 😂😂

MERICA MEMED

24,611 görüntüleme • 3 ay önce

I have fallen in love with Ghostty Terminal. Look at this subtle, but incredibly useful opacity trick you can use to show "focus" when working in multiple panes. Shout out Daniel San who showed me this. What a legend. Ghostty config file: unfocused-split-opacity = 0.55
0:21

I have fallen in love with Ghostty Terminal. Look at this subtle, but incredibly useful opacity trick you can use to show "focus" when working in multiple panes. Shout out Daniel San who showed me this. What a legend. Ghostty config file: unfocused-split-opacity = 0.55

am.will

86,085 görüntüleme • 3 ay önce

not at dduks lowering the live opacity and the background showing slowly when bamby doing aegyo at the ending 🤣🤣🤣🤣🤣 🩷 *aegyo* 🩷 CUTTTTTT!!!! 👤 *lowering the live opacity*
0:25

not at dduks lowering the live opacity and the background showing slowly when bamby doing aegyo at the ending 🤣🤣🤣🤣🤣 🩷 *aegyo* 🩷 CUTTTTTT!!!! 👤 *lowering the live opacity*

jess

20,984 görüntüleme • 3 ay önce

ได้เวลาทำHow toลงสีแบบทับเส้นคับ ส่วนตัวมีสเต็ปตามนี้เลยค่ะ แล้วก็เอาlayerเส้นร่างไว้บนสุดแล้วปรับopacity น้อยๆค่ะ✨
1:04

ได้เวลาทำHow toลงสีแบบทับเส้นคับ ส่วนตัวมีสเต็ปตามนี้เลยค่ะ แล้วก็เอาlayerเส้นร่างไว้บนสุดแล้วปรับopacity น้อยๆค่ะ✨

ɴᴜᴜɴɢᴜɴɢ456

29,032 görüntüleme • 3 yıl önce

used g-pen with low opacity to render this silly guy's hair
1:01

used g-pen with low opacity to render this silly guy's hair

_syaden.

96,786 görüntüleme • 2 yıl önce

Ecosystem Spotlight: Opacity Our gen-zk intern spent some time getting to know:
0:33

Ecosystem Spotlight: Opacity Our gen-zk intern spent some time getting to know:

Succinct

57,111 görüntüleme • 10 ay önce

A quick Look at Opacity: an app for visually building components. 🗣️ Single Source Of Truth! Opacity is made SPECIFICALLY for modern software product design, not general "web design". Let me know what you think :)
11:36

A quick Look at Opacity: an app for visually building components. 🗣️ Single Source Of Truth! Opacity is made SPECIFICALLY for modern software product design, not general "web design". Let me know what you think :)

Drew Wilson

13,084 görüntüleme • 1 yıl önce

Intentional CSS :hover effects 🎈 Add a small transition-delay so you know the :hover is intentional. See the difference below 🎞️ a::after { transition: scale 0.2s ease-in-out; } vs. a::after { transition: scale 0.2s 0.125s ease-in-out; } Can be useful for some designs 🤙
0:44

Intentional CSS :hover effects 🎈 Add a small transition-delay so you know the :hover is intentional. See the difference below 🎞️ a::after { transition: scale 0.2s ease-in-out; } vs. a::after { transition: scale 0.2s 0.125s ease-in-out; } Can be useful for some designs 🤙

jhey ʕ•ᴥ•ʔ

109,340 görüntüleme • 2 yıl önce

Creating opacity and “ ambient lighting “ to separate the two characters ;) #marcelomatere #transformers #aketch #morethanmeetstheeyes
0:52

Creating opacity and “ ambient lighting “ to separate the two characters ;) #marcelomatere #transformers #aketch #morethanmeetstheeyes

Marcelo Matere / Transformers Hall Of The Fame

10,118 görüntüleme • 3 ay önce

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳
0:36

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,131 görüntüleme • 7 ay önce