#CssFunctions

@websitestrategist.bsky.social

2 months ago

Custom CSS Functions: Write Your Own Custom Functions in Pure CSS CSS now lets you write actual functions. Not the built-in ones like calc() or clamp() I'm talking about your own custom functions that take…

Custom CSS Functions: Write Your Own Custom Functions in Pure CSS

Welcome to the future. Your stylesheets are about to get a lot smarter.

#FrontendDevelopment #WebDevelopment #CSS #HTML #CSSFunctions

pixicstudio.medium.com/custom-css-f...

1 1 0 0

Inautilo

@inautilo.bsky.social

3 months ago

Thoughts on Native CSS Mixins There are no browser implementations of mixins yet, nor a fleshed out spec. So perhaps now is the best time to try to understand and opine.

#Development #Explorations
Thoughts on native CSS mixins · What they might mean for front-end developers ilo.im/1693wl by Chris Coyier

_____
#CssMixins #CssFunctions #CustomProperties #Sass #W3C #WebStandards #Browser #WebDev #Frontend #CSS

2 0 0 0

Jay

@jay52-tx.bsky.social

4 months ago

CSS :is() :where() the Magic Happens · Matthias Ott Matthias Ott is an independent user experience designer and web design engineer from Stuttgart, Germany. He also teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design.

CSS :is() :where() the Magic Happens — Revisits these two pseudo-class functions, looking at some use-cases, and how they can now be combined with :has() || #CSS #CSSFunctions #WebDev #FrontendDev bit.ly/4qFtxQ3

1 0 0 0

Fahim khan

@morfes.bsky.social

7 months ago

/* Semi-transparent color using a custom function */ @function --opacity(--color, --opacity) { result: rgb(from var(--color) r g b / var(--opacity)); } /* CSS negation function */ @function --negate(--value) { result: calc(-1 * var(--value)); } .card { --color: rgb(108, 20, 20); background-color: --opacity(var(--color), 80%); height: 100px; width: 100px; --gap: 1em; padding: --negate(var(--gap)); }

🚀 CSS @function lets you write custom functions for dynamic, reusable styles—like variables, but parameterized! Supported in Chrome 139+ only. It’s a game changer for design systems and utility CSS! #css #frontend #webdev #cssfunctions
Read more:
w3.org/TR/css-mixins-1/
una.im/5-css-functions/

0 0 1 0

Usman

@websitestrategist.bsky.social

11 months ago

Every CSS Function You Need – With Practical Examples Here’s a complete cheat sheet of CSS functions, neatly organized by category for quick reference....

Save time and code smarter with this CSS functions cheat sheet!

#WebDev #FrontendDevelopment #CSSFunctions #CSS

dev.to/web_dev-usma...

1 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Orange text on yellow background: CSS Olympic Rings

🟠🟡 CSS Olympic Rings
by Amit Sheen
@amit_sheen
#css #webdev #cssAnimation #cssFunctions #relativecolor
css-tricks.com/css-olympic-...

0 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

White text: What's new in color & color functions Gradient text below: CSS Podcast. On left bottom, Una Kravets. On bottom right, Adam Argyle, Bith sat and laghing. Behind them a cyan glow on a blue background with colored geometric shapes.

🎙️ CSS Podcast Ep 82:
What's new in color functions
@Una and @argyleink provide a color update, covering changes to the specs and new functions.
#color #css #webdev #cssFunctions #podcast
youtu.be/H3bEyrv0RmU?...