Innhold om CSS
Totalt 61 innlegg
Side 3 av 5
Lær deg CSS, ikke Tailwind
Teamet mitt startet nylig å skrive CSS. Vi er ferdig med superspråk som kompilerer ned til CSS. Vi bruker ikke noen rammeverk, men skriver gode, gamle CSS-regler. Det er på tide å forenkle hvordan vi tenker på styling.
Teamet mitt startet nylig å skrive CSS. Vi er ferdig med superspråk som kompilerer ned til CSS. Vi bruker ikke noen rammeverk, men skriver gode, gamle CSS-regler. Det er på tide å forenkle hvordan vi tenker på styling.
Gjør nettsiden din levende med CSS-transitions
Nettsider med animasjon får litt personlighet, og det skal lite til for å oppnå det. Her er en guide til bruk av CSS-transitions.
Nettsider med animasjon får litt personlighet, og det skal lite til for å oppnå det. Her er en guide til bruk av CSS-transitions.
Contrast is boring—can't someone else do it?
Having sufficient contrast in your website is one of those things which are very important but still very boring to fix—especially if your site uses multiple background colours. Well, be bored no more! color-contrast() is (hopefully soon) here to save us! Let's learn what it does.
Having sufficient contrast in your website is one of those things which are very important but still very boring to fix—especially if your site uses multiple background colours. Well, be bored no more! color-contrast() is (hopefully soon) here to save us! Let's learn what it does.
:has() is here and you probably need it in your CSS
So, you've heard talk of a so-called :has() selector, but don't really know what it is. Or maybe you just clicked the article hoping to learn something new. Well, this article is for you! Now that :has() is supported by almost all major browsers (except Firefox where you need a feature flag …), it is time to learn what it is, why you should care and how you use it.
So, you've heard talk of a so-called :has() selector, but don't really know what it is. Or maybe you just clicked the article hoping to learn something new. Well, this article is for you! Now that :has() is supported by almost all major browsers (except Firefox where you need a feature flag …), it is time to learn what it is, why you should care and how you use it.
How to time your CSS animations in JavaScript
Why I love Style Dictionary, and why you should too
Style Dictionary is one of the very best tools I've ever encountered. It's powerful, fun, and great for managing your design tokens!
Style Dictionary is one of the very best tools I've ever encountered. It's powerful, fun, and great for managing your design tokens!
CSS Container Queries
Web har alltid vært en plattform hvor innholdet må tilpasse seg forskjellige skjermer og skjermteknologier. Media queries har gjort det mulig for oss å tilpasse designet vårt til denne hverdagen, men i en hverdag hvor vi skriver flere og flere komponenter strekker ikke media queries alltid til. Møt CSS container queries, et nytt standard-forslag som endelig skal la oss kode komponenter uavhengig av resten av designet!
Web har alltid vært en plattform hvor innholdet må tilpasse seg forskjellige skjermer og skjermteknologier. Media queries har gjort det mulig for oss å tilpasse designet vårt til denne hverdagen, men i en hverdag hvor vi skriver flere og flere komponenter strekker ikke media queries alltid til. Møt CSS container queries, et nytt standard-forslag som endelig skal la oss kode komponenter uavhengig av resten av designet!
Implement typography how the designer wants it
Pseudo classes? More like pseudo awesome
BEM - Naming made a little easier
The field of computer science is moving forward at an extraordinary pace. The phone in your pocket is becoming much more advanced thanks to these feats of engineering. The greatest challenge that everyone faces, however, is coming up with names in programming. Despite the massive accomplishments in AI and machine learning, the most difficult part of these tasks are, I believe, coming up with good names. BEM does not solve this issue, but it makes it easier by many degrees, and with the addition of a CSS preprocessor, it can make your CSS-code more readable and hierarchically sound than before.
The field of computer science is moving forward at an extraordinary pace. The phone in your pocket is becoming much more advanced thanks to these feats of engineering. The greatest challenge that everyone faces, however, is coming up with names in programming. Despite the massive accomplishments in AI and machine learning, the most difficult part of these tasks are, I believe, coming up with good names. BEM does not solve this issue, but it makes it easier by many degrees, and with the addition of a CSS preprocessor, it can make your CSS-code more readable and hierarchically sound than before.
Wrap it up! – Creating a CSS game
Santa needs your help. The usually ever so helpful elves have decided to play a trick on him, and have made all the toys run around, resisting getting wrapped in the lovely Christmas wrapping paper he just spent all day picking out. Can you help Santa catch and wrap all of them? See the Pen <a href='https://codepen.io/mfeiring/pen/eYmJNZy'>CSS Christmas game</a> by Mira Feiring (<a href='https://codepen.io/mfeiring'>@mfeiring</a>) on <a href='https://codepen.io'>CodePen</a>.
Santa needs your help. The usually ever so helpful elves have decided to play a trick on him, and have made all the toys run around, resisting getting wrapped in the lovely Christmas wrapping paper he just spent all day picking out. Can you help Santa catch and wrap all of them? See the Pen <a href='https://codepen.io/mfeiring/pen/eYmJNZy'>CSS Christmas game</a> by Mira Feiring (<a href='https://codepen.io/mfeiring'>@mfeiring</a>) on <a href='https://codepen.io'>CodePen</a>.
Blending color codes with mix-blend-modes
This day is going to be all about blending colors, or rather how you can do blending in CSS with mix-blend-mode! Those of you that have limited experience playing around with colors may wonder what blending is. It’s quite simple, blending is when you mix two colors together in order to get a new color - and yes, it’s exactly like when you played around with color tubes in kindergarten!
This day is going to be all about blending colors, or rather how you can do blending in CSS with mix-blend-mode! Those of you that have limited experience playing around with colors may wonder what blending is. It’s quite simple, blending is when you mix two colors together in order to get a new color - and yes, it’s exactly like when you played around with color tubes in kindergarten!
Gotcha! Ways I've screwed up CSS
10 years of writing CSS has taught me one important lesson - there's always new ways to screw up. Let's look at some of the ways I've failed in the last decade.
10 years of writing CSS has taught me one important lesson - there's always new ways to screw up. Let's look at some of the ways I've failed in the last decade.
Weeding the Grid
Let's get hands on with grids!
Let's get hands on with grids!
CSS Accessibility - you make me sick!
Yesterday, we showed how to empower our users to stop our long running animations. But why force our users to manually stop animations, when they are screaming at us that they do not want animations!
Yesterday, we showed how to empower our users to stop our long running animations. But why force our users to manually stop animations, when they are screaming at us that they do not want animations!