Livre recommandé : CSS avancés « Vers HTML5 et CSS3″

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 :

1. État des lieux
2. Tirer le meilleur de CSS
   1. Exploiter les possibilités de CSS 2.1
   2. Gestion de projet et performance
   3. Gestion de projet et performance
   4. Le positionnement en CSS
   5. Le positionnement en CSS
   6. Positionnement avancé
   7. Résolution d’erreurs
3. HTML 5 et CSS 3 : l’innovation en marche
   1. La révélation HTML 5
   2. En route vers CSS 3
4. CSS et applications spécifiques
   1. CSS pour le Web mobile
   2. CSS pour l’impression
   3. CSS et les messageries
   4. Et les autres périphériques ?
5. Annexes
   1. Liste de toutes les propriétés CSS (CSS 1, 2 et 3)
   2. Prise en charge de HTML 5 et CSS 3
   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 Opera
text-overflow: ellipsis; //pour le reste
}


Résultat

La phrase suivante va être coupée car elle prend trop de place : anticonstitutionnellement

---

resize


textarea{
resize: both;
}


Résultat

Vous pouvez redimensionner cette boîte de texte avec la souris

---

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!