CSS3 quoi de neuf?

[Tchupa]

Le css évoluent d'une manière vertigineuse et la version 3 de celui ci comporte déjà plusieurs modules implémentés dans les navigateurs récents.
Avec cette version nos habitude risque de fortement changer.

Mais quels sont les fameuses nouveautés du css3?
Vous vous rappelez de la propriété abandonné en css 2 sur les polices exotiques:

@font-face

Code: Tout sélectionner


font-face
 

Bah celle ci ré intègre le css 3 elle permet d'afficher une police exotique installé sur le serveur.
Bien sur comme a son habitude tout les derniers navigateurs sauf IE reconnaissent cette propriété.

Exemple:

Code: Tout sélectionner


@font-face {
    font-family: 'NewRegular';
    src: local('NewRegular'), local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype');
}

La version pour IE:

Code: Tout sélectionner


@font-face {
    font-family: 'NewRegular';
    src: url('fonts/HITROAD.eot');
}

Il suffit ensuite de déclaré la police dans la propriété font-family

Code: Tout sélectionner


h1 {  
  font-family: "NewRegular", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
}  
 

Ombrages sur le texte et les boîtes

La proprièté box-shadow crée un ombrage solide ou en dégradé sur tout les éléments HTML.
La proprièté text-shadow crée un ombrage solide ou dégradé autour des textes en HTML.

A l'heure actuel seul les navigateurs basé sur les moteurs Gecko (Mozilla Firefox 3.1+) et sur Webkit (Safari, Chrome) reconnaissent ces propriétés.

Exemple:

Code: Tout sélectionner


#content figure {
  -moz-box-shadow: 1px 1px 13px #999;  
  -webkit-box-shadow: 1px 1px 13px #999;  
  box-shadow: 1px 1px 13px #999;
}

Et pour le texte:

Code: Tout sélectionner


h1 {  
  text-shadow: 0px 0px 5px #fff;  
}

Coins arrondis

La propriété CSS3 border-radius accomplit le rêve ancestral du webdesigner de pouvoir créer facilement des coins arrondis sans images dans ses pages web.

Exemple:

Code: Tout sélectionner


header nav a:hover, header nav a:focus {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 

Positionnement "avancé"

Comme vous le savez sans doute le flottant est le plus répandu aujourd'hui pour faire face a différent cas.
Mais avec le css3 on peut aller plus loin et surtout aller vers d'autre voie.

La propriété inline-block qui vient du display:

Code: Tout sélectionner


#content section.presentation h2, #content section.contact h2 {
  display: inline-block;
}
 

uisque tout n'est pas rose, signalons quand-même que display: inline-block n'est pas reconnu par les versions inférieures à Firefox 3.0, ni sur Internet Explorer pour les éléments HTML nativement de type "block". Pour ce dernier, il faut ruser en appliquant des styles spécifiques

Code: Tout sélectionner


#content section.presentation h2, #content section.contact h2 {
  display: inline; /* Passage de block à élément inline */  
  zoom:1; /* Attribution du layout à l'élément */  
}
 

Source: Alsacreation