<!-- Slide number: 1 -->
 # CSS3 OUALI Mohamed
<!-- Slide number: 2 --> # Sélecteurs, propriétés et valeurs Un sélecteur détermine à quel élément un style doit être appliqué. Une propriété détermine le style qui va être appliqué à un élément. Une valeur détermine le comportement d’une propriété.
Sélecteur p { color : blue; font-size : 16px; } Valeurs Propriétés
<!-- Slide number: 3 --> # Où écrire le CSS? 3 possibilités : Dans la balise ouvrante d’un élément Dans l’élément HEAD du document HTML Dans un fichier CSS séparé Pour lier un fichier HTML avec un fichier CSS, on écrit :
<link rel="stylesheet" href="fichier.css" />
<!-- Slide number: 4 --> # Les sélecteurs Un sélecteur détermine à quel élément un style doit être appliqué. Un sélecteur universel (sélectionne tous les éléments) : * Un sélecteur peut être : Un élément HTML : body, p, a, h1, etc. Une classe : (on ajoute un point « . » au début du nom de la classe) Un identifiant : (on ajoute un dièze (croisillon) « # » au début du nom de l’identifiant)
<!-- Slide number: 5 --> # Les sélecteurs avancés Il est possible de combiner les sélecteurs pour cibler précisément du contenu. Appliquer un style aux éléments A et B: A, B {propriété : valeur;} Sélectionner un élément B contenu dans A: A B {propriété : valeur;} Sélectionner le premier élément B suivant un élément A: A + B {propriété : valeur;}
<!-- Slide number: 6 --> # Les sélecteurs avancés Sélectionner tous les éléments C possédant un attribut en particulier: C[attribut] {propriété : valeur;} Sélectionner tous les éléments D possédant un attribut en particulier et une valeur exactement: D[attribut="valeur"] {propriété : valeur;} Sélectionner tous les éléments E possédant un attribut en particulier et une valeur: E[attribut*="valeur"] {propriété : valeur;}
<!-- Slide number: 7 --> # Les sélecteurs avancés Sélectionner le dernier enfant, indépendamment du type de son parent: C:nth-last-child () {propriété : valeur;}
Sélectionner le premier enfant, indépendamment du type de son parent: C:nth-first-child () {propriété : valeur;}
<!-- Slide number: 8 --> # Les sélecteurs avancés Sélectionner le nième enfant, indépendamment du type de son parent: C:nth-child (n) {propriété : valeur;} n peut être un nombre (cible un seul enfant) un mot clé : odd, even une formule : (an + b) La formule (an + b) a : une taille de cycle n : un compteur (commence à partir de 0) b : une valeur de décalage.
<!-- Slide number: 9 --> # Les sélecteurs avancés Pour chaque entier supérieur ou égal à 0, je remplace la valeur de n et je trouve les éléments sélectionnés.
Ainsi, 2n+2 nous donne 2*0+2=2, 2*1+2=4, 2*2+2=6 et ainsi de suite.
Par exemple, 8n-3 nous donne : 8*0-3=-3, 8*1-3=5, 8*2-3=13, etc. Les 5e, 13e, 21e, ... enfants seront ciblés. p:nth-child(3n+0) { background: #ff0000;} li:nth-child(n+6) { color: green; } Multiple de 3 A partir du 6ème
<!-- Slide number: 10 --> # Les sélecteurs avancés Les pseudo-éléments :after et :before permettent d’ajouter du contenu directement après ou directement avant un élément. Les pseudo-éléments doivent être utilisés avec la propriété content. Cette propriété permet de spécifier le contenu qui est inséré. h1::before{ content: "Titre:" ; }
<!-- Slide number: 11 --> # L’héritage Les éléments en HTML « héritent » des styles de leurs parents. D’où le « cascading » de CSS. En cas de conflit, le style le plus proche de l’élément en question sera appliqué.
<!-- Slide number: 12 --> # Le modèle des boites Tout élément d’une page est une boite rectangulaire et peut avoir : Un padding Une marge Des bordures
<!-- Slide number: 13 --> # MARGIN & PADDING La propriété margin permet de définir la taille de l’espace entourant l’élément. Elle peut être utilisée pour positionner des éléments.
La propriété padding permet de définir la marge intérieure (à l’intérieur des bordures) d’un élément. Elle ne doit pas être utilisée pour positionner des éléments.
<!-- Slide number: 14 --> # Les bordures On peut créer des bordures et les personnaliser grâce aux propriétés : border-width border-style border-color Nouveauté : border-radius : pour des coins arrondis Et ses dérivés : border-top-left-radius, etc.
<!-- Slide number: 15 --> # Les couleurs et la transparence On utilise la propriété color color : valeur textuelle (nom de la couleur) color : un code couleur (#code en hexadécimal) color : rgb(vr,vv,vb)
<!-- Slide number: 16 --> # Les couleurs et la transparence Pour la transparence, on a 2 méthodes : La propriété opacity (une valeur entre 0 et 1) La fonction de couleur rgba(vr, vv, vb, opacité)
<!-- Slide number: 17 --> # Les ombres des boîtes (box-shadow) Pour créer des ombres autour des boîtes, on utilise la propriété box-shadow Cette propriété a besoin de 4 valeurs : La 1ère : le décalage horizontal de l’ombre La 2ème : le décalage vertical de l’ombre La 3ème : le flou gaussien de l’ombre (la force du dégradé) La 4ème : la couleur de l’ombre Remarque : la même logique peut s’appliquer à un texte en utilisant la propriété text-shadow
Publicité
<!-- Slide number: 18 --> # Les ombres des boîtes (box-shadow) Exemple : img { box-shadow: 8px 8px 0px #aaa; } img { box-shadow: 8px 8px 12px #aaa; }
<!-- Slide number: 19 --> # Les coins arrondis (border-radius) Pour créer des créer facilement des coins arrondis. #img1 { border-radius:25%; box-shadow: 8px 8px 0px #aaa; } #img3 { border-radius:100%; box-shadow: 8px 8px 0px #aaa; } #img2 { border-top-left-radius: 10%; border-bottom-right-radius: 10%; box-shadow: 8px 8px 12px #aaa; }
<!-- Slide number: 20 --> # Fond en dégradé Deux types de dégradés : Dégradé linéaire (linear) Radial (radial) Préfixes vendeurs pour les dégradés : Chrome et safari : -webkit- Mozilla Firefox : -moz- Internet Explorer : -ms- Opera : -o-
<!-- Slide number: 21 --> # Fond en dégradé (linear) La valeur linear-gradient() de la propriété : background
background : linear-gradient (liste de couleurs); Exemple 1:
 body { background: linear-gradient(blue, white); }
<!-- Slide number: 22 --> # Fond en dégradé (linear) On peut ajouter plusieurs couleurs
background : linear-gradient (liste de couleurs); Exemple 3:
 body { background: linear-gradient(blue, white, red); }
<!-- Slide number: 23 --> # Fond en dégradé (linear) On peut ajouter la direction du dégradé
background : linear-gradient (direction, liste de couleurs); Directions : to left, to right, to top, to bottom To top right, to top left, etc.
 Exemple 2:
body { background: linear-gradient(to right, blue, white); }
<!-- Slide number: 24 --> # Fond en dégradé (linear) On peut utiliser les degrès pour la direction du dégradé
background : linear-gradient (degré, liste de couleurs);
 Exemple 3:
body { background: linear-gradient(50deg, blue, white, red); }
<!-- Slide number: 25 --> # Fond en dégradé (radial) La valeur radial-gradient() de la propriété : background background : radial-gradient (liste de couleurs);
 Exemple 3:
body { background: radial-gradient(blue, white, red); }
<!-- Slide number: 26 --> # Fond en dégradé (radial) On peut des pourcentages pour chaque couleur
background : radial-gradient (couleur1 %, couleur2%, …);
 Exemple 3:
body { background: radial-gradient(blue 50%, white 10%, red); }
<!-- Slide number: 27 --> # Fond en dégradé (radial) On peut spécifier l’origine du rayon
Publicité
background : radial-gradient (rayonX rayonY, liste de couleurs);
 Exemple 3:
body { background: -moz-radial-gradient(0 0, blue , white , red) }
<!-- Slide number: 28 --> # L’arrière-plan image Les types d’images Jpeg (ou jpg) : pour les photographies Png : pout tout autre type d’images (pour la transparence) Gif : pour les images animées Bitmap : à éviter absolument
<!-- Slide number: 29 --> # L’arrière-plan image Pour insérer un image : On utilise l’élément img à l’intérieur d’un élément de type block (p, div, etc). On a besoin d’au moins 2 attributs pour l’élément img src : source de l’image alt : un message à afficher lorsque l’image ne s’affiche pas On peut aussi utiliser l’attribut title pour afficher un texte au survol de la souris
<!-- Slide number: 30 --> # L’arrière-plan image On utilise la propriété : background-image Ainsi que des propriétés annexes : background-repeat background-position background-attachment (fixed, scroll)
<!-- Slide number: 31 --> # Polices "exotiques " (@font-face) La propriété @font-face de CSS3 permet d'afficher une police exotique (personnelle ou non standard) embarquée sur le serveur. @font-face { font-family: 'mapolice'; src: url('pacifico-webfont.eot'); src: url('pacifico-webfont.eot?#iefix') format('embedded-opentype'), url('pacifico-webfont.woff2') format('woff2'), url('pacifico-webfont.woff') format('woff'), url('pacifico-webfont.ttf') format('truetype'), url('pacifico-webfont.svg#pacificoregular') format('svg'); }
h1 { font-family:mapolice; }
<!-- Slide number: 32 --> # Transformations On utilise la propriété : transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique.
transform: function(value); Elle possède les valeurs suivantes: rotate() pour la rotation scale() pour les zooms translate() pour les décalages skew() matrix() pour les déformations
<!-- Slide number: 33 --> # Transformations La propriété transform-origin Pour pouvoir appliquer des transformations, nous avons besoin de savoir quel est le point d'origine (d'ancrage) de la transformation. La valeur initiale de cette propriété est le centre de l'élément, ce qui équivaut à la notation transform-origin: 50% 50%; Il est possible de changer cette valeur en utilisant un mot-clef de position (top, right, bottom, left) suivi d'une valeur chiffrée dont l'unité peut varier (px, %, etc.)
 div { transform-origin: top 0 left 0; transform: scale(1.25); }
<!-- Slide number: 34 --> # Transformations rotate() permet d'effectuer une rotation de l'élément ciblé
La valeur x s'exprime en degrés (unité deg) transform: rotate(x);
<!-- Slide number: 35 --> # Transformations rotate() - exemple
 #bloc { width:100px; height:100px; background-color:#099; margin:100px 0 0 100px;
-webkit-transform:rotate(25deg); -moz-transform:rotate(25deg); -ms-transform:rotate(25deg); -o-transform:rotate(25deg); transform:rotate(25deg); }
<!-- Slide number: 36 --> # Transformations scale() permet d'agir sur l'échelle (les dimensions) de l'élément
La valeur y est optionnelle et sera égale à la valeur de x si elle est non renseignée. transform: scale(x,y);
<!-- Slide number: 37 --> # Transformations scale() - exemple transform: scale(1.25) Avant redimensionnement Après redimensionnement
<!-- Slide number: 38 --> # Transformations translate() Elle permet d'effectuer une translation (un déplacement) de l'élément sur les axes X et Y.
y est une valeur optionnelle équivalente à 0 si elle n'est pas renseignée. Les deux valeurs peuvent être négatives. transform: translate(x,y);
Publicité
<!-- Slide number: 39 --> # Transformations translate() - exemple transform: translate(30px,45px) Avant transaltion Après transaltion
<!-- Slide number: 40 --> # Transformations skew() permet d'obliquer la forme d'un élément.
transform: skew(x, y);
<!-- Slide number: 41 --> # Transformations La fonction "absolue" matrix() permet de réunir en une seule déclaration toutes les fonctions précédentes. prend six paramètres, contenant des fonctions mathématiques, qui vous permet : la rotation, la mise en échelle, le déplacement (traduisez), et l'inclinaison des éléments.
http://www.useragentman.com/matrix/
<!-- Slide number: 42 --> # Transitions Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché : soit via une pseudo-classe telles que :hover, :focus ou :active soit via JavaScript Pour définir une nouvelle transition animée, il est nécessaire de préciser au minimum : La ou les propriété(s) à animer La durée de l'animation
<!-- Slide number: 43 --> # Les propriétés de transition CSS | Propriété | Explication | | --- | --- | | transition-property | Précise les propriétés CSS à transformer | | transition-duration | Précise la durée de la transition | | transition-timing-function | Précise la fonction de transition à utiliser, le modèle d'interpolation (accélération, décélération...) | | transition-delay | Précise le retard (ou l'avance) du départ de la transition |
<!-- Slide number: 44 --> # Les propriétés de transition CSS La propriété transition-property permet de définir quelles propriétés seront affectées par les transitions transition-property: valeur; | Valeur | Explication | | --- | --- | | all | (Valeur par défaut) Toutes les propriétés animables seront animées | | property | Liste de propriétés séparées par des virgules | | none | Aucune propriété ne sera animée | Exemple a { transition-property: color, font-size; }
<!-- Slide number: 45 --> # Les propriétés de transition CSS La propriété transition-duration permet de préciser la durée de la transition Les valeurs acceptées sont des valeurs de temps Les deux unités de temps définies en CSS sont : s : la seconde ms : la milliseconde transition-duration : durée; Exemple a { transition-property: color, font-size; transition-duration: 2s; }
<!-- Slide number: 46 --> # Les propriétés de transition CSS La propriété transition-timing-function Pour calculer les valeurs intermédiaires, le navigateur procède à une interpolation. La fonction calculant la valeur de cette interpolation influence directement la fluidité de l'animation Les fonctions prédéfinies sont les suivantes : ease : Rapide sur le début et ralenti sur la fin. linear : La vitesse est constante sur toute la durée de l'animation. ease-in : Lent sur le début et accélère de plus en plus vers la fin. ease-out : Rapide sur le début et décèlere sur la fin. ease-in-out : Le départ et la fin sont lents.
<!-- Slide number: 47 --> # Les propriétés de transition CSS
<!-- Slide number: 48 --> # Les propriétés de transition CSS La propriété transition-delay La transition commence, par défaut, dès que la propriété est changée suite à l'événement. La propriété transition-delay permet d'adapter ce comportement en retardant ou en avançant le début de la transition. Exemple a { transition-property: color, font-size; transition-duration: 2s; }
<!-- Slide number: 49 --> # Les propriétés de transition CSS Exemple 1 avec javascript a { transition-property : color, font-size; transition-duration : 2s; transition-timing-function : ease-out; transition-delay : 1s; }
a:hover { color : red; font-size : 28px; }
<!-- Slide number: 50 --> # Les propriétés de transition CSS Exemple 2 sans javascript #div2 { width:100px; height:100px; background:#0FF; transition:width 2s, height 2s, transform 2s; }
#div2:hover { width:200px; height:200px; transform:rotate(180deg); }
<!-- Slide number: 51 --> # Les propriétés de transition CSS Exemple avec javascript <button onClick="demarrer()">Démarrer</button>
<div id="div1"> #div1 { width:150px; border: 1px solid black; background-color:rgba(195,192,237,1.00); } function demarrer() { var box = document.getElementById('div1'); box.style.transitionDuration = "2s"; box.style.width = "300px"; }
<!-- Slide number: 52 --> # Les propriétés de transition CSS La notation raccourcie transition Cette notation permet de décrire facilement et de manière concise les différentes propriétés en jeu à l'aide d'une seule propriété. La syntaxe est la suivante selecteur { transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>; }