Un tuto très sympa pour comprendre ce que fait et comment marche Modernizr. En résumé c'est une bibliothèque JavaScript qui permet de détecter si un navigateur supporte une fonctionnalité HTML5 / CSS3 ou pas.
Dans le cas de figure où la fonctionnalité n'est pas supporté, alors Modernizr crééera automatiquement une classe CSS avec le préfix "no-" pour que vous n'ayez plus qu'à la définir dans vos CSS.
Par exemple :
.no-boxshadow .box {
border: solid 2px #cc0000;
}
.boxshadow .box {
border-shadow: 3px 3px 7px #aaa;
}
Un librairie avec plein d'effet de survol (hover) en CSS
La notation BEM pour faciliter l'écriture des CSS.
Pas mal pour apprendre les cas tricky de CSS.
Ohhh (O_O) moi qui cherchais un framework CSS pour dégager Bootstrap, le remplacer par les FlexBox (plus léger, plus rapide, plus facile) et qui soit compréhensible par un néophyte je suis servie avec Bulma qui fait comme Bootstrap, en s'appuyant sur les FlexBox et en produisant des classes CSS toutes prêtes.
Animal, il faut que tu utilises ça pour ton site.
Roudoudoutte, idem pour ton projet.
En tout cas c'est une techno web à regarder !
Je recherchais un framework CSS responsive qui fasse comme Bootstrap mais en plus léger (4 Ko au lieu de 320 Ko). Je suis contente d'avoir trouvé Pure (développé par Yahoo) !
Comment choisir ses couleurs et les accorder entre-elles.
Les FlexBox ont de meilleurs performances que les autres mode d'affichage. Elles sont plus simple à mettre en oeuvre et interopérable/compatible avec tous les navigateurs de nos jours.
Elles s'apprennent en 4-5 jours pour un début ou une débutante en web, c'est-à-dire n'ayant jamais touché à HTML et CSS (Roudoudoutte, spourtoi).
FlexBox : faites le pas !
Tuto de chargement hyper efficace de ses polices de caractères. Merci à Timo
Un framework CSS sympa (et dont le design du site est sympa aussi, pour Roudoudoutte qui fait de GUI en ce moment).
Positionnement en profondeur avec z-index en CSS
Sous le coude
Waaouuhhhhh ! Un générateur de dégradé en pure CSS qui a vraiment du style ! J'adore.
Comment les FlexBox de CSS2-3 / HTML5 nous aident à résoudre les problèmes précédemment insolubles du positionnement web.
Même si Colibri critique la techno, je préfère me la mettre sous le coude. Je pense que pour dessiner une maquette rapidement pour un client, le WYSIWYG c'est pratique.
Les différentes méthodes de chargement des CSS en Tapestry. (oui je travaille avec cette techno en ce moment :D).
Des menus super-cools en CSS.
Un tuto plus détaillé que celui d'AlsaCréations sur les FlexBox
Je continue les tutos sur le positionning HTML5/CSS5 avec un tuto sympa d'AlsaCréations.
Animal, Chlouhloutte et Doudou le savent bien, je suis en train de développer un projet web perso. La gui de ce dernier se base en partie sur les FlexBox et les CSS3 qui lui sont associés.
Très franchement, cette technologie nous fait gagner un temps considérable et sa prise en charge sur le marché est vraiment bien avancée (environ 60% des navigateurs sont compatibles sans les préfixes du type --moz ou --webkit et on avoisine les 75% avec).
Bref, j'ai abandonné complètement le positionnement d'antan pour les FlexBox et je vous encourage à lire ce PPT pour convaincre de faire de même.
Via Colibri : http://colibri-libre.org/liens/?SCVGrw