CSS et CSS3

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - [email protected] 1

Aperçu rapide du CSS et du CSS3

Feuilles de styles en cascade Depuis plus de dix ans, il est d'usage de séparer le fond (HTML) de la forme (CSS). Les avantages de cette séparation sont importants, ils permettent notamment de pouvoir agir sur des éléments du site présents sur toutes les pages en agissant sur un seul fichier.

Pour comprendre comment agissent les CSS, il est indispensable de connaître le HTML.

Il existe plusieurs méthodes pour utiliser les CSS :

Insérer les CSS directement dans la balise souhaitée. Cette méthode est déconseillée mais peut être utile lors des phases de développement. <h1 style="color: red; font-size: 2em;">Mon titre</h1>

Insérer les CSS directement dans le <head>. <style> h1 { color: red; font-size: 2em; } </style>

Appeler un fichier styles.css dans le <head>. <link rel="stylesheet" media="screen" type="text/css" href="styles.css" /> (en xHTML) <link rel="stylesheet" media="print" href="styles.css> (en HTML5)

Utiliser la règle @import soit dans le <head> via la balise <style>, soit dans une autre feuille de style. <style>@import url(styles.css) media;</style> (voir : http://www.w3.org/TR/css3-cascade/#at-import)


Principes des CSS

http://www.w3.org/TR/css3-cascade/






Les propriétés du CSS Les éléments en CSS sont généralement des blocs (éléments qui prennent une largeur comme un cadre, un titre) ou des lignes (ils s'intègrent dans une ligne comme les gras, les italiques). Il existe des éléments hybrides qui sont à la fois inline et block (inline-block).

Font

Gestion des polices, des tailles de caractères…

Font-family pour définir la ou les polices (http://css.mammouthland.net/font-css-polices-caracteres.php)

Font-size pour définir la taille (de préférence en % ou en em)

Font-weight pour définir l'épaisseur (bold ou normal)

Font-style pour définir l'italique (italic, oblique ou normal)

Font-variant pour définir les capitales (small-caps ou normal)

Font-stretch ne semble pas fonctionner sur les navigateurs les plus courants

Text

Gestion des zones de texte.

Text-align pour définir l'alignement (left, right, center, justify)

Text-decoration pour les soulignements (none, underline, overline, line-throught, blink / cette dernière est à éviter)

Text-transform pour la gestion des minuscules et majuscules (none, capitalize, uppercase, lowercase)


CSS

http://css.mammouthland.net/font-css-polices-caracteres.php







Line

Gestion des lignes.

Line-height pour gérer la hauteur de la ligne (normal, % ou nombre) – pour centrer reprendre la hauteur du bloc

Line-break pour gérer le saut de ligne pour un texte en japonais (normal, strict)

Word

Gestion des mots.

Word-spacing pour gérer l'espacement des mots (normal, inherit, nombre en px ou en em)

Word-wrap pour gérer le comportement d'un mot dépassant le cadre (normal, break-word)

Letter-spacing

Gestion de l'espacement des lettres en em ou px.

@font-face

Gestion des polices importées.

Voir :

http://css.mammouthland.net/css3/font-face.php (didactitiel)

http://www.fontsquirrel.com/fontface/generator (générateur de @fontface)


CSS

http://css.mammouthland.net/css3/font-face.php



http://www.fontsquirrel.com/fontface/generator



Background

Gestion des fonds pour les blocs.

Voir http://www.alsacreations.com/tuto/lire/808-arriere-plans-css3-background.html

Background-color définit une couleur d'arrière-plan pour un bloc.

Background-image définit une image en arrière plan. Elle sera appelé avec une url().

Background-position définit une position de l'image (left, center, right, bottom, top ou valeurs en %, em ou px)

Background-repeat définit si une image se répète si le cadre est plus grand (repeat, no-repeat)

Background-attachment définit si l'image est fixe ou non (fixed ou scroll)

Background-size définit la taille de l'image en arrière plan (taille en valeurs %, em ou px, cover pour adapter) – voir les préfixes pour utiliser cette propriété sur tous les navigateurs

Background-clip définit les limites de l'image à l'intérieur du bloc (content-box, padding-box ou border-box) – voir les préfixes pour utiliser cette propriété sur tous les navigateurs

Background-origin définit le point d'origine de l'image (content-box, padding-box ou border-box) – voir les préfixes pour utiliser cette propriété sur tous les navigateurs

Width et height

Pour donner une largeur et une hauteur aux éléments blocs.


CSS

http://www.alsacreations.com/tuto/lire/808-arriere-plans-css3-background.html









Display

Gestion de l'affichage d'un élément.

None pour cacher un élément

Inline définit un élément en ligne

Block définit un élément en bloc

Inline-block définit un élément en ligne avec certains comportement d'un bloc

List-item définit des blocs sous forme de liste

Voir http://www.zonecss.fr/style_css/feuille_css_display.html et http://www.alsacreations.com/actu/lire/111-display-vous-connaissez.html

Border

Gestion des bordures pour des blocs.

Border-width définit la largeur de la bordure (généralement en px)

Border-style définit le style de la bordure (dashed, dotted,double, groove, hidden, inset, outset, none, ridge ou solid)

Border-color définit la couleur

Border-bottom, border-top, border-left et border-right définissent un côté spécifique (il est alors possible de définir border-top-color etc.)


CSS

http://www.zonecss.fr/style_css/feuille_css_display.html

http://www.zonecss.fr/style_css/feuille_css_display.html

http://www.alsacreations.com/actu/lire/111-display-vous-connaissez.html







Padding

Gestion des marges intérieures à un bloc. Il est possible de s'adresser à une marge spécifique (padding-right par exemple) ou à toutes (padding: 10px; toutes les marges sont à 10px – padding: 10px 0; les marges en haut et en bas sont à 10px – padding: top right bottom left; pour séparer les 4 valeurs de la marge).

Margin

Gestion des marges extérieures d'un bloc. Mêmes propriétés que pour padding.

Pour centrer un élément bloc vous pouvez utiliser "margin: 0 auto;".

Vertical-align

Gestion de l'alignement d'un élément en ligne avec un autre élément en ligne. Ce n'est pas fait pour aligner vertcalement un élément en ligne dans un bloc (voir line-height). Il est aussi possible de l'utiliser dans des tableaux (<table> ou élément en "display: table-cell;")

Visibility

Gestion de la visibilité d'un bloc sans le faire disparaître du flux à la différence de "display: none;".

Exemple : visibility: hidden; (voir aussi collapse)

List

Gestion des listes ul ol.

List-style-image permet d'utiliser une image pour remplacer les puces par défaut en appelant une url()

List-style-type définit le type de puce (decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, disc, circle, square, none, inherit, etc.)

List-style-position définit l'alignement de la puce (inside, outside ou inherit)


CSS

Color

Gestion de la couleur des textes.

Les couleurs dans le web sont définies en RGB (rouge, vert et bleu). La traduction se fait soit en rgb(x, y, z) soit en #xyz.

Voir : http://stylescss.free.fr/couleurs.php

Il existe aussi le hsl(x, y%, z%) : http://www.w3.org/TR/css3-color/#hsl-color

Float

Gestion du flottement des éléments blocs (none, left, right). Attention, un élément en float sort de flux, il est donc possible d'avoir des alignements d'éléments qui déconstruisent la page.

Clear

Gestion des éléments blocs pour retrouver le flux.

None

Left permet de se mettre en-dessous d'un élément si celui-ci est à gauche

Right permet de se mettre en-dessous d'un élément si celui-ci est à droite

Both permet de se mettre en-dessous d'un élément que celui-ci soit à droite ou à gauche


CSS

http://stylescss.free.fr/couleurs.php

http://stylescss.free.fr/couleurs.php

http://www.w3.org/TR/css3-color/





Les positions Les positions sont un des éléments les plus importants en CSS. Vous avez bien entendu la possibilité de jouer avec le flottement des blocs mais les positions vous permettront d'aller plus loin ou de le compléter.

Voir http://openweb.eu.org/articles/initiation_absolue/

Position: static, c'est la valeur par défaut

Position: relative positionne l'élément par rapport à l'élément précédent

Position: fixed positionne l'élément par rapport aux bords de la page (indifférent au scroll)

Position: absolute positionne l'élément par rapport aux bords de la page ou un élément parent positionné et reste sensible au défilement (scroll) – pour centrer un bloc dans un autre il suffira de mettre un "left: 50%;" et une margin-left d'une valeur de moitié celle de la largeur du bloc à centrer. Pour l'aligement vertical, utilisez top et margin-top suivant le même principe.

Vous pourrez placer les éléments positionnés avec les propriétés left, right, top et bottom.

Il est important de comprendre ce qu'est la notion de flux dans un document. Les éléments positionnés en absolute ou en fixed sortent du flux, leur place initiale n'est plus prise en compte. Les éléments en relative garde l'emplacement initial visible même s'ils sont décalés.

Z-index

Dans les situations de positionnement, il peut y avoir des chevauchements ou superpositions de blocs. Avec z-index vous aller pouvoir définir un ordre de profondeur. Un "z-index: 1000;" passera devant un "z-index: 800;".


CSS

http://openweb.eu.org/articles/initiation_absolue/

http://openweb.eu.org/articles/initiation_absolue/

Gagner du temps dans le chargement des images Avec les sprites CSS, vous allez pouvoir charger une image composée de plusieurs images et n'afficher que la partie intéressante en fonction de la page ou de la position dans la page. L'avantage est de ne charger qu'une seule image !

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

Exemples http://blog.voyelle.me/dewplayer/sprites.html

#sprites{

display: block;

width: 108px;

height: 229px;

background: url(images/sprites.png) -1030px -958px no-repeat;

}

#sprites:hover, #sprites:active, #sprites:focus{

background-position: -1030px -37px;

}

#sprites span {

display: inline-block;

text-indent: -5000px;

}

Dimension de l'image utilisée : 1286px par 1778px


Les sprites CSS











http://blog.voyelle.me/dewplayer/sprites.html



Les propriétés CSS3 déjà en place

Les propriétés les plus connues

Border-radius

Cette fonction arrondit les coins. La ou les données en pixel définissent le rayon.

{border-radius: 10px;} les quatre coins seront arrondis avec un rayon de 10px

{border-radius: 10px 0 5px 4px;} le coin en haut à gauche aura un arrondi de 10px, celui de droite n'en aura pas, celui en bas à droite un arrondi de 5px et le dernier en bas à gauche de 4px

Text-shadow et box-shadow

Cette fonction ajoute une ombre à un texte ou un élément.

{text-shadow: 1px 1px 5px #333}

Les deux premières options définissent la direction horizontale et verticale (les valeurs peuvent être négatives), la troisième la quantité de flou (0px correspond à l'absence de flou) et la dernière la couleur.

Attention text-shadow n'est pas supporté par IE9 et ses prédécesseurs.

Box-sizing

Cette fonction permet de forcer la largeur d'un cadre malgré des bordures ou des marges.

{box-sizing: border-box;}

Les arrière-plans multiples

Vous avez la possibilité de placer plusieurs images en arrière-plan dans un background ! Ça allègera le code. Vous avez 9 positions possible avec top, center, bottom, left et right en associant avec no-repeat. On retrouve les options proposées pour le background comme repeat-x, repeat-y…

{background: url(covers/0.jpg) no-repeat top left, url(covers/1.jpg) no-repeat top right, url(covers/2.jpg) no-repeat bottom right, url(covers/3.jpg) no-repeat bottom left, url(mobile/logo.gif) center left repeat-x, url(mobile/logo.gif) center top repeat-y;}

Opacity

Cette fonction assez simple d'utilisation ne s'applique qu'aux éléments, il n'est pas possible de jouer sur l'opacité d'un texte. Pour rendre un texte translucide, il faudra changer l'opacité du bloc le contenant. Les valeurs vont de 0 (invisible) à 1 (opaque).

{opacity: .5;}

hyphens: auto;

Pour générer des césures plus travaillées qu’avec word-wrap.

Voir http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html#hyphens


Les propriétés déjà en place

http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html













RGBA

Vous avez comme option pour les couleurs un modèle qui permet de reprendre les références RGB d'une couleur et de lui ajouter une opacité (sur le même principe qu'opacity de 0 à 1).

{color: rgba(0, 0, 0, .5);} cela correspond à du noir avec une opacité à 50%

Il est aussi possible de n'utiliser que rgb().

Certaines propriétés ne sont pas complètement implantées. Vous devrez utiliser les préfixes pour chacun des navigateurs.



Navigateurs Préfixes

Safari (webkit) -webkit-

Firefox (mozilla) -moz-

Opéra -o-

Konqueror -khtml-

IE (microsoft) -ms-

Chrome -chrome- ou –webkit-

HSLA

Il existe une autre syntaxe pour générer une couleur et de la transparence. HSL signifie Teinte(Hue), Saturation et Luminosité(Lightness).

La première valeur doit être un nombre entre 0 et 359 et il détermine la teinte. Les deux autres valeurs sont en pourcentage %.

Voir : http://www.w3.org/TR/css3-color/#hsl-examples








Column

Avec les préfixes, vous pourrez afficher des colonnes dans un bloc.

{-webkit-column-width: 20em;} définit une largeur pour les colonnes (ça permet d'être flexible et responsive)

{-webkit-column-gap: 1em;} définit une marge entre les colonnes

{-webkit-column-rule: 1px solid #333;} fait apparaître une séparation de 1px

{-moz-column-count: 3;} ou {-moz-columns: 2;} permet d'imposer un nombre précis de colonnes

Voir plus précisément : http://www.w3.org/TR/css3-multicol/

Linear-gradient et radial-gradient

Comme la précédente propriété, il vous faudra utiliser des préfixes pour qu'elles fonctionnent. Ces fonctions a pour but de créer un dégradé sur un ligne ou en cercle. Information importante : elles sont une option de background-image.

{background-image: -moz-linear-gradient(left top, #d60f0f 0%, #ffdd00 100%);}

{background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB97 50%);}

Pour Safari et Chrome nous aurons –webkit-gradient (voir page suivante).

Voir plus précisément : http://www.html5-css3.fr/css3/degrades-couleurs-css3-gradient



http://www.w3.org/TR/css3-multicol/




http://www.html5-css3.fr/css3/degrades-couleurs-css3-gradient









Comme pour le moment les navigateurs interprètent assez mal les dégradés, Il existe des outils en ligne qui permettent de générer les dégradés, il ne reste alors plus qu'à copier le code :

http://www.westciv.com/tools/gradients/index-moz.html

L'écriture du CSS est différente que celle présentée avant mais fonctionne.

Exemple :

-webkit-gradient(linear, 0% 75%, 0% 19%, from(#ABABAB), to(#C9C9C9))

-moz-linear-gradient(19% 75% 90deg,#ABABAB, #C9C9C9)






La fonction calc()

Introduite avec CSS3, la fonction calc() permet de faire de simples calculs sur les tailles dans votre fichier CSS, qui sont parfois incalculables d’avance lorsque l’on mélange pourcentages et pixels.

{ width: calc(100% - 100px); }

Source : http://maxime.sh/2013/02/css-calc/

Compatibilités des navigateurs : http://caniuse.com/calc



http://maxime.sh/2013/02/css-calc/




http://caniuse.com/calc

Propriété Navigateurs

Border-radius Safari 3+, Chrome 3+, Firefoc 1+, Opéra 10.5+, IE 9+

Text-shadow Safari 1,1+, Chrome 2+, Firefox 3.1+, Opéra 9.5+

Box-shadow Safari 3+, Chrome 3+, Firefox 3.5+, Opéra 10.5+, IE 9+

Arrière-plan multiples pour les images Safari 1.3+, Chrome 2+, Firefox 3.6+, Opéra 10.5+, IE 9+

Opacity Safari 1.2+, Chrome 1+, Firefox 1.5+, Opéra 9+, IE 9+

RGBA Safari 3.2+, Chrome 3+, Firefox 3+, Opéra 10+, IE 9+




Les sélecteurs et les pseudo-éléments

Les pseudo-éléments sont un des aspects les plus intéressants du CSS et sont en place depuis longtemps pour certaines fonctions. Avant de voir les tableaux des sélecteurs d'attribut et de tous les pseudo-éléments, voyons à partir d'un exemple, les possibilités offertes. Pour compléter, vous trouveres des informations sur ces sites : http://www.yoyodesign.org/doc/w3c/css2/selector.html http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaître Que signifie en css cette ligne de code : a:not([rel*="lightbox"]){text-transform: uppercase;} ? Pour commencer, nous nous adressons ici au lien (<a…>). Cependant, avec :not(), nous excluons tous les liens qui auraient le terme "lightbox" dans les informations données à l'attribut rel (ex "lightbox effet", "effet-lightbox" ou "effetlightbox3"). Si nous avions mis rel="lightbox", nous aurions ciblé uniquement les liens avec l'information exacte "lightbox".

http://www.yoyodesign.org/doc/w3c/css2/selector.html


http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-conna%C3%AEtre

















Les sélecteurs et les pseudo-éléments

Sélecteurs d'attribut Fonctions

[rel] Cible les éléments qui contiennent un attribut "rel" qu'importe sa valeur

[class="effet"] ou [class=effet] Cible les éléments qui contiennent une classe dont la valeur exacte est "effet"

[id|="header"] Cible les éléments qui contiennet une ID dont les valeurs séparées par des tirets "-" commenceraient par header

[rel~=mavaleur] Cible les éléments qui contiennent un attribut rel contenant "mavaleur" dans une liste de valeurs séparées par des espaces

[href^=http] Cible les éléments qui ont un attribut "href" qui comment par "http" – ici tous les liens et non les mails par exemple

[src$=.png] [href$=.pdf]

Cible les éléments dont l'attribut "src" se termine par ".png" Pour cibler toutes les images, il pourrait être ajouter un attribut "data-filetype=image"

[rel*=lightbox] Cible un élément qui contient l'atrribut "rel" dont les valeurs comportes au moins le terme "lightbox" (avec ou sans séparateur par opposition à ~)


Les pseudo-éléments

Sélecteurs CSS Fonctions

* Cible tous les éléments

E Cible uniquement les élément E

html:root ou :root Cible tous les éléments qui sont à la racine html

E:nth-child(n) Cible les éléments numéro n par rapports à leurs frères dans un élément parent (pour cibler une ligne sur deux, vous utiliserez even pour les lignes paires et odd impaires)

E:nth-last-child(n) Idem mais en commençant par la fin

E:nth-of-type(n) et :nth-last-of-type(n) Cibler dans des listes d'éléments frères le numéro "n" en partant du début ou de la fin de la liste

E:first-child et E:last-child

Cibler le premier ou le dernier élément enfant d'un parent

E:first-of-type et E:last-of-type Identique à :nth-of-type(1) et :nth-last-of-type(1)

E:only-child Cibler les éléments enfants uniques de leur parent

E:only-of-type Cibler tous les éléments qui n'ont pas de frères

E:empty Cibler les éléments vides

E:link Cibler les éléments liens non visités




E:visited Cibler les éléments (liens) qui ont été visités

E:active Cibler les éléments cliqués

E:hover Cibler un élément survolé par la souris (limite sous IE6 aux éléments <a>)

E:focus http://www.web-petit.com/css-focus

E:target Cibler un élément comme une ancre qui serait appelée lors d'un click

E:lang(fr) Cibler un élément dont l'attribut langue est "fr"

E:enabled et E:disabled Cibler les éléments actifs ou inactifs par exemple dans des formulaires (balises input, select…)

E:checked Cibler les éléments "input" de type checkbox lorsque qu'ils sélectionnés

E::first-line Cibler la première ligne d'un élément

E::first-letter Cibler la première lettre d'un élément

E::before Pour récupérer des contenus d'attributs, on peut faire ainsi : {content: attr(href);} pour afficher le l'url du lien par exemple.

Cibler des éléments et ajouter du contenu avant celui-ci (image, texte…) et lui appliquer des styles

E::after Idem mais en fin

http://www.web-petit.com/css-focus








E#monId et E.maclasse Cibler les éléments qui ont une ID (rappel : les ID sont uniques) ou une classe

E:not(selecteur) Cibler les éléments sauf le sélecteur indiqué

E F Cibler les éléments F dont le parent sont les éléments E

E > F Cibler les éléments F descendants directs de E

E + F Cibler le premier élément F qui suit immédiatement les éléments E

E ~ F Cibler les éléments F qui suivent les éléments E (moins strict que E + F)

Vous avez maintenant la possibilité non seulement d'utiliser ces sélecteurs mais de les associer les uns aux autres pour être le plus précis dans la mise en place de vos styles.

Les transitions Pour créer des transitions plus douces, il existe les fonctions "transition". Par exemple, vous souhaitez créer une transition de couleur via un :hover. Les préfixes sont indispensables pour le moment.

À partir d'un lien :

<a href="#" class="transition">Ma transition</a>

Nous aurions en CSS :

a.transition{

padding: 5px 10px;

background: purple;

-webkit-transition-property: background; (on définit la propriété sur laquelle nous voulons faire une transition)

-webkit-transition-duration: 1s; (on définit une durée en seconde)

-webkit-transition-timing-function: ease; (on définit une courbe de vitesse)

…} ou {-webkit-transition: background 1s ease;}

a.transition:hover {background: yellow;} (ne pas oublier de définir aussi la couleur du :hover)

D'autres options sont possibles :

Transition-delay pour définir un temps entre ce qui déclenche la transition et la transition (en seconde)

Sur plusieurs propriétés : {transition: background 1s ease, color 1s linear;}

Sur toutes les propriétés : {transition: all 1.5s ease;}


Et aussi

Les fonctions du timing : Ease Linear Ease-in Ease-out Ease-in-out Cubic-bezier

Les transformations De même que pour les transitions, cette fonction exige les préfixes.

Elle se présente sous cette forme :

transform: (vos options);

Les options possibles :

Modifier la taille : transform: scale(x); la valeur x représente le zoom que vous voulez effectuer, la valeur 1 étant la valeur sans modification

Modifier l'angle : transform: rotate(xdeg); la valeur x représente les degrés et cette valeur peut être négative (ex: -15deg)

Placer l'image : transform-origin: bottom top left right center…; par défaut vous aurez center center pour l'alignement vertical et horisontal

Déformer l'image : transform: skew(-10deg, 30deg);

Déplacer l'image : transform: transalte(xpx, ypx);

Pour créer une animation comme faire tourner un soleil, il faudra ajouter du javascript ou du jquery.


Et aussi

Le parallaxe Le principe du parallaxe est de déplacer des images en fonction du défilement vertical et/ou horizontal, ou du redimensionnement de la page. Exemple de parallaxe dans un redimensionnement : http://silverbackapp.com/

Pour que cela fonctionne, il faut que vos images soit en transparence (gif ou png) ou en opacité.

Vous pouvez suivre les didacticiels suivant pour des effets plus complexes :

http://www.creativejuiz.fr/blog/tutoriels/css3-effet-parallaxe-sans-javascript

http://www.alsacreations.com/astuce/lire/1417-effet-parallaxe.html avec jQuery

Pour les effets de redimensionnent, c'est assez simple à mettre en place.

Vous placez vos 3 images de fond dans le <body>.

background: url(images/body2.png) repeat-x scroll 70% 0, url(images/body3.png) repeat-x scroll 300% 0, url(images/body1.gif) repeat-x scroll -10% 0;

La dernière image doit être celle qui se place le plus en arrière (celle qui peut être opaque par exemple).

Ensuite, vous devez informer quelques options pour placer les éléments en haut de page, pour faire une répétition horizontale avec repeat-x, puis un scroll pour que celles-ci ne suivent pas le déplacement verticale de la fenêtre (sinon fixed pour imposer la présence des images en haut de page. Les valeurs en % vont agir sur les images lorsque la fenêtre est redimensionner en les animant à des vitesses différentes.


Et aussi

http://silverbackapp.com/

http://silverbackapp.com/










http://www.alsacreations.com/astuce/lire/1417-effet-parallaxe.html





Tutoriels et démonstrations HTML5 et CSS3 http://www.html5-css3.fr/


http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaitre

http://css.4design.tl/css-selecteur-frere-adjacent

http://www.vanseodesign.com/css/combinators-pseudo-classes/

http://blog.voyelle.me/langages/petit-tour-des-fonctions-en-css3

http://www.webdesignweb.fr/web/css-3-transform-rotation-et-echelle-766

http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/

Nos exemples

Sprites http://blog.voyelle.me/dewplayer/sprites.html

HTML5 et CSS3 http://blog.voyelle.me/dewplayer/html5css3.html

Transitions http://blog.voyelle.me/dewplayer/transitions.html

Parallaxe http://blog.voyelle.me/dewplayer/parallaxe.html et http://blog.voyelle.me/dewplayer/parallaxe2.html


Quelques liens

http://www.html5-css3.fr/









































































http://blog.voyelle.me/dewplayer/html5css3.html

http://blog.voyelle.me/dewplayer/html5css3.html

http://blog.voyelle.me/dewplayer/transitions.html

http://blog.voyelle.me/dewplayer/transitions.html

http://blog.voyelle.me/dewplayer/parallaxe.html

http://blog.voyelle.me/dewplayer/parallaxe.html

http://blog.voyelle.me/dewplayer/parallaxe2.html

http://blog.voyelle.me/dewplayer/parallaxe2.html

Self Improvement

CSS et CSS3