CSS 3 est attendu de pied ferme! Beaucoup de nouveautés sont promises, dont certaines vont considérablement nous faciliter la vie. Je vais vous présenter celles qui m’ont tapées dans l’oeil (aie…bon ok je sors ^^)

. Border-radius

ceci affichera des arrondis sur les coins de votre block

#div{
background-color: #ccc;
-moz-border-radius: 5px;
border: 1px solid #000;
padding: 10px;
}

Vous pouvez parametrer quel coin vous voulez mettre en rond et lequel non :

-moz-border-radius-topleft : arrondi seulement le coin en haut à gauche de votre block
-moz-border-radius-topright : en haut à droite
-moz-border-radius-bottomleft : le coin en bas à gauche
-moz-border-radius-bottomright : le coin en bas à droite

.box-sizing

Il est souvent horrible de perdre du temps juste pour mettre d’accord les navigateurs sur la taille des modèles de blocs (merci IE)
Voici la solution attendue :
le box-sizing vous permet de forcer un navigateur qui ne respecte pas les normes à afficher. En fait, le box-sizing ajout le border-width, border-height et le padding à la taille de la boite, c’est-à-dire à l’intérieur du bloc.
si vous voulez l’utiliser sous firefox, utilisez le prefixe -moz- qui vous donnera -moz-box-sizing

.resize
Si vous avez toujours voulu faire apparaitre des blocs que vos visiteurs peuvez agradir ou retrecir, vous pouvez l’utiliser si votre browser le supporte déjà et laisser tomber vos librairies JS.

div.resize {
width: 100px;
height: 100px;
border: 1px solid;
[color=red]resize: both;[/color]
overflow: auto;
}

les différentes possibilités :
resize:both
resize: horizontal
resize: vertical;

.text-shadow
Grâce à cette balise, plus besoin d’utiliser photoshop ou gimp (:P) pour mettre des ombres autour des textes

color: #fff;
background-color: #fff;
text-shadow: 2px 2px 2px #000;

Voilà déjà une petite revue des nouveautés de CSS 3. Que du bon

Tags : No Tags.