CSS3 – Introduction, nouveautes et exemples

Qu’est ce que le CSS3

CSS3 offre une variété de nouveaux moyens pour créer un impact avec vos designs avec quelques changements. Dans cette partie nous allons faire le tour des possibilités créées par le standard.

Les modules

Le développement de  CSS3 va être divisé  en modules. l’ancienne spécification était trop large et complexe pour être mise  a jour. Il a été donc divise en de petites pièces, de nouvelles parties ont aussi été ajoutées. parmi ces modules on peut citer :

• le modèle de boites
• le Module de listes
• la présentation des hyperliens
• les arrières plans et les bordures
• les effets de texte
• les colonnes multiples
• voir la liste complete

Quand est ce que ca va etre pret?

Plusieurs modules sont finis, incluant le module  SVG (Scalable Vector Graphics), les modules de requêtes Media et les espaces de noms. Les autres sont encore en cours de développement. Il est difficile de donner une date projetée pour le support des navigateurs du CSS3 – quelques nouveaux builds de safari ont commencé déjà a supporter quelques modules. l’ensemble des modules vont etre graduellement implémentées dans les différents navigateurs, cela pourrait prendre un an ou deux pour que le tout soit adopte.

Comment CSS3 va m’affecter?

Espérant que cela va être d’un moyen positif! CSS3 va évidemment etre compatible aux anciennes version, on n’aura donc pas a changer nos anciens design pour s’assurer que ca marche. les navigateurs vont continuer a supporter CSS2.

L’impact le plus important est la possibilité d’utiliser les sélecteurs et les propriétés qui sont disponibles. ces derniers vont permettre d’effectuer quelques nouveaux trucs (animations, bordures, colonnes etc)  plus facilement.

Les Bordures

Dans cette partie on va parler des bordures. la propriété border est connue par tous les designers et utilisateurs du CSS. ils permettent de structurer le contenu, créer des effets et améliorent le layout des pages.

CSS3 va avec les bordures vers un autre niveau en ajoutant la possibilité d’ajouter les gradients, les bordures arrondies, les ombres de bordure et les images de bordure. les exemples qu’on va donner peuvent être effectués sur les versions courantes des navigateurs, elles sont testées sur Firefox 3.5.2 . Pour d’autres ils ne sont disponibles que pour les derniers builds de différents navigateurs.

Les bordures arrondies

Plusieurs moyens sont possibles pour afficher des bordures arrondies avec la version courante de CSS, mais aucun d’eux n’est simple. Il faut absolument utiliser des images pour cette tache. La grande nouveauté ici est que, avec CSS3, créer une bordure arrondie est incroyablement simple, et peut être appliqué  a chaque coin individuellement, les couleurs et la taille sont aussi modifiables. Voici un exemple :

.roundedborder {
background-color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid red;
padding: 10px;
width: 310px;
}

Exemple

Les bordures gradients

Les bordures transparents peuvent apparaître effectifs si ils sont utilisées correctement. Le code suivant est un peu plus complexe :

.gradientgradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

Exemple

Ombres de bordure

Ajouter de l’ombre permet de différencier une certaine partie. voici un exemple :

.shadowborder {
-webkit-box-shadow: 10px 10px 5px #eee;
padding: 5px 5px 5px 15px;
width: 300px;
}

Exemple

Images de bordures

Ceci est aussi une fonctionnalité intéressante. Vous avez la possibilité de répéter ou d’étirer une photo que vous choisissez. le code CSS varie selon les navigateurs présentement:

.imgborder {
width:400px;
-webkit-border-image: url(ombre.png) 20 20 20 20 round round;
-moz-border-image: url(ombre.png) 27 27 27 27 round round;
}

Exemple

Effets de Texte

La typographie est sans doute l’un des aspects les plus important pour un bon design. la police peut donner une certaine impression et un certain impact du contexte du site et influer le contenu.

Les versions courantes de CSS  sont déjà versatiles de nos jours. mais il y a quelques parties qui sont plus ou moins difficile a réaliser. CSS3 vient justement faciliter un nombre de ces limitations.

Ombre de texte

Les ombres de texte peuvent être vus comme dépassées, mais ceci dépend de la manière de leur utilisations. l’ombre peut donner un look impressionnant si il est bien choisi dans un bon contexte. voici un exemple

.shadowtext {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}

Exemple

Renvoi a la ligne

Pour l’instant, si un mot est beaucoup plus long que l’aire sur laquelle il est, il dépasse cette aire. ce n’est pas un cas très courant, mais ça arrive de temps en temps. La nouvelle faculté de renvoi a la ligne permet désormais de forcer un texte au renvoi a la ligne, et éventuellement de couper le mot en deux parties. Et c’est super simple!

.wraptext {
word-wrap:  break-word;
}

Exemple

Police Web

Bien que cette section n’est pas classée dans les effets de texte, nous allons en parler brièvement. Une police (Font en Anglais) est un moyen pour utiliser n’importe quelle police dans vos pages web, étant téléchargée automatiquement par votre navigateur. Ceci peut révolutionner le design Web qui était limitée a une dizaine ou une quinzaine de polices supportées. Par contre, cette nouvelle fonctionnalité emmène un debat concernant les licences des polices.

Pour l’instant, Uniquement Safari 3.1 supporte cette fonctionnalité. Opera va prochainement la supporter aussi. Il est certain que les autres navigateurs suivront la vague aussi.

@font-face {
font-family: 'Name of the new font';
src: url('https://www.designshack.co.uk/fonts/font.ttf');
}

Resultat

Interface Utilisateur

CSS3 offre des nouvelles propriétés pour modifier la taille des elements, des curseurs, des boites etc.

Modification de taille

CSS3 vous permet facilement de modifier la taille de n’importe quel élément avec le code

.modifysizeinterface {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}

Exemple (uniquement sous safari)

Modification de taille des boites

Le module “modèle des boites” (box model en Anglais) de CSS3 est l’un des parties les plus extensives. Il vous permet de définir certains elements qui doivent être placés dans une aire bien définie d’une certaine façon. Par exemple, si vous voulez deux boites avec des bordures cote a cote, ceci peut être achevé en mettant la propriété box-sizing a border-box, ce qui forcera votre navigateur a afficher la boite avec la taille spécifiée et mettre la bordure a l’intérieur de la boite.
Voici un exemple:

.boite {
-moz-box-sizing: border-box;
width:50%;
height: 60px;
text-align: center;
border: 5px solid red;
padding: 2px;
float:left;
}
.aire {
width: 300px;
border: 10px solid blue;
height: 60px;
}

Exemple

Colonnes multiples

Ceci est un très bonne facette pour mettre en forme un texte. les journaux et magazines l’utilisent depuis toujours. CSS3 introduit un nouveau module nommé multi-column qui permet de spécifier combien de colonnes voulez vous pour un texte, et comment la division va être faite :

Colonnes multiples

A présent, cette fonctionnalité est supportée uniquement par Firefox et Safari 3. Il y a quatre propriétés pouvant être configurées dans CSS3 :

• column-count
• column-width
• column-gap
• column-rule

A present, le sélecteur dépend du navigateur (pour Safari ou Firefox) . voici un exemple:

.colonnesmultiples {
-moz-column-width: 130px;;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
border:2px solid green;
width:500px;
padding:5px;
}

Exemple

portee de colonnes

Vous vouliez aussi qu’un élément aie une portée de plus qu’une colonne, une entête ou un titre par exemple. Ceci peut etre fait en utilisant :

.multiplespan {
column-span: all
}

Exemple

Arrière plans

Taille des arrière plans

Plus besoin de modifier les tailles des images elles même pour les arrière plans. CSS offre des options pour modifier les tailles des arrière plans.

.backgroundsize {
background: url(css3.jpg);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
}

Exemple (Safari et Opera)

arrière plans multiples

Cette fonctionnalité vous permettra d’affecter des arrière plans multiples pour un élément donné. Vous n’aurez plus a vous soucier a mettre des images convenant a la longueur de votre élément pour couvrir l’ensemble des elements etc.

.arplansmultiples{
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}

Exemple (Safari et Opera)

Specifications W3C du CSS3

Conclusion

J’espère que vous avez apprécié toutes les nouvelles fonctionnalités et nouveautés de CSS3. J’adore la vie facile 😀 Si vous avez des commentaires n’hésitez pas !

Télécharger Tous les exemples