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

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

На главную

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 просмотров • 5 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

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

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

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

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

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 просмотров • 7 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

— 🖤 • ʚ 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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 5 месяцев назад

Reduce opacity by 10% everyday 😂😂
0:31

Reduce opacity by 10% everyday 😂😂

MERICA MEMED

24,611 просмотров • 3 месяцев назад

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 просмотров • 3 месяцев назад

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 просмотров • 3 месяцев назад

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

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

ɴᴜᴜɴɢᴜɴɢ456

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

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 просмотров • 2 лет назад

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 просмотров • 10 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 3 месяцев назад

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 просмотров • 7 месяцев назад