Innhold om CSS
Totalt 53 innlegg
Side 3 av 4
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!
CSS Accessibility - get a move on, then stop!
Animations can be what sets your website apart, and really makes your users happy. It shows that you have gone that extra mile to create something really special, often with great care, and oftentimes, depending on the animation, with great effort.
Animations can be what sets your website apart, and really makes your users happy. It shows that you have gone that extra mile to create something really special, often with great care, and oftentimes, depending on the animation, with great effort.
CSS Accessibility - keeping focus
Did you know that you might be required by law to create accessible websites? In many countries, government agencies has been required to create websites that comply with WCAG 2.0 for a long time, and in for instance Norway, this requirement also apply for private companies. For a general introduction to accessibility, I recommend reading the article from day 6 in our UX Christmas calendar, and to see all the technical tidbits involved, I recommend going through the checklist found at https://www.wuhcag.com/wcag-checklist/. As this is a CSS Christmas calendar, let’s focus on the stuff we control using CSS, and today, it is all about keeping focus!
Did you know that you might be required by law to create accessible websites? In many countries, government agencies has been required to create websites that comply with WCAG 2.0 for a long time, and in for instance Norway, this requirement also apply for private companies. For a general introduction to accessibility, I recommend reading the article from day 6 in our UX Christmas calendar, and to see all the technical tidbits involved, I recommend going through the checklist found at https://www.wuhcag.com/wcag-checklist/. As this is a CSS Christmas calendar, let’s focus on the stuff we control using CSS, and today, it is all about keeping focus!
CSS Christmas card - Part 3: Shaking it up
CSS Christmas card - Part 2: But can you use this?
CSS Christmas card - Part 1: Cutting corners
CSS Grid's Best Friend
There is a display property that goes hand-in-hand with CSS grid: display: contents. With this property you can keep good HTML semantics when using CSS grid. Let's see how.
There is a display property that goes hand-in-hand with CSS grid: display: contents. With this property you can keep good HTML semantics when using CSS grid. Let's see how.
Bleeding edge - making your grids bleed
Grid layouts are nice until you need to do something slightly outside of its bounds. Want to learn a quick trick to escape?
Grid layouts are nice until you need to do something slightly outside of its bounds. Want to learn a quick trick to escape?
Hyphens - Breaker of Words
How words are broken when lines overflow their containers is not always trivial and can cause many a headaches. Hyphens is a CSS property used to help with this, but how does it actually work and what can it do for us?
How words are broken when lines overflow their containers is not always trivial and can cause many a headaches. Hyphens is a CSS property used to help with this, but how does it actually work and what can it do for us?