Daniel Glazman, coprésident du CSS Working Group (groupe de travail sur CSS du W3C), a écrit un appel à action important: THE OPEN WEB NEEDS YOU NOW. C’est une lecture fortement recommandée pour tous les développeurs et designers web. Voici un résumé une paraphrase en français du problème exposé, et quelques préconisations que vous trouverez peut-être utiles.
Un appel à ne pas tomber dans le piège d'un web à 2 vitesses : webkit et non webkit. Fondamental !!!!!!!
Des morceaux de CSS3 pour trouver de l'inspiration
Tout ce qu'il faut savoir sur l'affichage de droite à gauche en tant que développeur de sites web.
Un script pour adapter la taille des images en fonction de la largeur de la page.
La technologie CSS3 des Media Queries permet de réaliser une intégration adaptée à la fois aux ordinateurs et terminaux mobiles, en détectant deux largeurs d'écran. Un menu fantastique, accessible au clavier (dans un sens et dans l'autre), et en responsive design !
Quelques menus utilisant les transitions CSS3 pour obtenir des effets assez bluffants ! J'aime particulièrement le n°3 !
La syntaxe pour faire des colonnes en CSS3, avec tous les navigateurs le supportant : -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px;
Un framework CSS responsive (s'adaptant à la résolution)
L’unité em est relative à la taille de la fonte du parent, ce qui crée un effet de cascade problématique. L’unité rem est relative à l’élément racine : la balise html. Cela signifie que nous pouvons ne définir qu’une seule taille de police sur l’élément html, puis composer toutes les tailles en rem comme pourcentages de cette valeur initiale.
Le menu déroulant présenté dans ce tutoriel dans un souci d'accessibilité : les contrastes sont suffisants, il est possible d'agrandir les polices sans "casser" le design, la navigation est possible au clavier via la touche tab et lorsque JavaScript n'est pas activé le menu prend sa forme dépliée.
Encore des polices utilisables avec les CSS3
Des polices utilisables avec les CSS3
<code>
.transparent {
/ Required for IE 5, 6, 7 /
/ ...or something to trigger hasLayout, like zoom: 1; /
width: 100%;
/ Theoretically for IE 8 & 9 (more valid) /
/ ...but not required as filter works too /
/ should come BEFORE filter /
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/ This works in IE 8 & 9 too /
/ ... but also 5, 6, 7 /
filter: alpha(opacity=50);
/ Older than Firefox 0.9 /
-moz-opacity:0.5;
/ Safari 1.x (pre WebKit!) /
-khtml-opacity: 0.5;
/ Modern!
/ Firefox 0.9+, Safari 2?, Chrome any?
/ Opera 9+, IE 9+ /
opacity: 0.5;
}
</code>
Un peu de styles sur un <hr /> pour le rendre plus esthétique !
CSS+JS pour afficher une hiérarchie à partir de listes à puce
Des CSS pour avoir des curseurs différents selon le type de document pointé.
Générateur de CSS3 en ligne, avec support minimal d'IE 7 & 8
Référence sur les propriétés CSS3 !