S'inscrire |

 
ReV
TEAM
Avatar de ReV
ReV est déconnecté ReV est un Homme 06/04
XP de ReV 555 Nombre total de messages de ReV
---------
  #1 (permalink)  
Vieux 18/03/2011, 00h44
CSS3 pour designers web

CSS3 pour designers web

Et bien me revoilà pour vous faire une présentation utile du CSS3. Je dis utile car son but est, encore une fois, d'aller droit au but. Je ne vais pas rentrer dans les détails de la spécification, je vais juste survoler ce qui peut être utile pour un designer web.

Ce tuto "présentation" sera suivie de quelques modules pratiques, où je vous présenterais en détail des techniques de personnalisation de formulaire, de menus, d'images et pourquoi pas d'arrière plans.

Ce tuto se marie très bien avec le précédente sur le HTML5 que vous pourrez lire ici. Cependant, je tiens à noter, que bien que l'on parle souvent du CSS3 avec le HTML5, ces deux innovations sont indépendantes, ce sont surtout des évolutions de standards existant, ayant pour but de créer une fondation commune à tous les standards existant en terme de conception de page web.

Ce tutorial s'inspire du livre de Dan Cederholm, CSS3 for Web Designers que vous pouvez trouver sur amazon.com.


- Le CSS3, c'est quoi ?

Ce n'est pas la nouvelle version du CSS qui fait suite au CSS2, pas vraiment. C'est en fait une "évolution" du standard actuel. Le CSS3 essaye de regrouper les avancées récentes faites par certains navigateurs (notamment Chrome et Safari), pour en faire un standard et faciliter (forcer ?) son adoption sur tous les autres navigateurs. Son but aussi est de rendre accessible facilement aux concepteurs web des éléments d'interaction utilisateurs comme les animations. Le CSS3 essaye donc de simplifier la vie des web designers, au détriment de l'utilisation de langages comme Javascript.

L'élaboration du CSS3 est donc découpée en "Modules", certains liées à l'animation, d'autre aux transformations, ou encore à la mise en page (bordures, ombres,...). Chaque module évolue indépendamment, c'est important pour nous ! Pourquoi ? Tout simplement parce que nous n'avons pas besoin d'attendre la sortie finale du CSS3 pour pouvoir l'utiliser. Certains modules, sont déjà parfaitement opérationnels sur tous les navigateurs du marché, et nous aurions tords de nous en priver ! C'est ceux que je vais vous présenter ici. D'autres le sont moins, comme ceux concernant la mise en page... Et oui, vous n'allez pas pouvoir encore abandonner votre float.

Le CSS3 est puissant, amusant et facile, mais n'en abusez pas ! Il n'est là que pour enrichir l'expérience utilisateur.


- Le CSS3 que l'on peut utiliser dès aujourd'hui et partout

border-radius

Cette propriété arrondi les bords d'un élément. Elle est compatible dans tous les navigateurs récents (j'entends par navigateurs récents : IE9, Safari 3.2+, Chrome 3.6+, Firefox 3+, Opera 10.5+ - Comme j'utiliserais cette dénomination souvent, je l'ai définie de manière assez "haute", certaines propriétés peuvent marcher dans des versions plus anciennes, mais pas toutes, demandez-moi si vous avez un doute !).

Code:
.IK {
	border-radius: 10px;
}
text-shadow

Permet d'ajouter une ombre à un texte, avec une direction, une valeur de flou et une couleur.

Code:
.IK {
	text-shadow: 1px 1px 5px #777;
}
box-shadow

Fonctionne exactement de la même manière que text-shadow, mais permet d'ajouter une ombre à un élément.

Code:
.IK {
	box-shadow: 1px 1px 2px #777;
}
Arrière-plans image multiples

Vous pouvez ajouter, grâce à CSS3, des arrières plans multiples sur des éléments. Il vous suffit de les séparer par des virgules.

Code:
.IK {
	background: url(image1.png) no-repeat top left,
		url(image2.png) repeat-x bottom left,
		url(image3.png) repeat-y top right;
}

opacity


Permet de définir l'opacité d'un élément. Une valeur de 1 signifie que l'élément est totalement opaque, une valeur de 0 indique un élément totalement transparent.

Code:
.IK {
	opacity: 0.5;
}

RGBA


Ceci n'est pas une propriété CSS, mais une nouveau modèle de couleur introduit dans CSS3. Il permet de définir un niveau de transparence en même temps qu'une couleur RGB.

Code:
.IK {
	color: rgba(255,0,0, 0.75); /*Rouge vif avec une opacité à 75%*/
}
Pour ne pas faire un tutorial de 200 kilomètres de long, je ne parlerai pas de certains aspects du CSS3, mais, si vous voulez en apprendre plus (sur la gestion des polices par exemple), n'hésitez pas à me demander, cela peut alors devenir l'objet d'un nouveau tutoriel.


- Préfixes vendeurs

Si je vous dis préfixes vendeurs ??? Non, ça ne vous dit rien ? Ok, et ça :

Code:
.IK {
-webkit-border-radius: 10px;
-mos-border-radius: 10px;
border-radius: 10px;
}
Oh là là ! Mais oui, j'ai déjà vu ça ! Et ça m'a fait peur !

Ne vous inquiétez pas, c'est beaucoup plus simple et logique que ça n'y parait ! Comme je vous l'ai dit, le CSS3 ce sont des nouveaux modules. Certains d'entre eux ont été élaborés il y a longtemps par certains navigateurs, et, pour les utiliser, vous devez faire appel à des commandes expérimentales (il n'y avait pas de standard pour ça). Chaque navigateur à donc son propre préfixe pour appeler un module non encore pris en charge de façon standard.

Vous avez :
  • Webkit (Chrome et Safari) : -webkit-
  • Mozilla : -moz-
  • Opéra : -o-
  • Konqueror : -khtml-
  • Microsoft : -ms-
  • Chrome : -chrome-
L'exemple que je vous ai donné précédemment, permet d'arrondir les bords d'un élément avec un rayon de 10pixels. Comme les navigateurs WebKit et Gecko (Firefox) supportent cet élément grâce à leur propre version "préfixée", nous avons utilisé dans les deux premières lignes des versions avec les préfixes correspondant. Opéra et IE9 supportent eux cet élément sans préfixe, donc inutile d'en rajouter.

Notez qu'il faut toujours mettre l'élément sans préfixe à la fin, car le jour où il sera supporté par d'autres navigateurs, ce sera le dernier élément pris en compte. Cet élément sera le standard, et non pas la définition propre du navigateur. Et il est toujours préférable que nous nous conformions au standard. C'est donc la dernière propriété, la plus important, qui doit être la version standard sans préfixe.


- Les transitions en CSS


Les transitions permettent de définir la façon dont un élément passe d'un état à un autre. Par exemple, comment un texte passe de son état statique à son état survolé (:hover). Il peut le faire instantanément, ou avec un fondu plus ou moins rapide par exemple. C'est ce que servent à définir les transitions.

Un exemple que nous allons utiliser pendant ce chapitre :

Code:
<a href="#" class="IK">Fais moi tourner la tête !</a>
et le CSS correspondant :

Code:
a.IK{
	padding: 5px 10px;
	background: #01a6c4;
}

a.IK:hover{
	background: #c4018f;
}
C'était sans les transitions, maintenant, ajoutons-en :

Code:
a.IK{
	padding: 5px 10px;
	background: #01a6c4;
	-webkit-transition-property: background;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
}
J'ai rajouté ici trois parties dans mon code CSS :

transition-property : La propriété que je veux faire évoluer
transition-duration : Le temps que la transition doit durer
transition-timing-function : La façon dont se produit la transition

Les différentes options pour le timing sont : ease, linear, ease-in, ease-out, ease-in-out et cubic-bezier.

Ces mots ne vous parlent sans doute pas, le plus simple c'est d'essayer et voire par vous-même. Si possible avec un temps de transition assez long pour que vous ayez le temps de voir ce qui se passe !

Vous pouvez encore ajouter une option, afin de mettre un délai à la transition, pour cela, utilisez la propriété transition-delay :

Code:
a.IK{
	padding: 5px 10px;
	background: #01a6c4;
	-webkit-transition-property: background;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	-webkit-transition-delay: 0.2s;
}
Bon, c'est assez long à écrire tout ça, et vous n'avez utilisé qu'un seul préfixe ! Heureusement, une version raccourcie existe :

Code:
a.IK {
	padding: 5px 10px;
	background: #01a6c4;
	-webkit-transition: background 0.5s ease 0.2s;
}
Encore une fois, rien ne vous oblige à mettre un délai.

Maintenant, il faut rendre tout ça compatible avec tous les navigateurs. Pas de problèmes pour les navigateurs Webkit comme Safari et Chrome puisque ce sont eux qui ont au départ développé cette technologie, Opera 10.5 supporte aussi cette propriété, et Firefox 4.0 devrait également la supporter. Vous devez alors écrire un code complet qui doit se présenter sous cette forme :

Code:
a.IK {
	padding: 5px 10px;
	background: #01a6c4;
	-webkit-transition: background 0.5s ease 0.2s;
	-moz-transition: background 0.5s ease 0.2s;
	-o-transition: background 0.5s ease 0.2s;
	transition: background 0.5s ease 0.2s;
}
Bien sur les transitions peuvent se faire entre d'autres états comme :focus et :active. Vous pouvez aussi faire des transitions sur plusieurs propriétés en même temps par exemple :

Code:
a.IK {
	padding: 5px 10px;
	background: #01a6c4;
	color: #fff;
	-webkit-transition: background 0.5s ease 0.2s, color 0.5s linear 0.2s;
	-moz-transition: background 0.5s ease 0.2s, color 0.5s linear 0.2s;
	-o-transition: background 0.5s ease 0.2s, color 0.5s linear 0.2s;
	transition: background 0.5s ease 0.2s, color 0.5s linear 0.2s;
}

a.IK:hover{
	color:#000;
	background:#c4018f;
}
Vous pouvez aussi utiliser la valeur all pour effectuer la transition sur toutes les propriétés possibles !

Code:
a.IK {
	padding: 5px 10px;
	background: #01a6c4;
	color: #fff;
	-webkit-transition: all 0.5s ease 0.2s;
	-moz-transition: all 0.5s ease 0.2s;
	-o-transition: all 0.5s ease 0.2s;
	transition: all 0.5s ease 0.2s;
}

a.IK:hover{
	color:#000;
	background:#c4018f;
}
Vous pouvez utiliser les transitions sur d'autres propriétés comme width, opacity, position et font-size. Une liste complète est à votre disposition ici : CSS Transitions Module Level 3

Avec tout ce que vous avez appris vous pouvez déjà faire beaucoup de choses ! En fait, il faut juste avoir l'imagination.

Vous pouvez voir l'exemple de ce chapitre ici.


- Les transformations

Les transformations ont aussi été développées par les équipes de WebKit. Maintenant elles font partie du standard CSS3. Elles permettent de dilater ou réduire, de tourner ou encore d'incliner un élément.

-- Jouer sur l'échelle

Pour agrandir une image par exemple, voici comment il faut procéder :

Code:
a:hover img{
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}
Quand nous passerons la souris sur une image avec un lien, celle-ci s'agrandira pour atteindre 1.5 fois sa taille.

Vous pouvez ajouter une propriété 'origin' pour dire où est le point fixe de votre transformation. Par défaut, c'est le centre.

Code:
a:hover img{
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left
	-o-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}
Et voilà, maintenant, pour donner encore plus d'effet vous pouvez rajouter une ombre portée :

Code:
a:hover img{
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
Ici on ajoute une ombre qui sera à 4px du haut, 4 px de la gauche, et avec un flou de 10px. Sa couleur est définie par la propriété rgba et ce sera du noir avec 50% de transparence.

Vous pouvez aussi ajouter une belle transition pour rendre tout ça encore plus sympa !

Vous pouvez trouver un exemple complet ici

Pour continuer, vous pouvez jouer avec d'autres transformations comme rotate, skew et translate.


-- Ajouter de la rotation

Maintenant que vous commencez à comprendre comment tout marche, j'accélère un peu. Pour ajouter une rotation :

Code:
a:hover img{
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	transform: rotate(-10deg);
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
Des valeurs négatives feront tourner l'élément dans le sens contraire des aiguilles d’une montre, et des valeurs positives feront tourner dans le sens des aiguilles d'une montre.

Vous pouvez trouver un exemple complet ici


-- Jouer avec l'inclinaison


Pour incliner des éléments :

Code:
a:hover img{
	-webkit-transform: skew(-5deg, 30deg);
	-moz-transform: skew(-5deg, 30deg);
	-o-transform: skew(-5deg, 30deg);
	transform: skew(-5deg, 30deg);
}
Le premier terme permettant d'incliner selon l'axe des x et le second selon l'axe des y.

Une version plus courte existe également :

Code:
a:hover img{
	-webkit-transform: skew(30deg);
	-moz-transform: skew(30deg);
	-o-transform: skew(30deg);
	transform: skew(30deg);
}
Faites attention quand vous utilisez cette propriété, elle peut vite créer des effets visuels dérangeants.

Vous pouvez trouver un exemple complet ici


-- Translater

Enfin, pour en terminer avec les transformations, un petit tour du côté des translations, qui peuvent être très pratiques pour disposer des éléments sur une grille par exemple.

Code:
a:hover img{
	-webkit-transform: translate(20px, 40px);
	-moz-transform: translate(20px, 40px);
	-o-transform: translate(20px, 40px);
	transform: translate(20px, 40px);
}
Ici je décale mon image vers la droite de 20px et vers le bas de 40px.

Vous pouvez trouver un exemple complet ici

Toutes ces transformations que j'effectue sur l'élément survolé, n'affectent en aucun cas les autres éléments de la page.


- Soyez subtiles, et intelligents...

Et oui, n'essayez pas de mettre un code comme ça dans votre page pour impressionner votre patron... Vous l'aurez compris, trop de "WOooooOww !" tue l'effet :

Code:
*:hover {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

- Les dégradés en CSS

Le CSS3 permet de remplacer tous les éléments auxquels on peut assigner une image par un dégradé. Par exemple, vous pouvez insérer un dégradé dans : background-image, list-style-image, border-image, ...

La façon de faire pour mettre des dégradés dépend légèrement des navigateurs. La syntaxe utilisée par Mozilla va surement devenir le standard dans l'avenir, mais pour l'instant, vous devez en apprendre deux :

Code:
.IK{
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to (#999));
	background-image: -moz-linear-gradient(0% 100% 90deg, #fff, #999);
}
Comment analyser cette syntaxe ? C'est un peu compliqué à comprendre et à retenir, ce que je vous conseille, c'est d'utiliser un éditeur WYSIWYG (What You See Is What You Get) pour créer vos propres gradients et avoir la propriété CSS faites pour vous. Vous pouvez trouver un tel outil ici : Linear Gradients

Vous pouvez également avoir plus d'informations ici : Multiple Backgrounds and CSS Gradients - Snook.ca (en anglais...)

Ou si vraiment vous ne vous en sortez pas, posez-moi des questions


- Les animations

Cette partie est un petit peu plus théorique, en effet, elle n'est pas encore supportée par beaucoup de navigateurs (en fait, elle n'est supportée que par Safari et Chrome puisque c'est Webkit qui l'a développée). Cependant, l'utiliser pour un navigateur ne la voyant pas, n'influe pas du tout le rendu original, donc ne pourquoi pas essayer de rendre la navigation pour les heureux possesseurs des bons navigateurs, encore plus riche !

Pour créer une animation, il faut tout d'abord créer des "keyframe". Ce sont des règles CSS qui ressemblent à des déclarations normales, mais que vous pouvez identifier avec un nom particulier. Votre propriété CSS change en parcourant une liste de durée définie en pourcentages ou avec des mots clefs ('to' ou encore 'from').

Le plus simple est de vous montrer un exemple :

Code:
@-webkit-keyframes impulsion {
	0% {
		-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
	}
	50% {
		-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.9);
	}
	100% {
		-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
	}
}
Ici, rien ne sert de multiplier les déclarations avec d'autres préfixes ou une version standard, elles ne seront pas prises en compte.

Maintenant que nous avons fait cette première étape, il faut finir !

Nous allons utiliser l'animation définie sur un élément en l'appelant.

Code:
a:hover img{
	-webkit-animation: impulsion 1.5s infinite ease-in-out;
}
Ici, vous appelez l'animation quand vous passez sur l'image.

Vous pouvez également développer cette propriété dans sa version longue, mais c'est plus lourd :

Code:
a:hover img{
	-webkit-animation-name: pulse;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
}
Je ne vous fournit pas encore d'exemple, je le développerai dans un tuto sur la modification des formulaires car ça s'y prête bien. Et puis, je n'ai pas de navigateur compatible pour tester sous la main (il faut que j'en installe un...).


- Fonds multiples

Je ne vais pas détailler cette section dans ce tuto, je la reprendrai dans un tuto suivant Surprise


- Enrichir ses formulaires

Pareil, cette section fera l'objet d'un tuto complet C'est utile, je ne veux pas la bâcler !


- Conclusion

Voilà, j'ai terminé mon introduction au CSS3. Vous avez toutes les bases nécessaires pour faire du design web interactif et bluffer vos visiteurs. Bien sûr, vous n'imaginez pas encore tout ce qu'on peut faire avec ces bases, mais vous apprendrez, dans des prochains tutos, comment assembler toutes ces propriétés pour en tirer le maximum de bénéfice visuel.

J'espère que ce tuto vous a plu, je vous joins un fichier ZIP contenant les codes source de mes exemples pour que vous puissiez tester !

<<< Le fichier zip avec les sources >>>


A bientôt sur IK !
Réponse avec citation
Les 5 membres suivants remercient ReV pour ce message :
TEAM
Avatar de ::ubyk
::ubyk est déconnecté ::ubyk est un Homme 10/04
XP de ::ubyk 158 Nombre total de messages de ::ubyk
Team IK
  #2 (permalink)  
Vieux 18/03/2011, 09h02
::

excellent ReV, le parfait résumé, juste ce qu'il faut
bravo!
Réponse avec citation
TEAM
Avatar de Booster2000
Booster2000 est déconnecté Booster2000 est un Homme 03/03
XP de Booster2000 1 268 Nombre total de messages de Booster2000
| Traducteur |
  #3 (permalink)  
Vieux 18/03/2011, 11h10
Joli ReV, simple, clair, ca va droit au but!
Réponse avec citation
Avatar de Ouaks
Ouaks est déconnecté Sexe Non renseigné 07/05
XP de Ouaks 261 Nombre total de messages de Ouaks
Voir le compte DeviantART  de Ouaks
Pwet Master
  #4 (permalink)  
Vieux 29/03/2011, 15h40
Clair et précis comme d'hab
Merci ReV
Réponse avec citation
Réponse

Outils de la discussion

Config des règles de ce forum
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


A propos d'IK

Infographik alias IK est un forum d'entre-aide dans le domaine de l'infographie numerique
Depuis plus de 10 ans ce forum propose des tutoriaux un espace communautaire francophone.

We need You !

Faire un don permet de régler les frais de fonctionnement du site tel que l'hebergement, le ndd etc...
Faire un don

Fuseau horaire GMT +2. Il est actuellement 23h36.