CSS3 : quelques nouveautés pour nos pages web

wiki : CSS3 devient « modulaire », afin de faciliter ses mises à jours, mais aussi son implémentation par des agents utilisateurs aux capacités et aux besoins de plus en plus variés (navigateurs graphiques, navigateurs pour mobiles, navigateurs vocaux). Les navigateurs peuvent ainsi implémenter des sous-ensembles de CSS3.

voici quelques fonctionnalités :

. 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

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
pour mettre des ombres autour des textes
color: #fff;
background-color: #fff;
text-shadow: 2px 2px 2px #000;

le site officiel Cascading Style Sheets 3 : www.css3.info