SlideShare une entreprise Scribd logo
Aperçu rapide du CSS
et du CSS3
Ticoët l Communication culturelle
Rozenn Tanguy - 06 78 00 37 02 - rozenn@ticoet.fr
Erwan Tanguy – 06 62 15 11 02 – erwan@ticoet.fr
CSS & CSS32
Principes des CSS
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)
CSS & CSS33
CSS
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)
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 & CSS34
CSS
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 & CSS35
CSS
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 & CSS36
CSS
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 & CSS37
CSS
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;".
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 & CSS38
CSS
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 verticalement 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;")
Pour le cas d’une image et d’un texte, il est possible aussi
d’utiliser vertical-align.
Exemple :
<p><img src="image.jpg" alt= "mon image" /> Texte à
aligner</p>
Img{vertical-align:top;} -> Alignement haut de la boite parent
avec la boite de la ligne.
Vertical-align: baseline|length|sub|super|top|text-
top|middle|bottom|text-bottom|initial|inherit;
Voir :
 http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
 http://www.alsacreations.com/astuce/lire/4-alignement-
vertical-image-texte.html
top middle
bottom -100%
CSS & CSS39
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 & CSS310
CSS
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 & CSS311
Les propriétés CSS3
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;}
CSS & CSS312
Les propriétés CSS3
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
CSS & CSS313
Les propriétés CSS3
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().
Navigateurs Préfixes
Safari (webkit) -webkit-
Firefox (mozilla) -moz-
Opéra -o-
Konqueror -khtml-
IE (microsoft) -ms-
Chrome -chrome- ou –webkit-
Certaines propriétés ne sont pas complètement
implantées. Vous devrez utiliser les préfixes
pour chacun des navigateurs.
CSS & CSS314
Les propriétés CSS3
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
CSS & CSS315
Les propriétés CSS3
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
CSS & CSS316
Les propriétés CSS3
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.colorzilla.com/gradient-editor/
 http://www.westciv.com/tools/gradients/in
dex-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)
CSS & CSS317
Les propriétés CSS3
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
CSS & CSS318
Les propriétés CSS3
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;}
Les fonctions du
timing :
 Ease
 Linear
 Ease-in
 Ease-out
 Ease-in-out
 Cubic-bezier
CSS & CSS319
Les propriétés CSS3
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.
CSS & CSS320
Les propriétés CSS3
Les Animations
Les CSS3 permettent la mise en place d’animations assez avancées pouvant remplacer dans
certains cas l’utilisation de javascript.
 animation: nomdelanim linear 1s; -> Les fonctions définies dans « nomdelanim » se
dérouleront sur 1 seconde en linear.
 animation-iteration-count: x ou infinite; -> L’animation sera répétée x fois ou à l’infini.
 @keyframes nomdelanim{
0%{
transform: …
}
…
100%{
transform: …
}
}
@keyframes <identifier> { [ [ from | to | <percentage> ] [, from | to | <percentage> ]*
block ]* }
Les fonctions nommées dans un keyframe permet de donner les différentes étapes de
l’animation sur le temps définit. 0% correspond au début et 100% à la fin. Il est possible de
découper le temps en un nombre d’étapes assez important.
Plus d’informations : https://developer.mozilla.org/fr/docs/Web/CSS/animation + exemples
CSS & CSS321
Les propriétés CSS3
Les Animations
Quelques outils en ligne :
 http://cssanimate.com/ (+++)
 https://coveloping.com/tools/css-animation-generator (+++)
 http://www.css3maker.com/css3-animation.html ou
http://css3gen.com/css3-animation/
 http://westciv.com/tools/animations/ (+++)
CSS & CSS322
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".
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)
Voir aussi http://css-tricks.com/how-nth-child-works/
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
Les pseudo-éléments
Sélecteurs CSS Fonctions
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 https://developer.mozilla.org/fr/docs/Web/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
Les pseudo-éléments
Sélecteurs CSS Fonctions
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.
CSS & CSS327
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.
CSS & CSS328
Quelques liens
 Tutoriels et démonstrations HTML5 et CSS3 http://www.html5-css3.fr/
 http://www.yoyodesign.org/doc/w3c/css2/selector.html
 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

Contenu connexe

Tendances

Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
Claude Coulombe
 
Html de base
Html de baseHtml de base
Html de basekrymo
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
Yaya Im
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
HTML
HTMLHTML
HTML
Neovov
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
ECAM Brussels Engineering School
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Formation web
Formation webFormation web
Formation web
Stéphane BIOKOU
 
HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
Eroan Boyer
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
Kénium
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
Chi Nacim
 
Le Langage CSS
Le Langage CSSLe Langage CSS
Le Langage CSS
Mohammed Amine Mostefai
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
BNSA - Aquitaine
 

Tendances (20)

Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Html de base
Html de baseHtml de base
Html de base
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Css+html
Css+htmlCss+html
Css+html
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Html
HtmlHtml
Html
 
HTML
HTMLHTML
HTML
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
 
Formation web
Formation webFormation web
Formation web
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
 
Le Langage CSS
Le Langage CSSLe Langage CSS
Le Langage CSS
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 

En vedette

Aritmética informal ensayo
Aritmética informal ensayo Aritmética informal ensayo
Aritmética informal ensayo
Verito Aldana D'Garcia
 
Euladis daniela
Euladis danielaEuladis daniela
Euladis daniela
lulitafierro
 
Ada 1
Ada  1Ada  1
Deportes extremos
Deportes extremosDeportes extremos
Deportes extremos
joaquincharco
 
Compartiendo la navidad
Compartiendo la navidad Compartiendo la navidad
Compartiendo la navidad
AndreayJoana
 
Autobiografía
AutobiografíaAutobiografía
Autobiografía
Verito Aldana D'Garcia
 
Derecho 1
Derecho 1Derecho 1
Derecho 1
mirna185
 
Gazette du 13 décembre 2011 au 26 janvier 2012
Gazette du 13 décembre 2011 au 26 janvier 2012Gazette du 13 décembre 2011 au 26 janvier 2012
Gazette du 13 décembre 2011 au 26 janvier 2012
Ciné-Club Atmosphères
 
Tecnologías del pasado y del presente
Tecnologías del pasado y del presenteTecnologías del pasado y del presente
Tecnologías del pasado y del presente
sebasquintero123
 
Sistema operativo Windows 8
Sistema operativo Windows 8Sistema operativo Windows 8
Sistema operativo Windows 8
AwmallyMartz
 
IMPORTANCIA DE LAS TIC´S - SOTTO
IMPORTANCIA DE LAS TIC´S - SOTTOIMPORTANCIA DE LAS TIC´S - SOTTO
IMPORTANCIA DE LAS TIC´S - SOTTO
Erick Sotto
 
Tutorial netvibes unidad 2
Tutorial netvibes unidad 2Tutorial netvibes unidad 2
Tutorial netvibes unidad 2
gabrielaamado20
 
Importancia de los canales de
Importancia de los canales deImportancia de los canales de
Importancia de los canales de
Sulma Salas Delgado
 
Presse au futur (1)
Presse au futur (1)Presse au futur (1)
Presse au futur (1)
Capra
 
Grand m avoir ou être
Grand m avoir ou êtreGrand m avoir ou être
Grand m avoir ou êtreÉric Rivest
 
Gazette du 12 octobre au 18 novembre 2010
Gazette du 12 octobre au 18 novembre 2010Gazette du 12 octobre au 18 novembre 2010
Gazette du 12 octobre au 18 novembre 2010
Ciné-Club Atmosphères
 
Resume de como hacer un blog muentes
Resume de como hacer un blog muentesResume de como hacer un blog muentes
Resume de como hacer un blog muentesEmelexiitap Beiapp
 
Presentation agilité et Scrum à Cocoaheads Toulouse
Presentation agilité et Scrum à Cocoaheads ToulousePresentation agilité et Scrum à Cocoaheads Toulouse
Presentation agilité et Scrum à Cocoaheads ToulouseLaurent MEURISSE
 
Les canadiens accros aux communications antoine trépanier, l'étoile.
Les canadiens accros aux communications   antoine trépanier, l'étoile.Les canadiens accros aux communications   antoine trépanier, l'étoile.
Les canadiens accros aux communications antoine trépanier, l'étoile.Pierre C. Bélanger
 
Slideshare2
Slideshare2Slideshare2
Slideshare2
SURIDF
 

En vedette (20)

Aritmética informal ensayo
Aritmética informal ensayo Aritmética informal ensayo
Aritmética informal ensayo
 
Euladis daniela
Euladis danielaEuladis daniela
Euladis daniela
 
Ada 1
Ada  1Ada  1
Ada 1
 
Deportes extremos
Deportes extremosDeportes extremos
Deportes extremos
 
Compartiendo la navidad
Compartiendo la navidad Compartiendo la navidad
Compartiendo la navidad
 
Autobiografía
AutobiografíaAutobiografía
Autobiografía
 
Derecho 1
Derecho 1Derecho 1
Derecho 1
 
Gazette du 13 décembre 2011 au 26 janvier 2012
Gazette du 13 décembre 2011 au 26 janvier 2012Gazette du 13 décembre 2011 au 26 janvier 2012
Gazette du 13 décembre 2011 au 26 janvier 2012
 
Tecnologías del pasado y del presente
Tecnologías del pasado y del presenteTecnologías del pasado y del presente
Tecnologías del pasado y del presente
 
Sistema operativo Windows 8
Sistema operativo Windows 8Sistema operativo Windows 8
Sistema operativo Windows 8
 
IMPORTANCIA DE LAS TIC´S - SOTTO
IMPORTANCIA DE LAS TIC´S - SOTTOIMPORTANCIA DE LAS TIC´S - SOTTO
IMPORTANCIA DE LAS TIC´S - SOTTO
 
Tutorial netvibes unidad 2
Tutorial netvibes unidad 2Tutorial netvibes unidad 2
Tutorial netvibes unidad 2
 
Importancia de los canales de
Importancia de los canales deImportancia de los canales de
Importancia de los canales de
 
Presse au futur (1)
Presse au futur (1)Presse au futur (1)
Presse au futur (1)
 
Grand m avoir ou être
Grand m avoir ou êtreGrand m avoir ou être
Grand m avoir ou être
 
Gazette du 12 octobre au 18 novembre 2010
Gazette du 12 octobre au 18 novembre 2010Gazette du 12 octobre au 18 novembre 2010
Gazette du 12 octobre au 18 novembre 2010
 
Resume de como hacer un blog muentes
Resume de como hacer un blog muentesResume de como hacer un blog muentes
Resume de como hacer un blog muentes
 
Presentation agilité et Scrum à Cocoaheads Toulouse
Presentation agilité et Scrum à Cocoaheads ToulousePresentation agilité et Scrum à Cocoaheads Toulouse
Presentation agilité et Scrum à Cocoaheads Toulouse
 
Les canadiens accros aux communications antoine trépanier, l'étoile.
Les canadiens accros aux communications   antoine trépanier, l'étoile.Les canadiens accros aux communications   antoine trépanier, l'étoile.
Les canadiens accros aux communications antoine trépanier, l'étoile.
 
Slideshare2
Slideshare2Slideshare2
Slideshare2
 

Similaire à Les bases du CSS3

CSS et CSS3
CSS et CSS3CSS et CSS3
CSS et CSS3
Voyelle Voyelle
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
Raphaël Goetter
 
Css cours avancé. Toute la base pour comprendre css.
Css cours avancé. Toute la base pour comprendre css.Css cours avancé. Toute la base pour comprendre css.
Css cours avancé. Toute la base pour comprendre css.
Lydoskikks
 
Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutant
TheBest Icanbe
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
 
initiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdfinitiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdf
EricKeita
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
RihabBENLAMINE
 
Cascade Style Sheets
Cascade Style SheetsCascade Style Sheets
Cascade Style Sheets
Mohamed Amine Samet
 
Atelier CSS ParisWeb 2007
Atelier CSS ParisWeb 2007Atelier CSS ParisWeb 2007
Atelier CSS ParisWeb 2007
Mammouthland
 
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
sellamimariem574
 
cours2-css.pdf
cours2-css.pdfcours2-css.pdf
cours2-css.pdf
RihabBENLAMINE
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Microsoft
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Raphaël Goetter
 
Html & Css #5 : positionement
Html & Css #5 : positionementHtml & Css #5 : positionement
Html & Css #5 : positionement
Jean Michel
 
CSS 3
CSS 3CSS 3
Les dessous de html+ccs+js
Les dessous de html+ccs+jsLes dessous de html+ccs+js
Les dessous de html+ccs+js
pixees Scienceparticipative
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
François-Guillaume Ribreau
 
web-css-mise-page-handout programmation.pdf
web-css-mise-page-handout programmation.pdfweb-css-mise-page-handout programmation.pdf
web-css-mise-page-handout programmation.pdf
bihinajacqueline
 

Similaire à Les bases du CSS3 (20)

CSS et CSS3
CSS et CSS3CSS et CSS3
CSS et CSS3
 
Html
HtmlHtml
Html
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
Css cours avancé. Toute la base pour comprendre css.
Css cours avancé. Toute la base pour comprendre css.Css cours avancé. Toute la base pour comprendre css.
Css cours avancé. Toute la base pour comprendre css.
 
Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutant
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
initiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdfinitiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdf
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
Cascade Style Sheets
Cascade Style SheetsCascade Style Sheets
Cascade Style Sheets
 
Atelier CSS ParisWeb 2007
Atelier CSS ParisWeb 2007Atelier CSS ParisWeb 2007
Atelier CSS ParisWeb 2007
 
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
 
cours2-css.pdf
cours2-css.pdfcours2-css.pdf
cours2-css.pdf
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
 
Html & Css #5 : positionement
Html & Css #5 : positionementHtml & Css #5 : positionement
Html & Css #5 : positionement
 
CSS 3
CSS 3CSS 3
CSS 3
 
Les dessous de html+ccs+js
Les dessous de html+ccs+jsLes dessous de html+ccs+js
Les dessous de html+ccs+js
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
web-css-mise-page-handout programmation.pdf
web-css-mise-page-handout programmation.pdfweb-css-mise-page-handout programmation.pdf
web-css-mise-page-handout programmation.pdf
 

Plus de Erwan Tanguy

Sendinblue freelance fair tour
Sendinblue freelance fair tourSendinblue freelance fair tour
Sendinblue freelance fair tour
Erwan Tanguy
 
Sendinblue : la plateforme française pour l'emailing et la newsletter
Sendinblue : la plateforme française pour l'emailing et la newsletterSendinblue : la plateforme française pour l'emailing et la newsletter
Sendinblue : la plateforme française pour l'emailing et la newsletter
Erwan Tanguy
 
Outils collaboratifs en formation
Outils collaboratifs en formationOutils collaboratifs en formation
Outils collaboratifs en formation
Erwan Tanguy
 
Automation et réseaux sociaux
Automation et réseaux sociauxAutomation et réseaux sociaux
Automation et réseaux sociaux
Erwan Tanguy
 
Meetup cssflip : shapes et clip-path
Meetup cssflip : shapes et clip-pathMeetup cssflip : shapes et clip-path
Meetup cssflip : shapes et clip-path
Erwan Tanguy
 
Automation : publier sur les réseaux sociaux quand on a pas le temps
Automation : publier sur les réseaux sociaux quand on a pas le tempsAutomation : publier sur les réseaux sociaux quand on a pas le temps
Automation : publier sur les réseaux sociaux quand on a pas le temps
Erwan Tanguy
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
Erwan Tanguy
 
Organiser une veille digitale
Organiser une veille digitaleOrganiser une veille digitale
Organiser une veille digitale
Erwan Tanguy
 
Slack
SlackSlack
Wordpress meetup
Wordpress meetupWordpress meetup
Wordpress meetup
Erwan Tanguy
 
Diigo – social bookmarking
Diigo – social bookmarkingDiigo – social bookmarking
Diigo – social bookmarking
Erwan Tanguy
 
Video social marketing et cv - les bases
Video social marketing et cv - les basesVideo social marketing et cv - les bases
Video social marketing et cv - les bases
Erwan Tanguy
 
Référencement naturel (SEO) - les bases
Référencement naturel (SEO) - les basesRéférencement naturel (SEO) - les bases
Référencement naturel (SEO) - les bases
Erwan Tanguy
 
Newsletters rwd
Newsletters rwdNewsletters rwd
Newsletters rwd
Erwan Tanguy
 
Extraire et trier des données en ligne 2015
Extraire et trier des données en ligne 2015Extraire et trier des données en ligne 2015
Extraire et trier des données en ligne 2015
Erwan Tanguy
 
Sociallymap didacticiel
Sociallymap   didacticielSociallymap   didacticiel
Sociallymap didacticiel
Erwan Tanguy
 
Animer un site web - web café
Animer un site web - web caféAnimer un site web - web café
Animer un site web - web café
Erwan Tanguy
 
Stratégie et veille : Extraire et trier des données en ligne
Stratégie et veille : Extraire et trier des données en ligneStratégie et veille : Extraire et trier des données en ligne
Stratégie et veille : Extraire et trier des données en ligne
Erwan Tanguy
 
Twitter
TwitterTwitter
Twitter
Erwan Tanguy
 
Google+ - présentation du média social
Google+ - présentation du média socialGoogle+ - présentation du média social
Google+ - présentation du média social
Erwan Tanguy
 

Plus de Erwan Tanguy (20)

Sendinblue freelance fair tour
Sendinblue freelance fair tourSendinblue freelance fair tour
Sendinblue freelance fair tour
 
Sendinblue : la plateforme française pour l'emailing et la newsletter
Sendinblue : la plateforme française pour l'emailing et la newsletterSendinblue : la plateforme française pour l'emailing et la newsletter
Sendinblue : la plateforme française pour l'emailing et la newsletter
 
Outils collaboratifs en formation
Outils collaboratifs en formationOutils collaboratifs en formation
Outils collaboratifs en formation
 
Automation et réseaux sociaux
Automation et réseaux sociauxAutomation et réseaux sociaux
Automation et réseaux sociaux
 
Meetup cssflip : shapes et clip-path
Meetup cssflip : shapes et clip-pathMeetup cssflip : shapes et clip-path
Meetup cssflip : shapes et clip-path
 
Automation : publier sur les réseaux sociaux quand on a pas le temps
Automation : publier sur les réseaux sociaux quand on a pas le tempsAutomation : publier sur les réseaux sociaux quand on a pas le temps
Automation : publier sur les réseaux sociaux quand on a pas le temps
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
 
Organiser une veille digitale
Organiser une veille digitaleOrganiser une veille digitale
Organiser une veille digitale
 
Slack
SlackSlack
Slack
 
Wordpress meetup
Wordpress meetupWordpress meetup
Wordpress meetup
 
Diigo – social bookmarking
Diigo – social bookmarkingDiigo – social bookmarking
Diigo – social bookmarking
 
Video social marketing et cv - les bases
Video social marketing et cv - les basesVideo social marketing et cv - les bases
Video social marketing et cv - les bases
 
Référencement naturel (SEO) - les bases
Référencement naturel (SEO) - les basesRéférencement naturel (SEO) - les bases
Référencement naturel (SEO) - les bases
 
Newsletters rwd
Newsletters rwdNewsletters rwd
Newsletters rwd
 
Extraire et trier des données en ligne 2015
Extraire et trier des données en ligne 2015Extraire et trier des données en ligne 2015
Extraire et trier des données en ligne 2015
 
Sociallymap didacticiel
Sociallymap   didacticielSociallymap   didacticiel
Sociallymap didacticiel
 
Animer un site web - web café
Animer un site web - web caféAnimer un site web - web café
Animer un site web - web café
 
Stratégie et veille : Extraire et trier des données en ligne
Stratégie et veille : Extraire et trier des données en ligneStratégie et veille : Extraire et trier des données en ligne
Stratégie et veille : Extraire et trier des données en ligne
 
Twitter
TwitterTwitter
Twitter
 
Google+ - présentation du média social
Google+ - présentation du média socialGoogle+ - présentation du média social
Google+ - présentation du média social
 

Les bases du CSS3

  • 1. Aperçu rapide du CSS et du CSS3 Ticoët l Communication culturelle Rozenn Tanguy - 06 78 00 37 02 - rozenn@ticoet.fr Erwan Tanguy – 06 62 15 11 02 – erwan@ticoet.fr
  • 2. CSS & CSS32 Principes des CSS 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)
  • 3. CSS & CSS33 CSS 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) 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)
  • 4. CSS & CSS34 CSS 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)
  • 5. CSS & CSS35 CSS 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.
  • 6. CSS & CSS36 CSS 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.)
  • 7. CSS & CSS37 CSS 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;". 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)
  • 8. CSS & CSS38 CSS 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 verticalement 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;") Pour le cas d’une image et d’un texte, il est possible aussi d’utiliser vertical-align. Exemple : <p><img src="image.jpg" alt= "mon image" /> Texte à aligner</p> Img{vertical-align:top;} -> Alignement haut de la boite parent avec la boite de la ligne. Vertical-align: baseline|length|sub|super|top|text- top|middle|bottom|text-bottom|initial|inherit; Voir :  http://www.w3schools.com/cssref/pr_pos_vertical-align.asp  http://www.alsacreations.com/astuce/lire/4-alignement- vertical-image-texte.html top middle bottom -100%
  • 9. CSS & CSS39 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
  • 10. CSS & CSS310 CSS 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;".
  • 11. CSS & CSS311 Les propriétés CSS3 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;}
  • 12. CSS & CSS312 Les propriétés CSS3 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
  • 13. CSS & CSS313 Les propriétés CSS3 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(). Navigateurs Préfixes Safari (webkit) -webkit- Firefox (mozilla) -moz- Opéra -o- Konqueror -khtml- IE (microsoft) -ms- Chrome -chrome- ou –webkit- Certaines propriétés ne sont pas complètement implantées. Vous devrez utiliser les préfixes pour chacun des navigateurs.
  • 14. CSS & CSS314 Les propriétés CSS3 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
  • 15. CSS & CSS315 Les propriétés CSS3 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
  • 16. CSS & CSS316 Les propriétés CSS3 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.colorzilla.com/gradient-editor/  http://www.westciv.com/tools/gradients/in dex-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)
  • 17. CSS & CSS317 Les propriétés CSS3 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
  • 18. CSS & CSS318 Les propriétés CSS3 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;} Les fonctions du timing :  Ease  Linear  Ease-in  Ease-out  Ease-in-out  Cubic-bezier
  • 19. CSS & CSS319 Les propriétés CSS3 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.
  • 20. CSS & CSS320 Les propriétés CSS3 Les Animations Les CSS3 permettent la mise en place d’animations assez avancées pouvant remplacer dans certains cas l’utilisation de javascript.  animation: nomdelanim linear 1s; -> Les fonctions définies dans « nomdelanim » se dérouleront sur 1 seconde en linear.  animation-iteration-count: x ou infinite; -> L’animation sera répétée x fois ou à l’infini.  @keyframes nomdelanim{ 0%{ transform: … } … 100%{ transform: … } } @keyframes <identifier> { [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]* } Les fonctions nommées dans un keyframe permet de donner les différentes étapes de l’animation sur le temps définit. 0% correspond au début et 100% à la fin. Il est possible de découper le temps en un nombre d’étapes assez important. Plus d’informations : https://developer.mozilla.org/fr/docs/Web/CSS/animation + exemples
  • 21. CSS & CSS321 Les propriétés CSS3 Les Animations Quelques outils en ligne :  http://cssanimate.com/ (+++)  https://coveloping.com/tools/css-animation-generator (+++)  http://www.css3maker.com/css3-animation.html ou http://css3gen.com/css3-animation/  http://westciv.com/tools/animations/ (+++)
  • 22. CSS & CSS322 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".
  • 23. 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 à ~)
  • 24. 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) Voir aussi http://css-tricks.com/how-nth-child-works/ 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
  • 25. Les pseudo-éléments Sélecteurs CSS Fonctions 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 https://developer.mozilla.org/fr/docs/Web/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
  • 26. Les pseudo-éléments Sélecteurs CSS Fonctions 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.
  • 27. CSS & CSS327 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.
  • 28. CSS & CSS328 Quelques liens  Tutoriels et démonstrations HTML5 et CSS3 http://www.html5-css3.fr/  http://www.yoyodesign.org/doc/w3c/css2/selector.html  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