Si vous êtes Web Designer chevronné ou simple passionné des nouvelles technologies Web, nous vous recommandons un livre des éditions Eyrolles.Succédant le premier livre « CSS 2 », ce livre aborde avec des exemples et conseils judicieux les nouveaux (ou futurs) « standards » tels que HTML5 ou CSS3.Pour vous faire une idée voici un petit sommaire de ce que vous y trouverez :
- État des lieux
- Tirer le meilleur de CSS
- Exploiter les possibilités de CSS 2.1
- Gestion de projet et performance
- Gestion de projet et performance
- Le positionnement en CSS
- Le positionnement en CSS
- Positionnement avancé
- Résolution d’erreurs
- HTML 5 et CSS 3 : l’innovation en marche
- La révélation HTML 5
- En route vers CSS 3
- CSS et applications spécifiques
- CSS pour le Web mobile
- CSS pour l’impression
- CSS et les messageries
- Et les autres périphériques ?
- Annexes
- Liste de toutes les propriétés CSS (CSS 1, 2 et 3)
- Prise en charge de HTML 5 et CSS 3
- Ressources
Pour les initiés :
Quelques exemples des nouvelles possibilités CSS 3: border-radius (bordure arrondi), word-wrap (césure du mot), text-overflow (masquage du contenu avec remplacement par des …), resize (permet à l’utilisateur de redimensionner un bloc), columns (présentation de texte sur plusieurs colonnes), @font-face (prise en charge des polices exotiques), opacity (réglage de l’opacité sur un élément), box-shadow (ombrage sur un élément), text-shadow (ombrage sur du texte), border-image (permet de placer une image sur les bordures d’un élément).
border-radius
.border{-webkit-border-radius: 10px; //moteur Webkit (Chrome, Safari...)border-radius: 10px;border: thin blue solid;}
Résultat
word-wrap
.wordwrap{word-wrap: break-word; }
Résultat
Le mot suivant va être coupé car il prend trop de place : anticonstitutionnellement
text-overflow
.textoverflow{white-space: nowrap;overflow: hidden;-o-text-overflow: ellipsis; //Pour Operatext-overflow: ellipsis; //pour le reste}
Résultat
resize
textarea{resize: both;}
Résultat
columns
.columns{-webkit-column-count: 2;-webkit-column-gap: 20px;-webkit-column-rule: 1px solid black;-moz-column-count: 2;-moz-column-gap: 20px;-moz-column-rule: 1px solid black;column-count: 2;column-gap: 20px;column-rule: 1px solid black;}
Résultat
Le paragraphe suivant va être scindé en deux colonnes avec pour chaque colonne un espace de 20 pixels et une bordure de 1 pixel noir.
opacity
.opacity{-webkit-opacity: 0.5;-moz-opacity: 0.5;-o-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;}
Résultat
En résumé un bon livre à avoir à portée de main lorsque l’on développe un site Web pour prendre en charge petit à petit les nouvelles technologies CSS3 et HTML5!