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

Drafting a post about variables and mixins, but each time I write "substitute" I get The Who stuck in my head.

lefractal, to CSS
@lefractal@mstdn.social avatar

box-sizing: border-box;
The only sane way. #CSS

Chris, to CSS
@Chris@mastodon.social avatar

I've got a question!

Using scroll-driven animations, if I wanted to take these shapes, how could I start them in this position (the dark ones) and transition them to the end position (the lightened ones).

Ideally, the shapes are a part of the three columns, and the animation would be sending them to their "real" position.

This seems like it would be somewhat easy if it didn't have to be responsive.

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

Web developers and designers,

What are you hoping to see at WWDC next week??

#css #html #javascript #webdevelopment

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

It was lovely meeting so many of you at #CSSDay! I had a great time. Now off to Spain for CSSWG, and then running a #CSS layout workshop at the end of June.

(use the conference hashtag in allcaps for a 10% discount!)

https://www.youtube.com/watch?v=9EDOzJJdxWA

sonny, (edited ) to CSS
@sonny@floss.social avatar

Checkout @alice update on GTK CSS :gtk: 💅

https://blogs.gnome.org/alicem/2024/06/07/css-happenings/

So many goodies 🤩

• variables
• color()
• color-mix()
• relative colors
• rgb, hsl, linear srgb, hwb, oklab, oklch, ...
• math functions
• accent colors

#GTK #CSS #GNOME

aral, (edited ) to SmallWeb
@aral@mastodon.ar.al avatar

:kitten: Say hello to the new Kitten web site! 🎉

https://kitten.small-web.org

Like Kitten itself, it’s a baby but will be evolving quickly as they approach API version 1 together.

Enjoy!

💕

PS. Of course it’s written in Kitten itself. It doesn’t do anything fancy but here’s the source code if you’re interested: https://codeberg.org/kitten/site

mobileatom, to CSS
@mobileatom@flipboard.com avatar
sarajw, to CSS
@sarajw@front-end.social avatar

Is this... Is this written by AI? CSS mixins are not (yet) a thing... https://www.csssnap.com/working-css-mixins-beginner-guide/ #CSS

j9t, to webdev
@j9t@mas.to avatar

From the archives:

37 Theses on CSS and Web Development:

https://meiert.com/en/blog/37-theses/

kubikpixel, to CrystalsHashtags German
@kubikpixel@chaos.social avatar

»Adobe will Zugriff auf Inhalte von Photoshop-Usern:
Der Konzern hat seine Nutzungsbedingungen aktualisiert. Wer zustimmt, gibt dem Unternehmen das Recht, auf seine Daten zuzugreifen.«

Ich empfehle und nutze schon länger @krita, @GIMP, @inkscape, @Blender und/oder @penpot aber ich bin ja kein Grafikprofi. Abgesehen davon wird selten zugegeben, dass die Fixierung auf einen Hersteller nicht unbedingt professionell ist.

🖌️ https://www.inside-it.ch/adobe-will-zugriff-auf-inhalte-von-photoshop-usern-20240606


kubikpixel,
@kubikpixel@chaos.social avatar

🧵 …ich hatte weiter oben unter anderem auf @penpot hingewiesen. Um deren infos so wie dessen Einsatz zu lernen, folgt doch deren Videos Account im Fediverse auf @peertube und/oder deren Kanäle der einzelnen Sparten. Somit wird es sicherlich auch ein professionell nutzbare Photoshop Alternative für euch bei der Gestaltung von Webseiten.

[ENG]
📺 @penpot_app
📺 https://peertube.kaleidos.net/w/wEMuvYaf1TBt29hi5PkpvV


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

quick note about the reset that i'm using for popover

https://www.mayank.co/notes/popover-default-styles

mobileatom, to CSS
@mobileatom@flipboard.com avatar

Cap Unit: A look at how I solved a design problem with CSS cap unit.

https://ishadeed.com/article/css-cap-unit/?utm_source=flipboard&utm_medium=activitypub

Posted into Responsive Design, UX, UI, and more @responsive

CSSence, to CSS

I limit inline styles to custom properties.

https://cssence.com/2020/css-variables-in-style-attributes/

(Also makes things easier on .)

sarajw, to books
@sarajw@front-end.social avatar

Aaahhh yes @rachelandrew is going into the problem of placing content in CSS grid, and having it confuse the visual order Vs DOM order, tabbing order, screen reader order.

reading-order-items (CSS Display Level 4) might help. It's in drafting stage. Here's hoping 🙏

Not all possibilities included in pictures attached here, see more at https://drafts.csswg.org/css-display-4/#reading-order-items

Rachel in front of screen with text "Can we just opt into the order that flex or grid items are laid out?"
Rachel in front of screen with text: reading-order-items: flex visual Follow the visual layout, taking writing mode and direction into account.

symfonystation, to Symfony
@symfonystation@newsletter.mobileatom.net avatar
lukasoppermann, to CSS

A more technical post on color spaces focused on #css by @argyleink: https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide

However, it manages to explain color spaces very well and show you how to use it in code. Very good if you are working on colors for a #designSystem.

cssbasics, to CSS
@cssbasics@hachyderm.io avatar

Introducing the anchor positioning API: "Position elements relative to each other using the new anchor positioning API." https://developer.chrome.com/blog/anchor-positioning-api

ashleykolodziej, to CSS

Hey y’all, my search engine skills are failing me here. Is anyone out there doing design systems implementation work using microfrontends and module federation? I’m especially curious about the idea of sharing assets like design tokens this way (not just components). Appreciate any examples or takeaways you can share !

davidbisset, to webdev
@davidbisset@phpc.social avatar

"Here’s What We Learned From the First State of #HTML Survey"

https://frontendmasters.com/blog/state-of-html-2023-results-2

"...when asked how they allocated their time between writing HTML/#CSS and JavaScript/TypeScript code, 59% said they spent more than half their time writing #JavaScript – even though the survey was clearly aimed at people interested in HTML."

DavidDarnes, to CSS
@DavidDarnes@mastodon.design avatar

Wonderful, a new analogy to use
https://www.instagram.com/reel/C7hCiMgu6Tp/

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."

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.

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

#WebDev #VendorPrefix #Browsers #CSS #PostCSS #Autoprefixer

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.

#CSS #HTML

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

css,
@css@front-end.social avatar

The previous range slider was good but not good enough to me. Let's upgrade it with some motion!

Now the tooltip will follow your movement to get a more realistic effect. Still 100% CSS magic. No JS! 😎

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

#CSS #HTML

Showing two range sliders with tooltip. Overview from the linked demo

  • All
  • Subscribed
  • Moderated
  • Favorites
  • JUstTest
  • mdbf
  • everett
  • osvaldo12
  • magazineikmin
  • thenastyranch
  • rosin
  • normalnudes
  • Youngstown
  • Durango
  • slotface
  • ngwrru68w68
  • kavyap
  • DreamBathrooms
  • tester
  • InstantRegret
  • ethstaker
  • GTA5RPClips
  • tacticalgear
  • Leos
  • anitta
  • modclub
  • khanakhh
  • cubers
  • cisconetworking
  • megavids
  • provamag3
  • lostlight
  • All magazines