#effects - 101010.pl

0 posts0 participants0 posts today

Frontend Dogma @frontenddogma@mas.to

Liquid Glass on the Web, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/liquid-glass-on-the-web/

frontendmasters.comLiquid Glass on the Web – Frontend Masters BlogIt's a complicated look! There may or may not be blurring, light refracts in tricky ways, the highlights are quite bright, and you've got to be very careful about text contrast accessibility.

#design #effects #css

Frontend Dogma @frontenddogma@mas.to

Scroll-Driven Sticky Heading, by @amitsheen.bsky.social (@csstricks):

https://css-tricks.com/scroll-driven-sticky-heading/

CSS-Tricks · Jul 11Scroll-Driven Sticky Heading | CSS-TricksI was playing around with scroll-driven animations, just searching for all sorts of random things you could do. That’s when I came up with the idea to animate main headings and, using scroll-driven animations, change the headings based on the user’s scroll position.

#headings #css #animations

jnpn @jnpn@mastodon.social

https://flix.dev/

effect systems are popping up

flix.devFlix | The Flix Programming Language

#plt #fp #effects

Frontend Dogma @frontenddogma@mas.to

View Transition List Reordering (With a Kick Flip), by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/view-transition-list-reordering-with-a-kick-flip/

frontendmasters.comView Transition List Reordering (with a Kick Flip) – Frontend Masters BlogIt's pretty straightforward to animate list items into new positions, but there is a few tricks when the specific one you've chosen to move needs a *different* transition.

#css #viewtransitions #animations

Frontend Dogma @frontenddogma@mas.to

Liquid Glass, Fragile UX, and Why I Wanted 2 Weeks Before Writing About It, by @uxdesigncc:

https://archive.fo/1Crnw

#design #effects #ux

Frontend Dogma @frontenddogma@mas.to

Creating the “Moving Highlight” Navigation Bar With JavaScript and CSS, by @smashingmag:

https://www.smashingmagazine.com/2025/06/creating-moving-highlight-navigation-bar-javascript-css/

Smashing Magazine · Jun 11Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS — Smashing MagazineIn this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the `getBoundingClientRect` method to explicitly animate the border between navigation bar items when they are clicked. The second approach achieves the same functionality using the new View Transition API.

#navigation #effects #javascript

Frontend Dogma @frontenddogma@mas.to

Grainy Gradients, by @anatudor (@frontendmasters.com):

https://frontendmasters.com/blog/grainy-gradients/

frontendmasters.comGrainy Gradients – Frontend Masters BlogThis is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.

#gradients #effects #css

Adrian Segar @ASegar@mastodon.social

We spend a lot of time talking about problems, effects, and causes. Sadly, we fixate on problems' effects rather than focus on their causes.

https://www.conferencesthatwork.com/index.php/soapbox/2024/01/problems-effects-causes

#ClimateEmergency #COVID #wars

Frontend Dogma @frontenddogma@mas.to

CSS Spotlight Effect, by @amit_sheen (@frontendmasters.com):

https://frontendmasters.com/blog/css-spotlight-effect/

frontendmasters.comCSS Spotlight Effect – Frontend Masters BlogWe can pass the mouse position from JavaScript to CSS and use it to make unusual and playful effects.

Adrian Segar @ASegar@mastodon.social

We spend a lot of time talking about problems, effects, and causes. Sadly, we fixate on problems' effects rather than focus on their causes.

https://www.conferencesthatwork.com/index.php/soapbox/2024/01/problems-effects-causes

#ClimateEmergency #COVID #wars

Greg Cocks @GregCocks@techhub.social

The March 1940 Superstorm - Geoelectromagnetic Hazards And Impacts On American Communication And Power Systems
--
https://doi.org/10.1029/2022SW003379 <-- shared paper
--
#spaceweather #geomagnetic #history #historic #1940 #USA #measurement #spatialanalysis #geomagnetism #risk #hazard #effects #ICME #CME #coronalmassejection #interference #electricity #electrical #utilities #infrastructure #impacts #communications #telecommunications #geoelectromagnetic #solarwind #magneticstorm #humanimpacts #geoelectric #geology #soil #operations #transmission #power #energy #energysupply #naturalhazard@USGS | @CIRES

Brian Dear @brianstorms@mastodon.social

Now THIS is what makes the internet great. I think I'm drunk on music gear having read this. Awesome job, https://mastodon.social/@marcedwards!!!

https://bjango.com/articles/daftpunkvocaleffects/

#music #daftpunk #electronic

Frontend Dogma @frontenddogma@mas.to

Using CSS “backdrop-filter” for UI Effects, by @preethisam.bsky.social (@csstricks):

https://css-tricks.com/using-css-backdrop-filter-for-ui-effects/

CSS-Tricks · Apr 16Using CSS backdrop-filter for UI Effects | CSS-TricksTips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

#css #filters #effects

Frontend Dogma @frontenddogma@mas.to

Overengineered Anchor Links, by (not found on Mastodon or Bluesky):

https://thirty-five.com/overengineered-anchoring

35®Overengineered anchor links - 35®Learn about the 'overengineered anchoring' pattern, a technique to improve the user experience of scrollable content.

#links #effects #techniques

Frontend Dogma @frontenddogma@mas.to

CSS Bursts With Conic Gradients, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/css-bursts-with-conic-gradients/

frontendmasters.comCSS Bursts with Conic Gradients – Frontend Masters BlogUsing hard color stops with `repeating-conic-gradient()` and the double-stop syntax, we can pretty easily create a burst background. Then get fancier.

#css #gradients #examples

Greg Cocks @GregCocks@techhub.social

A Predictive Model For Household Displacement Duration After Disasters
--
https://doi.org/10.1111/risa.17710 <-- shared paper
--
https://nicolepaul.eu.pythonanywhere.com/ <-- interactive web interface
--
#GIS #spatial #mapping #HouseholdPulseSurvey #risk #hazard #damage #loss #spatialanalysis #model #modeling #disaster #naturaldisaster #storm #hurricane #flood #fire #cost #economics #community #publicsafety #effects #predictivemodel #AI #machinelearning #riskanalysis #classifactiontree #socioeconomics #casestudy #mitigation #preparedness #displacement #population

Continued thread

Sam at BLAG @blag@typo.social

BLAG Meet: Inside Issue 06 is free, online, and features five hours of talks, interviews, studio visits, and demonstrations: https://bl.ag/meet.

We kick off with @matratype and her quest to learn and devise the language to describe letterforms on India’s vibrant signage. (See previous post here: https://typo.social/@matratype/114042322483513686.)

I'm excited to see where these investigations have led to, and how they're being incorporated into the India Street Lettering project.

#SignPainting #Lettering #Effects

Frontend Dogma @frontenddogma@mas.to

Holographic Masks, by @hejchristian.com:

https://codepen.io/HejChristian/pen/YPzLbYX

codepen.ioCSS Holographic MasksExperimenting with some CSS holographic effects, inspired by this guide from Robb Owen: https://robbowen.digital/wrote-about/css-blend-mode-shaders/...

#codepens #css #gradients

Frontend Dogma @frontenddogma@mas.to

Expanding CSS Shadow Effects, by @frontendmasters.com:

https://frontendmasters.com/blog/expanding-css-shadow-effects/

frontendmasters.comExpanding CSS Shadow Effects – Frontend Masters BlogShadows don't have to be used for... shadows. Inset shadows can layer over backgrounds and because they are animatable, it's just another tool for drawing what we want to the page.

#css #shadows #effects

Frontend Dogma @frontenddogma@mas.to

Cover Flow With Modern CSS: Scroll-Driven Animations in Action, by @addyosmani:

https://addyosmani.com/blog/coverflow/

addyosmani.comCover Flow with Modern CSS: Scroll-Driven Animations in ActionDive into implementing the iconic Cover Flow UI pattern using modern CSS scroll-driven animations and alternative ways of implementing Cover Flow, such as vi...

#css #animations #transforms

Drag & drop to upload