Search: [css] - kalvn's links

Home | Agnostic https://www.agnosticui.com/

05/10/2022 15:14:53

Une lib de composants compatibles avec React, Vue, Svelte, Angular et même du pur JS. J'imagine même pas le boulot de maintenance que ça représente 🙃

The breakpoints we tested in 2021 & 2022, and the ones to test in 2023 https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/

30/09/2022 16:05:46

Quels sont les breakpoints les plus populaires.

Le Reset CSS, une histoire d'héritage et de réinitialisation https://www.alsacreations.com/article/lire/1867-reset-css-une-histoire-heritage-et-reinitialisation.html

29/06/2022 20:54:19

Tout sur reset.css et normalize.css.

Bounce.js http://bouncejs.com/

20/03/2022 15:12:10

Un outil pour générer des animations CSS3 via une interface graphique. Il existe aussi une lib JS qui permet de faire la même chose dynamiquement en JS.

1-Line Layouts https://1linelayouts.glitch.me/

04/06/2021 10:27:44

Grid Garden - A game for learning CSS grid layout https://cssgridgarden.com/

31/05/2021 16:10:36

A game for learning CSS grid layout

Via https://korben.info/apprendre-grilles-css.html

100 underline/overlay animations | The ultimate CSS collection 🥇 - DEV Community https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40

29/05/2021 21:20:59

100 animations hover en CSS. Histoire de change du classique changement de couleur ou soulignement.

I made 100 CSS loaders for your next project - DEV Community https://dev.to/afif/i-made-100-css-loaders-for-your-next-project-4eje

29/05/2021 21:17:49

100 loaders en pur CSS.

No, Utility Classes Aren't the Same As Inline Styles | frontstuff https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles

19/05/2021 13:20:56

Les frameworks CSS orientés utility classes (type Tailwind) ont le vent en poupe. J'avoue avoir du mal avec ce concept pour le moment.

Ce qui est souvent reproché à ce type de frameworks c'est le fait que ça reviendrait à écrire du CSS inline. Cet article explique que c'est faux. Et les arguments avancés tiennent la route.

Reste qu'on se retrouve quand même avec quelques contraintes :

Du HTML verbeux et difficile à lire.
La nécessité de parser tous les templates HTML pour supprimer le CSS non utilisé (PurgeCSS) au risque de se retrouver avec un poids total de CSS gigantesque, en faisant attention de ne pas inclure des classes dynamiquement.
La nécessité d'apprendre et de connaître toutes les classes utilitaires (même si une bonne partie est explicite).

A voir comment ça évolue.

CSS Tips - Marko Denic - Web Developer https://markodenic.com/css-tips/

28/04/2021 17:01:43

Quelques astuces CSS avancées.

CSS tips and tricks you will not see in most of tutorials.

Via https://sebsauvage.net/links/?vpxZLA

CSS Grid Layout, guide complet https://la-cascade.io/css-grid-layout-guide-complet/

11/04/2021 19:45:38

Handling Text Over Images in CSS https://ishadeed.com/article/handling-text-over-image-css/

01/04/2021 10:20:59

De très bons conseils pour intégrer du texte par dessus une image et s'assurer qu'il reste bien lisible.

Learn how to handle text over images in CSS by taking accessibility in mind

CSS transitions and hover animations, an interactive guide https://www.joshwcomeau.com/animation/css-transitions/

12/02/2021 13:26:06

Tout est dans le titre :)

Cet article est très didactique, parfait pour bien comprendre les transitions CSS. Il n'aborde cependant pas les animations CSS à proprement parler.

Creating a full bleed CSS utility - Piccalilli https://piccalil.li/tutorial/creating-a-full-bleed-css-utility/

19/12/2020 21:00:10

Afficher un bloc sur toute la largeur de votre site alors qu'il est contenu dans un bloc qui a une largeur limitée.

Astuce, utiliser les unités relatives au viewport :

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

CSS Houdini - Alsacreations https://www.alsacreations.com/article/lire/1809-css-houdini-magie-ou-poudre-aux-yeux.html

01/06/2020 21:27:07

Bigrement intéressant ! (oui oui, j'ai dit "bigrement")

De nouvelles APIs devraient bientôt nous permettre d'avoir accès en profondeur à la manière donc notre navigateur affiche les sites web. Du CSS boosté aux hormones en somme !