818 private links
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.
- 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.
Code generators for front-end development.
Fontello is a tool to quickly pack vector images into webfonts. Consider it like Twitter Bootstrap, but for images. It builds everything necessary to include graphics into your web pages. Also, fontello has a big built-in collection of open source artworks.
Build iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript
How it works
We evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility.
If your combination does not meet the guidelines, we find the closest accessible combination by modifying the color lightness.
We modify the lightness value only, in order to stay as true to the original color as possible.
In this article, we will look at some of the hottest CSS tools available to developers today, including frameworks, libraries, and utilities, to help you stay ahead of the curve and take your CSS skills to the next level.
TL;DR:
Neumorphism.io
Animista
Wweb.dev
Spin Kit
Flexplorer
CSS Grid Generator
CSS Layout Generator
Shadows Brumm
Glassmorphism
Cubic-Bezier
Haikei
Extrated with:
const linksElements = Array.from(document.querySelectorAll("#article-body > h2 + p + p > a")).map(el => `[${el.textContent}](http://${el.href})`).join('\n');
alert(linksElements);
CSS Hamburger Menus are very important for responsive web design. Take inspiration from our Hamburger Menu codepens examples