slDesign » CSS

Tutoriel CSS : 3D Transform

Steve Leherpeux — Tue, 27 Jul 2010 07:36:25 +0000

Le version 3 de CSS nous a apporté son lot de nouveauté ; parmi les plus connues et plus utilisées on peut citer « Corner radius » ou encore les dégradés mais une nouvelle propriété très intéressante va vous permettre une encore plus grande liberté : la propriété « transform ».

De la 3D en CSS ?

Je n’irai pas jusqu’à dire qu’il s’agit de 3D mais plutot d’effet 3D au même titre que nous pouvons réaliser ces effets avec un logiciel de graphisme.

Nous verrons dans cet article comment réaliser un cube en effet 3D.

I – Introduction

Avant toute chose, il est nécessaire de prendre en compte la comptabilité. L’utilisation de la propriété CSS 3D transform n’est compatible qu’avec Firefox 3.5+ [-moz-transform] (documentation) et Safari 3.2+[-webkit-transform](documentation).

Travaillant essentiellement sur Firefox, je ne m'aventurerai pas dans les détails de Safari mais il n'y a pas d'énormes différences...

1°) Prérequis

Connaissances HTML / CSS
Vous vous souvenez de vos cours de géométrie ?
Un éditeur CSS / HTL

2°) Un peu de théorie...

http://www.w3.org/TR/css3-3d-transforms/

Rotation d'un objet : -moz-transform: rotate(angle);

Exemple :

-moz-transform: rotate(30);



Figure 1.2.1 - Propritét CSS Transform rotate - Rotation d'un div de 30°



Redimensionnement 2D axe X et Y d'un objet : -moz-transform:  scale(sx[, sy]);

Si [sy] n'est pas renseigné, il aura la même valeur de [sx]

Modifier la perspective : -moz-transform: skew(ax,[ay]);

Permet de modifier l'axe de perspective, vous pouvez également utilsier skewX(deg) et skewY(deg) pour les utiliser indépendament.

Exemple : -moz-transform: skewY(30deg);

Parlons maintenant de la propriété "transform:matrix", il faut comprendre dans Matrix la traduction "matrice". Nous avons une forme géométrique qui est constituée de différents points [a,b,c,d] que nous pouvons manipuler.

-moz-transform:  matrix(a, c, b, d, tx, ty)

/* Where a, b, c, d construit la transformation de la matrice
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */

Quelques exemples :

.matrix {
width: 200px;
height: 100px;
background: #f5f5f5;
-moz-transform:matrix(1,0,0.6,1,15em,0);
}

Rendu (figure 1.2.3)

Figure 1.2.3 - Rendu de la proprité transform:matrix

Exemple 2 - Retournement d'objet

.matrix {
width: 200px;
height: 100px;
background: #ff8000;
-moz-transform:matrix(-1,0,1.2,1,20em,12em);
}

Résultat (figure 1.2.4) :

Figure 1.2.4 - Résultat transform:matrix - retournement d'objet

Exemple 3 : Reflexion

-moz-transform: matrix(1, 0, 0, -1, 0, 0);

Figure 1.2.5 - Exemple transform:matrix - Reflexion

Autres exemples (non-shématisés) :

Rotation 90° sur la gauche : -moz-transform:matrix(0,-1,1,0,0,0);

II - Création d'un cube 3D

1°) Code HTML de base

Il faut tout d'abord créer 3 blocs qui nous permettrons de simuler notre cube. Ces 3 blocs seront encadrés par un div global.

Code HTML du cube





Tutoriel CSS 3D




 
 Content
 Content
 Content

J'ai également créé un fichier css qui nous permettra de mettre en forme notre cube 3D. Dans un premier temps, j'ai simplement dissocier les blocs.

Code CSS fichier style.css

#cube {
 position: relative;
 top: 200px;
 margin:0 0 230px 0;
}

#cube .cubeSide{
 height:200px;
 width:200px;
}
#topSide{
 background:#ff8000;
}
#leftSide{ background:#0080c0;}
#rightSide{background:#00ff40;}

Voici le résultat obtenu (figure 2.1.1) :

Figure 2.1.1 -CSS Transform - Cube 3D Etape 1

Maintenant, passons à des choses un peu plus sympa, nous allons appliquer notre propriété "transform" à notre cube :

.leftFace {
 background: #ff8000;
 -moz-transform: skewY(30deg);
}

.rightFace {
 background: #800080;
 -moz-transform: skewY(-30deg);
}

Nous avons appliqué ici une propriété "transform:skewY" permettant d'incliner nos div sur leurs axes Y donnant ainsi un effet de perspective.

Figure 2.1.2 - Transformation perspective sur l'axe Y - [transform:skewX(val)

Positionner les DIV : Nous devons appliquer un positionnement "absolute" à l'ensemble de nos blocs afin que ceux-ci puissent êtres dissocié et placés indépendament (figure 2.1.3) .

Code CSS : Positionnement des DIV

.topFace, .leftFace, .rightFace {
position: absolute;
}

Figure 2.1.3 - Positionnement absolute des blocs

Ensuite, nous allons positionner notre bloc right (figure 2.1.4). Il s'agit ici de décaller notre bloc de 200px sur la droite et vers le bas.

.rightFace {
 background: #800080;
 -moz-transform: skewY(-30deg);
 top: 200px;
 left: 200px;
}

Figure 2.1.4 - Positionnement du bloc "rightSide"

Intéressons nous maintenant à la partie haute, c'est à dire le DIV topSide. C'est la partie la plus compliquée...

.topFace {
 -moz-transform: rotate(60deg);
 left: 100px;
 top: 42px;
}

.topFace div {
 background: #0080c0;
 -moz-transform: skewY(-30deg) scaleY(1.16);
}

Quelques explications : Pour donner cet effet, il est nécessaire de pivoter notre face (-moz-transform: rotate(60deg);), puis nous appliquons une perspective et un redimenssionnement.

Figure 2.1.5 - CSS Effet 3D - Cube final

Avec un peu d'habillage, voici le résultat final :

Figure 2.1.5 - CSS Effet 3D - Cube Final

SpeedTuts : CSS Image Switcher

Steve Leherpeux — Fri, 16 Jul 2010 08:28:36 +0000

Dans le cadre de ce tutoriel, nous allons voir comment créer un Switcher d’images uniquement en CSS et sans aucune utilisation de Javascript. Pour cela, nous utiliserons simplement CSS et déclencherons les permutation au survol de lien.

Démo

1°) Ce dont nous avons besoin

4 images
1 éditeur de Code HTML / CSS(j’utilise Aptana IDE)
1 fichier HTML
1 fichier CSS
Connaissances de base HTML/CSS

2°) Trame html – création du layout

La première étape consiste à créer un fichier HTML dans lequel nous allons placer nos images et nos liens.J’ai également lié un fichier CSS à mon document HTML

Code HTML – Fichier de base HTML





CSS Image Switcher



CSS Image Switcher

Il ne reste plus qu’à insérer mon contenu, c’est à dire mes images et mes liens ; J’utilise des blocs ‘

’ comme conteneur principal. J’ai ensuite inséré mes liens pour mes 4 images en veillant à les identifier avec des attributs « ID ».

Code HTML – Création des liens dans le conteneur principal


 Image 1
 Image 2
 Image 3
 Image 4

3°)Edition du CSS

Nous allons éditer notre code CSS. Je dispose de 4 images qui ont les mêmes dimensions (256×192). L’idée est de faire en sorte que les liens se chevauches, il faut donc appliquer une position « absolute » à nos liens et lier nos images à nos liens et plus particulièrement les attributs « ID » de nos liens.

Voici le code CSS de notre CSS Switcher :

Code CSS :

/** Conteneur principal */
#wrapper{
 width:256px;
 margin:10px auto;
 position:relative;
}

/** Liens **/
#wrapper a{
 display:block;
 width:256px;
 height:192px;
 position:absolute;
}

/** Liaison des liens et des images */
#img1{background-image:url(img/img1.jpg);}
#img2{background-image:url(img/img2.jpg);}
#img3{background-image:url(img/img3.jpg);}
#img4{background-image:url(img/img4.jpg);}

Vous pouvez voir le résultat obtenu en figure 3.1.1 :

Figure 3.1.1 - Résultat après édition des liens

Reste à savoir comment nous allons pouvoir donner un effet de switch au survol de nos liens et comment séparer ces différents liens…

La première étape va consister à modifier nos liens en englobant nos libellés de lien dans des balises ‘’ qui vont nous permettre de réaliser des décalages entre nos liens car, comme vous avez pu le remarquer, nos liens se chevauchent et apparaissent au dessus des images.

Code HTML des liens :


 Image 1
 Image 2
 Image 3
 Image 4

Nous pouvons maintenant décaler nos liens avec notre feuille de style :

Code CSS des élément ‘’ :

/** Mise en forme des libellés de liens */
#wrapper a span{
 position:absolute;
 text-align:center;
}

/** Positionnement des libellés de liens */
#img1 span{left:0;top:200px;}
#img2 span{left:128px;top:200px;} /** Décalage 'left' à la moitié du div Wrapper */
#img3 span{left:0;top:225px;}
#img4 span{left:128px;top:225px;} /** Décalage 'left' à la moitié du div Wrapper */

Notre Switcher prend forme comme vous pouvez le voir en figure 3.1.2 :

Figure 3.1.2 - Résultat après édition CSS des libellés de liens

Reste la dernière étape… celle qui va déclencher l’effet de switch au survol des liens ; pour cela, il existe une propriété CSS très pratique, la propriété « z-index ».

La propriété de feuille de style css z-index permet de spécifier la position d’empilement d’un bloc par rapport aux autres (notion de profondeur).
La propriété de feuille de style cssz-index est généralement utilisée pour la création de calques (Layer).
Le bloc ayant la plus grande valeur est au dessus.

Nous avons juste à appliquer cette propriété à l’attribut CSS :hover de nos liens

/** Appliquer le z-index pour l'affichage des images */
a:hover{z-index:1;}

Le résultat final vous permettra de permuter vos images au survol du lien (figure 3.1.3). Vous pouvez encore améliorer la présentation si vous le souhaitez

Figure 3.1.3 - Résultat Final

4°) Conclusion

Vous venez de voir comment créer une permutation d’images en CSS. Il est vrai que JavaScript se démocratise et que de nombreuses bibliothèques permettent de mettre en place facilement ce type d’effet. Cela dit, cette méthode CSS reste légére et vous permet de voir en pratique l’utilisation de la propriété z-index.

5°) Ressources

Propriété z-index sur zone CSS

Ressource du tutoriel (Images + fichiers HTML et CSS) – css-images-switcher.zip

Les bonnes pratiques du WEB

Steve Leherpeux — Thu, 24 Jun 2010 05:54:06 +0000

Je vous propose à travers cet article de mettre en avant les bonnes pratiques du WEB et plus particulièrement lors de la rédaction de notre code HTML. Que vous soyez débutant ou non, il est important de respecter de normes de développement, ceci ne rendra votre travail que plus facile – Relecture du Code, modification, passassions de projets, etc.

1°) Fermez vos balises

La fermeture des balises est une chose essentielle ! Même si vos balises ne l’imposent pas, faites le !

Pas bon

Element 1
Element 2
Element 3

Bon


 Element 1
 Element 2
 Element 3

La fermeture des balises est essentielle, ceci vous évitera des problèmes de validation.

2°) Choisir et renseigner le DOCTYPE

La Document Type Definition (DTD), ou Définition de Type de Document, est un document permettant de décrire un modèle de document SGML ou XML. Le modèle est décrit comme une grammaire de classe de documents : grammaire parce qu’il décrit la position des termes les uns par rapport aux autres, classe parce qu’il forme une généralisation d’un domaine particulier, et document parce que on peut former avec un texte complet.

Source Wikipedia.

Pour faire court, si votre DOCTYPE n’est pas correctement renseigné, voir, pas renseigné du tout, il en résultera des problèmes de lecture de vos pages WEB ; On peut cité entre autre des mauvaises interprétations CSS qui on pour effet l’effet inverse de ce que vous attendez…

La plupart d’entre nous vont choisir entre quatre différents doctypes lors de la création de nouveaux sites Web.

Reste à savoir quel DOCTYPE utiliser… beaucoup de développeurs vous dirons qu’il faut utiliser un DOCTYPE XHTML 1.0 Strict mais ceci n’est pas sans poser de problèmes ; en effet, tous les navigateurs ne réagissent pas encore de la même façon et comme nous créons des IHM (Interfaces Utilisateur), nous devons avant tout penser à l’utilisateur…

L’utilisation d’un DOCTYPE 4.01 Strict peut s’avérer la bonne solution de transition. A vous de faire vos test et de vous forger votre propre opinion en fonction de ce que vous attendez. Je vous renvoi vers le site du W3C et celui de « POMPAGE.NET » afin que vous puissiez étudier par vous même la situation :

http://www.pompage.net/pompe/doctype/

http://www.w3.org/QA/2002/04/valid-dtd-list.html

3°) Pas de CSS dans vos balises WEB

Ceci peut être tentant d’ajouter dans vos balises des informations de style :

Information importante : Il est important de ne pas intégrer des informations de style dans vos balise !

Voici quelques raisons du pourquoi…

Ne jamais penser au style dans un premier temps, pensez structure.

Pensez aux futures modifications ; ne serait il pas plus aiser de regrouper toutes vos informations de styles dans un même document ?

Mieux vaut référencer vos balises à l’aide d’une feuille de style :

Code document HTML

Information importante : Il est important de ne pas intégrer des informations de style dans vos balise !

Code document CSS

p.blue{
 color:blue;
}
p.medium{
 font-size:1em;
}
.red{
 color:red;
}

4°) Placez toutes les feuilles de styles dans le header de votre index

Techniquement, vous pouvez placer les feuilles de style où vous voulez. Toutefois, la spécification HTML recommande qu’ils soient placés dans la balise HEAD du document. Le principal avantage est que vos pages se chargent plus rapidement et sont stockées en mémoire.



slDesign - Bonnes pratiques HTML

5°) Insérez vos fichiers javascript en bas

JavaScript est un langage interprété par votre navigateur et non pas côté serveur. Afin d’être sur et certain que vos fonctions JavaScript soient interprétées, il faut s’assurer avant tout que l’ensemble du document soit chargé. Ceci peut paraitre basique, mais vos pages sont lues de bas en haut par votre navigateur et si votre navigateur inspecte une fonction JavaScript qui port sur un élément non encore chargé, cette dernière ne pourra s’exécuter.

Il existe avec jQuery la fonction « $(document).ready(funcion(){}) » qui s’assure que la page soit totalement chargé avant l’exécution de toute autre fonction. Mais si vous ne travaillez pas avec jQuery et que vous avez développé vous même des foncions JavaScript, il est préférable de les lancer en bas de votre document HTML.

6°) Ne pas utiliser JavaScript en ligne

Il y a quelques années de cela, la pratique voulait que l’on insère directement le code JavaScript dans les balises HTML ; Les événement « onClick » était suivi de toutes les actions…

Vous ne devez jamais faire cela. Au lieu de cela, le transfert de ce code à un fichier externe JS et l’utilisation « addEventListener / attachEvent » à « écouter » pour votre événement désiré. Ou, si vous utilisez un framework comme jQuery , il suffit d’utiliser le «clic» méthode.

// Exemple avec jQuery
$(document).ready(function() {
 $("a").click(function() {
  //Ma fonction
 });
});

7°) Valider votre code

Cette étape est très importante. Je vous conseille de la réaliser tout au long de l’avancement de vos projets et non pas une fois que tout est terminé…

Des outils présents dans les navigateurs vous permettent de réaliser ce type d’opération, pour ne citer que l’add-on de mozilla, il y a la barre d’outil du développeur qui intègre un module de validation HTML et CSS

Barre d'outils développeur Mozilla

Menu de validation de la barre d'outils développeurs

8°) Téléchargez et installer Firebug

Ce module complémentaire vous permettra de débugger en temps réel vos applications WEB. Cet outil est indispensable, notamment par le fait qu’il interprète et lit le code généré par JavaScript et Ajax.

Vous trouverez ce module à l’adresse suivante : https://addons.mozilla.org/fr/firefox/addon/1843

Firebug vous permettra entre autre :

Inspectez HTML et modifier le style et la présentation en temps réel
Utiliser le débogueur JavaScript le plus avancé disponible pour n’importe quel navigateur
Analyser avec précision l’utilisation du réseau et la performance
Explorer le DOM
Exécuter JavaScript à la volée

Copie d'écran Firebug

Ce n’est pas le tout de l’installer, encore faudra t-il l’utiliser…

Voici une liste de tutoriels portant sur cet outil :

http://www.siteduzero.com/tutoriel-3-31228-firebug-une-merveille-de-plus-pour-firefox.html

http://eric-pommereau.developpez.com/tutoriels/outil-web/firebug/

9°) Editez vos balises HTML en minuscule

Il n’y a aucun intérêt à capitaliser vos balises HTML. Dans un souci de relecture veillez à utiliser des minuscules pour vos balises. De même, il n’est pas interdit d’utiliser des majuscules dans vos attributs mais pensez avant tout à respecter une logique

Mauvaise pratique

Bonne pratique

10°) Utilisez les balises ‘H’

Il existe 6 types de ‘Headers’ HTML et il est important de tous les utiliser… je l’avoue, j’utilise essentiellement le 4 premiers

Cela dit, pour des raisons sémantiques et SEO, forcez vous à utiliser ces balises ; chacune d’entre elle sera interprétée selon leur importance.

Balises de titres

CSS3 : Dégradés natifs

Steve Leherpeux — Fri, 16 Apr 2010 06:54:26 +0000

La création d’une image uniquement dans le but d’afficher un gradient est inflexible, et devient rapidement une mauvaise pratique. Malheureusement, au moment d’écrire ces lignes, ils pourraient très bien être encore nécessaires, mais j’espère pas pour longtemps. Merci à Firefox et Safari / Chrome, nous pouvons maintenant créer des gradients puissants avec un effort minimal. Dans cet article, nous allons examiner les différentes façon d’implémenter des dégradés à l’aide de CSS 3.

Introduction :

Dans cet article, nous allons voir comment implémenter des dégradés en CSS 3 à travers des exemples concret. Les techniques pour réaliser ces opérations ne sont pas les mêmes qu’il s’agisse de navigateurs Safari – Chrome / Firefox. Pour réaliser ces dégradés, j’ai simplement créé un bloc ‘DIV’ avec un id ‘gradient’.

Ce que vous devez savoir : Connaitre les bases du HTML et du CSS

Ce que vous devez avoir : Un éditeur HTML

Les dégradés CSS sous Mozilla :

Vous trouverez ci dessous le code qui permet de réaliser un beau dégradé en CSS 3 !

#gradient{
 border:1px solid #000;
 height:400px;
 width:600px;
 background:#e3e3e3;
 background: -moz-linear-gradient(top, red, green);
}

Figure 2 - Gradient CSS sous Mozilla

Les dégradés CSS sous WEBKIT :

En ce qui concerne l’implémentation des navigateurs développés sous WEBKIT, la technique est un peu différente. Voici le code :

#gradient{
 border:1px solid #000;
 height:400px;
 width:600px;
 background:#e3e3e3;
 background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
}

Ne vous inquiétez pas si vous avez un peu plus mal au crane en lisant cette syntaxe (moi aussi…) mais rien de bien compliqué :

Quel type de gradient? (Linéaire)
Axes X et Y les coordonnées de l’endroit où commencer. (0 0 – ou un coin en haut à gauche)
Axes X et Y les coordonnées de l’endroit où la conclusion (0 à 100% – ou le coin en bas à gauche)
Quelle couleur pour commencer? (À partir de (rouge))
Quelle est la couleur de conclure ? (À (bleu))

Les dégradés Partiels :

Il est possible de mettre en place un dégradé partiel ; je vous livre le code qui vous permettra de réaliser cet effet :

#gradient{
 border:1px solid #000;
 height:400px;
 width:600px;
 background :#9e7e48;
 /* Navigateurs Safari */
 background: -webkit-gradient(linear, 0 0, 0 10%, from(#672907), to(#9e7e48));
 /* Navigateurs Mozillas */
 background : -moz-linear-gradient(top, #672907, #9e7e48 20%);
}

Comme vous pouvez le constater, il devient très simple de mettre en place des dégradés dans vos sites WEB !

Figure 2 - Résultat d'un dégradé partiel

Dégradés multiples :

Il es également possible de créer des dégradés à n* couleurs ; Voici comment :

#gradient{
 border:1px solid #000;
 height:400px;
 width:600px;
 background :#9e7e48;
 /* Navigateurs Safari */
 background: -webkit-gradient(linear, 0 0, 0 100%, from(#672907), color-stop(10%, #5f0000), color-stop(20%, #9e7e48), color-stop(30%, #672907);
 /* Navigateurs Mozillas */
 background: -moz-linear-gradient(top, #672907, #5f0000 10%, #9e7e48 20%, #672907 30%);
}

Figure 3 - Dégradé multiple

Informations importantes

Utilisez-les autant que vous le pouvez. Même si les utilisateurs de IE auront une couleur unie, je vous encourage à utiliser cette méthode.
IE6/7/8, Opera, Safari 3 et Firefox 3 ne peut pas rendre gradients CSS3. Firefox et les utilisateurs de Safari sont généralement mis à jour régulièrement, ce qui ne devrait pas poser de problème.
Appliquez toujours une couleur par défaut, la couleur solide en arrière-plan pour les navigateurs qui ne comprennent pas les différents préfixes de dégradés.
Ne jamais utiliser un rouge à dégradé bleu, comme je l’ai fait pour les exemples (C’est moche ).

Ressources :

Article sur les dégradés sous Mozilla très complet : http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

CSS références pour Mozilla (en anglais) : https://developer.mozilla.org/en/CSS_Reference

CSS références pour WEBKIT (en anglais) : http://webkit.org/projects/css/index.html