All popular icon sets, one framework

Cet article vous présente le moyen simple de personnaliser vos éléments input de type radio ou checkbox en utilisant uniquement du CSS.

On se focalise souvent sur les feuilles de style pour le rendu à l'écran, mais une page web peut également se décliner sous la forme d'un document imprimé. Coup de chance : les feuilles de style CSS servent aussi à définir les styles pour l'impression des pages web. Elle est pas belle, la vie ?

One of the wonderful things about CSS is that it allows authors to create media-specific styles for a single document. We’re pretty used to styling for the screen, but thinking about other media isn’t a habit yet. And as all the “printer-friendly” links attest, our thinking about the print medium has been limited to recreating a document in a different way.

OKLCH is a new way to encode colors (like hex, RGBA, or HSL)

Made by Lea Verou with care

Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS!

Paged.js follows the Paged Media standards published by the W3C (ie the Paged Media Module, and the Generated Content for Paged Media Module). In effect Paged.js acts as a polyfill for the CSS modules to print content using features that are not yet natively supported by browsers.

• Discussions and help: Mattermost, Discourse
• Development: Gitlab

• Selectors CSS-Tricks - CSS-Tricks
• Properties CSS-Tricks - CSS-Tricks

I wrote A Modern CSS Reset almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version.

I know I also have a terrible record with open source maintenance, so I thought I’d archive the original and just post this instead. Do with it what you want!

To be super clear, this is a reset that works for me, personally and us at Set Studio. Whenever I refer to “we”, that’s who I’m referring to.

1. Introduction
2. L’attribut alt
3. L’attribut title
4. La balise <title> et les images SVG
5. Le texte masqué en CSS
6. Les attributs ARIA : à n’utiliser qu’en connaissance de cause

• I made 100 CSS loaders for your next project
• Another 100 CSS loaders for your next project
• I made 100 more CSS loaders for your next project
• Still 100 CSS loaders for your next project
• Adding 100 CSS loaders to the collection of — 500 CSS loaders 🏆
• I am back with 100 "Dark Mode" CSS loaders
• css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)

Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 673 197 developers building projects, reviewing code, and helping each other get better.

TL;DR:

• Si l’icone est utilisé une seule fois dans votre page,
• Si cet icone est critique ou a besoin de changer de couleur lors d’une interaction,
  • ➡️ utiliser le SVG en inline dans le HTML
• Si non,
  • ➡️ utiliser une balise <img>
• Si l’icone est utilisée plusieurs fois,
• Si l’icone est critique
  • ➡️ utiliser des Inline SVG Symbol
• Si l’icone n’est pas critique,
  • S’il est possible d’héberger du SVG sur votre propre domaine
    • ➡️ utiliser des Remote SVG Symbol
  • Si non,
    • ➡️ Essayez de convaincre très fort votre admin sys de l’importance d’avoir le même domaine pour vos assets
    • ➡️ Ou passez par un fallback avec des CSS mask
    • ➡️ Ou utilisez des Inline SVG Symbol
• Si vous utilisez une font d’icone,
• ➡️ repartez en haut de cette matrice et choisissez une autre méthode. Vos utilisateurices vous remercieront.

Specificity Calculator was built by Keegan Street.

Calculate CSS strong.

HTML5 UP
... makes spiffy HTML5
site templates that are:

• Fully Responsive
• Built on intelligent HTML5 + CSS3
• Super Customizable
• 100% Free under the Creative Commons

The Surprising Things That CSS Can Animate / Coder's Block

Understanding Interpolation
Layered Animations
Animating CSS Generated Content
Fade and Go Away
Text Selection Trick
Animating Shadows
Closing Remarks

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.