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

#tinyCSStip You may have seen some of my demos using this on CodePen.IO already. Pure CSS halftone effect in 3 declarations: ✨ background layering a pattern and a map ✨ blend mode multiplication of the two layers ✨ contrast bump up to push all greys to either black or white

Ana Tudor 🐯 (find me on Bluesky/ Mastodon)

14,931 subscribers

27,203 görüntüleme • 2 yıl önce •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 Yorum

Ana Tudor 🐯🖤🌻 profil fotoğrafı

Ana Tudor 🐯🖤🌻2 yıl önce

I first came up with the idea and gave a talk on it almost half a decade ago. And then I refined the topic a bit for another talk which used these slides you may have seen me share before.

Ana Tudor 🐯🖤🌻 profil fotoğrafı

Ana Tudor 🐯🖤🌻2 yıl önce

Pattern part may be anything small & repeating. We may also use thin blurry stripes - linear-gradient, rays - repeating-conic-gradient, rings - repeating-radial-gradient Map part may also be another type of gradient or even a .jpg

Ana Tudor 🐯🖤🌻 profil fotoğrafı

Ana Tudor 🐯🖤🌻2 yıl önce

A `linear-gradient()` pattern coupled with a `linear-gradient()` map is what's behind this retro wave demo And animating the map's `background-position` is how we get this progressive close/ open blinds effect

Ana Tudor 🐯🖤🌻 profil fotoğrafı

Ana Tudor 🐯🖤🌻2 yıl önce

The .jpg image map case is... special. Most of my demos use extra pseudos/ elements and `mix-blend-mode` for compatibility reasons. But Safari, only browser to support `filter()` (*not* `filter`!) allows for the no extra pseudo/ element #halftone solution

Ana Tudor 🐯🖤🌻 profil fotoğrafı

Ana Tudor 🐯🖤🌻2 yıl önce

Animating a custom property* that the gradients used for the effect depend on can also produce cool effects, like in - also an entry for this week's #CodePenChallenge😎 And a solution to *not yet in Firefox stable, only in Nightly

Ana Tudor 🐯🖤🌻 profil fotoğrafı

Ana Tudor 🐯🖤🌻2 yıl önce

A couple more such halftone patterns, both of which have a video of me coding them from scratch. ✨ ✨ #CSS

Ana Tudor 🐯🖤🌻 profil fotoğrafı

Ana Tudor 🐯🖤🌻2 yıl önce

And here are two more demos showcasing animated halftone patterns, while the elements they're on either fill the full viewport or are positioned in 3D. ✨ ✨ #CSS

Ana Tudor 🐯🖤🌻 profil fotoğrafı

Ana Tudor 🐯🖤🌻2 yıl önce

Finally, some pure #CSS, single element halftone patterned cards: ✨ ✨

Ana Tudor 🐯🖤🌻 profil fotoğrafı

Ana Tudor 🐯🖤🌻2 yıl önce

3 more such animated pure #CSS, single element animated halftone patterns on @CodePen: ✨ ✨ ✨

🎗️ daniel haim profil fotoğrafı

🎗️ daniel haim2 yıl önce

@CodePen 🤯

Benzer Videolar

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

437,487 görüntüleme • 2 yıl önce

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,795 görüntüleme • 2 yıl önce

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

413,657 görüntüleme • 2 yıl önce

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

210,440 görüntüleme • 2 yıl önce

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

70,730 görüntüleme • 2 yıl ö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 ʕ•ᴥ•ʔ

647,074 görüntüleme • 2 yıl önce

grok 3 prompt: I’d like to make a p5.js simulation of a sphere made up of ASCII numbers, rotating. The closest numbers should be pure white, and the farthest ones should fade to gray, on a black background

grok 3 prompt: I’d like to make a p5.js simulation of a sphere made up of ASCII numbers, rotating. The closest numbers should be pure white, and the farthest ones should fade to gray, on a black background

AK

1,325,652 görüntüleme • 1 yıl önce

I🔊 SOUND ON!! 🔊 Drop a 👑 (or a bunch of 👑) in the comments and you may be sent a bag of Funyuns to glitter-ize as well as a decorative ✨princess bag✨

I🔊 SOUND ON!! 🔊 Drop a 👑 (or a bunch of 👑) in the comments and you may be sent a bag of Funyuns to glitter-ize as well as a decorative ✨princess bag✨

Funyuns

91,502 görüntüleme • 1 yıl önce

Although all the prerendered cutscenes in Parappa 1 stay the same regardless of how well you do, there are two exceptions. If you finish in cool mode on Stage 2 or 3, Parappa doesn't mess up his driver's license photo and buys a brand new red sports car instead of a silver one✨

Foxy Grandpa - ✨🔜 Sparkle On! ✨

55,234 görüntüleme • 4 ay önce

Never seen a black Karen go up to a white person and ask for that person I.D. Never have seen a black middle-class, middle-aged black person who is obnoxious and entitled in her behavior to ask a white person place of living. Or a black Karen calling police on whites to lie

Never seen a black Karen go up to a white person and ask for that person I.D. Never have seen a black middle-class, middle-aged black person who is obnoxious and entitled in her behavior to ask a white person place of living. Or a black Karen calling police on whites to lie

kevin blue

22,466 görüntüleme • 10 ay önce

CSS Tip! ✨ You can lean into form control state and layered backgrounds to create input status strokes 😎 input:valid { --valid: 1; } input { background: var(--bg) padding-box, ..., var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 / 100% 100% border-box; } The trick is to layer up backgrounds using background-clip to leave a border space 🤏 Applying a transparent border gives you the space for the layered background to transition in 🎞️ Then you can use custom properties to dictate the background-position of each layer. By default, the valid and invalid layers are positioned outside the bounding box. But when one of those states is active, the background layer transitions in to 0 0. To respect people's animations preferences, we can wrap that transition in a media query 🤙 @media (prefers-reduced-motion: no-preference) { input { transition: background-position: 0.5s; } } Was revisiting techniques around :has and :user-valid and it dawned that you could do it like this too! Hope you find it useful! p.s Don't rely on color to communicate form status. It's a cool trick though for an added touch ✨ CodePen.IO link below! 👇

CSS Tip! ✨ You can lean into form control state and layered backgrounds to create input status strokes 😎 input:valid { --valid: 1; } input { background: var(--bg) padding-box, ..., var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 / 100% 100% border-box; } The trick is to layer up backgrounds using background-clip to leave a border space 🤏 Applying a transparent border gives you the space for the layered background to transition in 🎞️ Then you can use custom properties to dictate the background-position of each layer. By default, the valid and invalid layers are positioned outside the bounding box. But when one of those states is active, the background layer transitions in to 0 0. To respect people's animations preferences, we can wrap that transition in a media query 🤙 @media (prefers-reduced-motion: no-preference) { input { transition: background-position: 0.5s; } } Was revisiting techniques around :has and :user-valid and it dawned that you could do it like this too! Hope you find it useful! p.s Don't rely on color to communicate form status. It's a cool trick though for an added touch ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

239,569 görüntüleme • 2 yıl önce

Some amazing news to share + pls RT 😭💛✨ aiaiai.audio and I are proud to announce the opening of our free to use music production studio in London. ✨🚀 If you are a Black and queer artist in need of studio space please apply here: Love you 💛✨✨

Some amazing news to share + pls RT 😭💛✨ aiaiai.audio and I are proud to announce the opening of our free to use music production studio in London. ✨🚀 If you are a Black and queer artist in need of studio space please apply here: Love you 💛✨✨

SHERELLE 🌐

131,372 görüntüleme • 3 yıl önce

here's a quick write-up of a way I'm using OpenAI's embeddings that I haven't seen before. For my writing app, I want to highlight each sentence on any scale: ✨ happy — sad ✨ concrete — abstract ✨ + anything! but had to get creative to do this cheaply, quickly, & robustly

here's a quick write-up of a way I'm using OpenAI's embeddings that I haven't seen before. For my writing app, I want to highlight each sentence on any scale: ✨ happy — sad ✨ concrete — abstract ✨ + anything! but had to get creative to do this cheaply, quickly, & robustly

Amelia Wattenberger 🪷

93,716 görüntüleme • 2 yıl önce

✨🛐EVERY CROSS REPRESENTS A WHITE FARMER KILLED IN SOUTH AFRICA. 🛐Try to watch in its entirety! ✨✨✨✨✨✨✨✨✨✨ 🛐Thank you President Trump for bringing WHITE SOUTH AFRICAN REFUGEES FLEEING… real danger into the US 🛐ALL OF OUR MEDIA HID THIS FROM US ..

✨🛐EVERY CROSS REPRESENTS A WHITE FARMER KILLED IN SOUTH AFRICA. 🛐Try to watch in its entirety! ✨✨✨✨✨✨✨✨✨✨ 🛐Thank you President Trump for bringing WHITE SOUTH AFRICAN REFUGEES FLEEING… real danger into the US 🛐ALL OF OUR MEDIA HID THIS FROM US ..

Mischief 🌿🌹🌿🌹🌿🌹🌿🌹🌿

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

I straight up have been playing almost 2 hours of CoD Black Ops 3 Zombies for the first time on just a single map solo so far, and I can see why this zombies mode is highly regarded as peak CoD Zombies. What a contrast going from the dull campaign to this fun & replayable dish

I straight up have been playing almost 2 hours of CoD Black Ops 3 Zombies for the first time on just a single map solo so far, and I can see why this zombies mode is highly regarded as peak CoD Zombies. What a contrast going from the dull campaign to this fun & replayable dish

Shamaboy

107,015 görüntüleme • 7 ay önce

"Echoes of You" - full version of my animation from this year's Furality Communtiy Showcase! Super humbled to have seen my video in between all the other insanely high quality submissions 💙✨

"Echoes of You" - full version of my animation from this year's Furality Communtiy Showcase! Super humbled to have seen my video in between all the other insanely high quality submissions 💙✨

Yani

47,785 görüntüleme • 1 yıl önce

Did you know that in Blender you can easily make vent grilles in edit mode without any modifiers using the 'Wireframe' operator? ✨ 1. Select a face 2. Right click -> Subdivide, and increase the number of subdivisions 3. Press Ctrl+F,W for the wireframe operator! To make a diagonal pattern, Right click -> Unsubdivide and set Iterations to 1! #b3d

Did you know that in Blender you can easily make vent grilles in edit mode without any modifiers using the 'Wireframe' operator? ✨ 1. Select a face 2. Right click -> Subdivide, and increase the number of subdivisions 3. Press Ctrl+F,W for the wireframe operator! To make a diagonal pattern, Right click -> Unsubdivide and set Iterations to 1! #b3d

passivestar

200,637 görüntüleme • 3 yıl önce

Dark mode prevents myopia (nearsightedness). Dr. Alexander Wunsch, German physician studying the effects of light on health for 30+ years: "Whenever the opportunity arises to read text white on black, we should do so." Here's the mechanism: Your retina has two cell systems — ON cells and OFF cells. Black letters on white background activate the OFF cell system. Chronic activation of the OFF cell system promotes the development of myopia. Dark mode — white text on black background — activates the ON cell system instead. This is the preventive mechanism. There is also a significant difference in total light load: > Standard display (white background, black text): 95% of screen light is emitted to display the page. Only 5% is the actual text. > Dark mode (black background, white text): only 5% of total light is needed to convey the same information. Less light from the screen. The correct cell system is activated. Lower myopia risk. The first computer screens were dark mode by default — black background, green or amber text. That was optimal. The shift to white backgrounds was aesthetic, not biological. University of Tübingen, 2018 — researchers developed a mathematical model analyzing image content for myopia risk potential. Their finding? Natural outdoor scenes have a neutral effect on the eye. Conventional text on white background promotes myopia development. Dark mode presentation does not. They then tested this in subjects. Black letters on white background produced measurable changes in the eye that promote myopia. In Europe, half of all students are already nearsighted. Myopia is the most common visual impairment among young people. The more a child reads — the higher the risk. The mechanisms are not yet fully understood in all details. But the consequences are clear. Wunsch: "Dark mode is recommended wherever it does not impair the workflow during screen work." "In the evening and at night, this should be the mandatory setting in order to keep the disruption of the internal clock and the possible damage to the retina as low as possible." Wunsch's advice to parents: "If children discover the joy of reading and develop into bookworms, it is certainly a good investment to provide them with an e-book reader that enables text display on a dark background." The original screen setting was black background. We changed it for aesthetics. The biology didn't change with it.

Dark mode prevents myopia (nearsightedness). Dr. Alexander Wunsch, German physician studying the effects of light on health for 30+ years: "Whenever the opportunity arises to read text white on black, we should do so." Here's the mechanism: Your retina has two cell systems — ON cells and OFF cells. Black letters on white background activate the OFF cell system. Chronic activation of the OFF cell system promotes the development of myopia. Dark mode — white text on black background — activates the ON cell system instead. This is the preventive mechanism. There is also a significant difference in total light load: > Standard display (white background, black text): 95% of screen light is emitted to display the page. Only 5% is the actual text. > Dark mode (black background, white text): only 5% of total light is needed to convey the same information. Less light from the screen. The correct cell system is activated. Lower myopia risk. The first computer screens were dark mode by default — black background, green or amber text. That was optimal. The shift to white backgrounds was aesthetic, not biological. University of Tübingen, 2018 — researchers developed a mathematical model analyzing image content for myopia risk potential. Their finding? Natural outdoor scenes have a neutral effect on the eye. Conventional text on white background promotes myopia development. Dark mode presentation does not. They then tested this in subjects. Black letters on white background produced measurable changes in the eye that promote myopia. In Europe, half of all students are already nearsighted. Myopia is the most common visual impairment among young people. The more a child reads — the higher the risk. The mechanisms are not yet fully understood in all details. But the consequences are clear. Wunsch: "Dark mode is recommended wherever it does not impair the workflow during screen work." "In the evening and at night, this should be the mandatory setting in order to keep the disruption of the internal clock and the possible damage to the retina as low as possible." Wunsch's advice to parents: "If children discover the joy of reading and develop into bookworms, it is certainly a good investment to provide them with an e-book reader that enables text display on a dark background." The original screen setting was black background. We changed it for aesthetics. The biology didn't change with it.

no.mind

56,281 görüntüleme • 2 ay önce

🌌Create multi-layered Membership Cards or collections with Galaxis. 🌌How do you create amazing cards with 3 layers? Here’s a quick guide: 🖼️Design 3 unique layers ✨Layers with higher numbers are placed on top of the layers with lower numbers. ☝️Layer 1 will be the background, ☝️Layer 2 will be in the middle, and ☝️Layer 3 will be on the top of the card. ☝️Remember: use a transparent background when creating layer 2 and layer 3 files. 🌌Launch your multi-layered Membership Card masterpiece on Galaxis.

🌌Create multi-layered Membership Cards or collections with Galaxis. 🌌How do you create amazing cards with 3 layers? Here’s a quick guide: 🖼️Design 3 unique layers ✨Layers with higher numbers are placed on top of the layers with lower numbers. ☝️Layer 1 will be the background, ☝️Layer 2 will be in the middle, and ☝️Layer 3 will be on the top of the card. ☝️Remember: use a transparent background when creating layer 2 and layer 3 files. 🌌Launch your multi-layered Membership Card masterpiece on Galaxis.

Galaxis

26,575 görüntüleme • 2 yıl önce