#cssfunction — Public Fediverse posts

#Development #Introductions
Single color image · What to expect from the CSS image() function https://ilo.im/16dvet

_____
#ModernCSS #CssFunction #Colors #Images #Backgrounds #Chrome #Browser #WebDev #Frontend #CSS

#Development #Introductions
Single color image · What to expect from the CSS image() function https://ilo.im/16dvet

_____
#ModernCSS #CssFunction #Colors #Images #Backgrounds #Chrome #Browser #WebDev #Frontend #CSS

#Development #Guides
The scope of CSS @function · “CSS functions have a fascinating superpower with scope.” https://ilo.im/16dth7

_____
#ModernCSS #CssFunction #WebDev #Frontend #DOM #CSS #JavaScript

#Development #Guides
The scope of CSS @function · “CSS functions have a fascinating superpower with scope.” https://ilo.im/16dth7

_____
#ModernCSS #CssFunction #WebDev #Frontend #DOM #CSS #JavaScript

Does anyone know what's the status of `random()` with Chrome/ Firefox?

I can test it out using Epiphany Technology Preview on Linux, but I have no idea about when to expect to see it elsewhere or where I can find that info. It has no MDN page, no CanIUse page... can anyone help me out here?

#CSS #random #cssFunction #coding #web #dev #webDevelopment #webDev #code #frontend

Does anyone know what's the status of `random()` with Chrome/ Firefox?

I can test it out using Epiphany Technology Preview on Linux, but I have no idea about when to expect to see it elsewhere or where I can find that info. It has no MDN page, no CanIUse page... can anyone help me out here?

#CSS #random #cssFunction #coding #web #dev #webDevelopment #webDev #code #frontend

I have a new article out on Frontend Masters: Non-Square Image Blur Extensions https://frontendmasters.com/blog/non-square-image-blur-extensions/

It details the how behind creating the base effect with a single `img` element and only 4 #CSS declarations, then... well, check the article, I promise you'll learn something new!

#cssGrid #cssLayout #cssFunction #filter #cssFilter #SVG #svgFilter #code #coding #web #dev #webDevelopment #webDev #frontend #containerQueries

I have a new article out on Frontend Masters: Non-Square Image Blur Extensions https://frontendmasters.com/blog/non-square-image-blur-extensions/

It details the how behind creating the base effect with a single `img` element and only 4 #CSS declarations, then... well, check the article, I promise you'll learn something new!

#cssGrid #cssLayout #cssFunction #filter #cssFilter #SVG #svgFilter #code #coding #web #dev #webDevelopment #webDev #frontend #containerQueries

#Development #Misconceptions
CSS light-dark() vs. prefers-color-scheme · “light-dark() isn’t just a shorter ‘prefers-color-scheme’ query.” https://ilo.im/168oi0

_____
#CssFunction #MediaQuery #LightMode #DarkMode #Browser #WebDev #Frontend #CSS

#Development #Misconceptions
CSS light-dark() vs. prefers-color-scheme · “light-dark() isn’t just a shorter ‘prefers-color-scheme’ query.” https://ilo.im/168oi0

_____
#CssFunction #MediaQuery #LightMode #DarkMode #Browser #WebDev #Frontend #CSS

#Development #Introductions
Rolling the dice with CSS random() · Native random numbers are coming to CSS https://ilo.im/166bac

_____
#ModernCSS #Randomness #CssFunction #CustomProperties #Safari #Browser #WebDev #Frontend #CSS

#Development #Introductions
Rolling the dice with CSS random() · Native random numbers are coming to CSS https://ilo.im/166bac

_____
#ModernCSS #Randomness #CssFunction #CustomProperties #Safari #Browser #WebDev #Frontend #CSS

#Development #Previews
A more powerful CSS attr() function · What to expect from the upcoming enhancement https://ilo.im/16166k

_____
#ModernCSS #CssFunction #HtmlAttribute #Browser #WebDev #Frontend #HTML #CSS

#Development #Previews
A more powerful CSS attr() function · What to expect from the upcoming enhancement https://ilo.im/16166k

_____
#ModernCSS #CssFunction #HtmlAttribute #Browser #WebDev #Frontend #HTML #CSS

#tinyCSStip (or gotcha) If you want to get the correct result when using smth like
atan2(var(--y), var(--x))
with --y and --x having different units...

then you need to register --x and --y as length values!

Or how I lost > 30min trying to figure out why my angle was 4° off...

#maths #mathematics #cssMaths #trigonometry #gotcha #cssGotcha #code #coding #frontend #webDev #web #dev #webDevelopment #houdini #cssVariables #customProperties #cssFunction

#tinyCSStip (or gotcha) If you want to get the correct result when using smth like
atan2(var(--y), var(--x))
with --y and --x having different units...

then you need to register --x and --y as length values!

Or how I lost > 30min trying to figure out why my angle was 4° off...

#maths #mathematics #cssMaths #trigonometry #gotcha #cssGotcha #code #coding #frontend #webDev #web #dev #webDevelopment #houdini #cssVariables #customProperties #cssFunction