Skip to main content

Items tagged with: newCSS

Search

Items tagged with: newCSS

I couldn't be more excited about the new attr() syntax in CSS! Check out my latest blog post all about this! #css #syntax #newcss #webdev #uidesign #webdesign

blog.gardinerbryant.com/the-ne…


The new CSS attr() syntax

I'm a web developer by trade and I'm extremely passionate about CSS. The last few years have been truly exciting and I can't wait to share the new attr() function syntax with you!
Gardiner Bryant (The Bryant Blog)
#webdev #css #webdesign #uidesign #newcss #syntax

Because someone just hearted a 5 year old @codepen demo codepen.io/thebabydino/pen/GRo… I made using a #Sass function + looping to generate a #CSS 🌈: we don't need *any* Sass for this anymore! 🎉

We can now do it with

background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)

#SCSS #loop #looping #newCSS #rainbow #cssGradient #coding #code #frontend #web #dev #webDev #webDevelopment #hueInterpolation

Comparative look at the old Sass code vs. the new and much simpler plain CSS code, both producing the same result (a nice-looking rainbow) shown before both of them. Old SCSS solution: ``` @function get-rainbow($n: 12, $sat: 90%, $lum: 65%) { $unit: 360/$n; $s-list: (); @for $i from 0 through $n { $s-list: $s-list, hsl($i*$unit, $sat, $lum) } @return $s-list } html { background: linear-gradient(90deg, get-rainbow()) } ``` New plan CSS solution: ``` html { background: linear-gradient(in hsl longer hue 90deg, hsl(0, 95%, 65%) 0 0) } ```
#dev #web #webdev #code #css #coding #frontend #rainbow #loop #webdevelopment #cssgradient #sass #scss #looping #newcss #hueinterpolation @CodePen

⇧