Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

🤌 Glassmorphism with Tailwind CSS 1️⃣ set a semi-transparent background 2️⃣ use `backdrop-filter: blur` 3️⃣ play with the bg opacity, blur level, border and shadow ✨

Simon Vrachliotis

25,289 subscribers

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

Anya Rossi• Live Now

Private livecam show

9 Yorum

Falgantil profil fotoğrafı

Falgantil1 yıl önce

Really love these simple clips that shows how to use CSS properties you might not get to use on a daily basis.

Simon Vrachliotis profil fotoğrafı

Simon Vrachliotis1 yıl önce

That's great to hear 🤙

𝗻𝗲𝘅𝘅𝗮𝗶 profil fotoğrafı

𝗻𝗲𝘅𝘅𝗮𝗶1 yıl önce

So good!

Simon Vrachliotis profil fotoğrafı

Simon Vrachliotis1 yıl önce

✌️

Web Reaper | Website Engineer profil fotoğrafı

Web Reaper | Website Engineer1 yıl önce

Definitely a popular effect. Only risk is stuttering if there's a lot of it or the blur is high

Simon Vrachliotis profil fotoğrafı

Simon Vrachliotis1 yıl önce

True, use with moderation ✌️

Jon Meyers profil fotoğrafı

Jon Meyers1 yıl önce

This is sick! More videos like this please!

Simon Vrachliotis profil fotoğrafı

Simon Vrachliotis1 yıl önce

🫡

Leandro Acosta 🇧🇷🇨🇳 profil fotoğrafı

Leandro Acosta 🇧🇷🇨🇳1 yıl önce

Whole ERP using this glassmorphism

Benzer Videolar

🤌 Blurry blobs with Tailwind CSS 1️⃣ create a few colorful shapes 2️⃣ add some blur and mix-blend-modes 3️⃣ keyframe the position & size of the shapes 4️⃣ stagger the animation-delay for randomness

🤌 Blurry blobs with Tailwind CSS 1️⃣ create a few colorful shapes 2️⃣ add some blur and mix-blend-modes 3️⃣ keyframe the position & size of the shapes 4️⃣ stagger the animation-delay for randomness

Simon Vrachliotis

23,445 görüntüleme • 1 yıl önce

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jhey ʕ•ᴥ•ʔ

44,674 görüntüleme • 1 yıl önce

Ghostty can be a floating Liquid Glass panel above your movie. ———————————— background-opacity = 0.0 background-blur = macos-glass-clear macos-titlebar-style = transparent

Ghostty can be a floating Liquid Glass panel above your movie. ———————————— background-opacity = 0.0 background-blur = macos-glass-clear macos-titlebar-style = transparent

Lex Tang

273,881 görüntüleme • 1 ay önce

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

646,791 görüntüleme • 2 yıl önce

Here's a tip for the new Vertical Streamers! You can source clone your game play and use a composite blur filter to make your backdrop aesthetically pleasing!

Here's a tip for the new Vertical Streamers! You can source clone your game play and use a composite blur filter to make your backdrop aesthetically pleasing!

Miss Dusk ✧Cosmic Enchantress 🌙

64,993 görüntüleme • 4 gün önce

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

190,822 görüntüleme • 2 yıl önce

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨

jhey ʕ•ᴥ•ʔ

155,057 görüntüleme • 1 yıl önce

need more frostin' for your "glass"? no problem .frosted-glass { background: hsl(0 0% 100% / 0.5); backdrop-filter: url(#displace) blur(12px) saturate(1.8); } increase the background alpha + output blur bump the saturation 🧑‍🍳

need more frostin' for your "glass"? no problem .frosted-glass { background: hsl(0 0% 100% / 0.5); backdrop-filter: url(#displace) blur(12px) saturate(1.8); } increase the background alpha + output blur bump the saturation 🧑‍🍳

jhey ʕ•ᴥ•ʔ

148,525 görüntüleme • 11 ay önce

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

269,739 görüntüleme • 2 yıl önce

Making a ✨stacked✨ avatar list using maskImage. Works against any transparent background!! Using Tailwind CSS v4. Recorded and edited using

Alfon

39,397 görüntüleme • 1 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 🤌

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

272,222 görüntüleme • 1 yıl önce

Progressive blurs in CSS using pow()/sin() 🤙 1. Create overlay layers 2. Mask and blur based on index using sin()/pow() .layer { backdrop-filter: blur(calc( sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px )); } Made a sandbox 👇🤓

Progressive blurs in CSS using pow()/sin() 🤙 1. Create overlay layers 2. Mask and blur based on index using sin()/pow() .layer { backdrop-filter: blur(calc( sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px )); } Made a sandbox 👇🤓

jhey ʕ•ᴥ•ʔ

75,476 görüntüleme • 2 yıl önce

Blur background in photo with photoshop

Blur background in photo with photoshop

Photoshop Tricks!

46,911 görüntüleme • 1 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; }}

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

Trick to make your art look softer! :3 -duplicate layer -filter -> glitch -> adjust color shift -Gaussian blur -set to lighten (adjust opacity) (Optional) -filter-> unsharp mask for clearer pic

Trick to make your art look softer! :3 -duplicate layer -filter -> glitch -> adjust color shift -Gaussian blur -set to lighten (adjust opacity) (Optional) -filter-> unsharp mask for clearer pic

☆bwun!★| cms closed

130,669 görüntüleme • 5 ay önce

introducing: blur cycle component for Framer use this component to cycle through different words or phrases with a crazy smoooooth blur transition. comment "BLUR" and I’ll send you the component. :)

introducing: blur cycle component for Framer use this component to cycle through different words or phrases with a crazy smoooooth blur transition. comment "BLUR" and I’ll send you the component. :)

Framer University

10,448 görüntüleme • 1 yıl önce

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙

jhey ʕ•ᴥ•ʔ

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

Herramienta CSS para lograr efecto blur con transparencias en tu página web. También te da el código de Tailwind:

Herramienta CSS para lograr efecto blur con transparencias en tu página web. También te da el código de Tailwind:

Miguel Ángel Durán

23,362 görüntüleme • 1 yıl önce

quick tutorial (?) on blur with soft edges: if you select using lasso, selection pen etc and gaussian blur, the edges of the blur are sharp but if you use an airbrush to mark the areas on a new layer and use it as selection to blur, you can get a soft effect instead

quick tutorial (?) on blur with soft edges: if you select using lasso, selection pen etc and gaussian blur, the edges of the blur are sharp but if you use an airbrush to mark the areas on a new layer and use it as selection to blur, you can get a soft effect instead

tomato🍅

146,420 görüntüleme • 5 ay önce

Playing with React's <ViewTransition> for cross-page animations in Next.js. It's early and experimental, but very cool! Two tips: • Use a poor man's motion blur for movement `filter: blur(0->10->0)` • Use Chrome's animations devtools to debug

Playing with React's <ViewTransition> for cross-page animations in Next.js. It's early and experimental, but very cool! Two tips: • Use a poor man's motion blur for movement `filter: blur(0->10->0)` • Use Chrome's animations devtools to debug

Delba

160,136 görüntüleme • 1 yıl önce