css, to CSS
@css@front-end.social avatar

Using modern CSS features to create a custom range slider with a tooltip. There is no JS to update the values, it's pure CSS with minimal HTML 😎

Powered by Scroll Driven animation, Anchor positioning, @​property and more! 🤩

Demo: https://codepen.io/t_afif/full/JjqNEbZ via :codepen: @codepen

Online Version: https://css-tip.com/range-slider-tooltip/

It's Chrome only for the tooltip but the range slider works fine in all the browsers.

Showing two range slider with a tooltip containing the selected values. From the linked demo.

phryk, to CSS
@phryk@mastodon.social avatar
  • { box-sizing: border-box; }

Probably my most prejudiced hack. Judge if you want, but this one line saves me from an insane amount of alignment issues and overly complicated calc()s.

cory, to webdev
@cory@social.lol avatar

🔗: The Gap via Ahmad Shadeed https://ishadeed.com/article/the-gap/

ErikJonker, to microsoft
@ErikJonker@mastodon.social avatar

Already shared the original comments from this researcher some days ago but now mainstream media seems to have picked up that #Microsoft #Recall is a security disaster in the making.
https://www.theverge.com/2024/6/3/24170305/microsoft-windows-recall-ai-screenshots-security-privacy-issues
#cybersecurity

muzicofiel,

@ErikJonker @GossiTheDog don’t forget to mention the last proposal of of the client side scanning idea. It’s a disaster for your privacy and dangerous because you can be hit by false positives. Try then to prove your innocence. and note it’s not only images but also text. are already claiming they want that data too.

Richr, to webdev
@Richr@mastodon.social avatar

✏️ A modern approach to browser support - writing a new browser support policy @Clearleft

https://clagnut.com/blog/2431

cr0ybot, to CSS
@cr0ybot@mastodon.social avatar

We lost so much when dropping Sass for PostCSS.

CSS built-in nesting is awkward, static variables can be useful actually, and what's the point of dropping a consistent API with good DX if we're still transforming our stylesheets anyways?

Chaining together interoperable PostCSS modules to accomplish half of what Sass can do is nearly impossible.

antaresphdev, to webdev Tagalog
@antaresphdev@mas.to avatar

Nagbibigay ang Web Platform Baseline ng malinaw na info tungkol sa mga bagong web platform features na puwede nang magamit sa mga production sites.

Tingnan ang details nito sa website ng Antares Programming: https://antaresph.dev/resources/baseline/

BryceWrayTX, to webdev
@BryceWrayTX@fosstodon.org avatar

After reading this, checked my existing styling as processed through autoprefixer, found the vendor prefixes that had been added, and manually added them to my styling — so it now doesn’t require any additional tools for cross-browser compatibility.

https://weser.io/blog/vendor-prefixes-in-2024

davidbisset, to webdev
@davidbisset@phpc.social avatar

"In Praise Of The Basics"

https://www.smashingmagazine.com/2024/05/in-praise-of-the-basics/

"Long live the basics! Long live the “a-ha!” moments that help us all fall in love with the World Wide Web."

scoonch, to photoshop French
@scoonch@mamot.fr avatar

Dev Web fullstack, après un enchaînement de CDD, je suis libre à partir d'aujourd'hui.

CDI distanciel de préférence sinon je m'adapte, je suis à Paris.

Compétences en +:
Maquettiste ,
Monteur vidéo ,
Habillage/Animation
Régie/Vidging/Mapping:

CV en mp.



















davidbisset, to CSS
@davidbisset@phpc.social avatar
  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • provamag3
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • anitta
  • Leos
  • tester
  • JUstTest
  • All magazines