INF2005– Programmation web– A. Obaid CCS 3

INF2005– Programmation web– A. Obaid 2 L'état d'implantation de CSS 3 Le standard de CSS 3 n'est pas très avancé Plusieurs implantations différentes existent dépendant du navigateur Pour chaque navigateur et chaque propriété CSS3, on doit utiliser un préfixe spécial: – -moz--border-bottom-colors : Mozilla, Safari – -webkit- moz-border-bottom-colors : standard – -o-border-bottom-colors: Opéra

INF2005– Programmation web– A. Obaid 3 Les coins arrondis Pour éviter l'usage d'images multiples On a introduit des styles pour les coins des objets en utilisant les courbures des lignes des bordures. On peut spécifier les ronds pour certains coins seulement: – -moz-border-radius-topleft, -webkit-border-top-left-radius, -moz- border-radius-topright, -webkit-border-top-right-radius Ceci est un pargraphe.rond { background-color: #666; color: #fff; line-height: 20px; width: 200px; padding: 10px; bordre-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } css3_1.html radius.html radius_2.html Rayon Horizontal (20) Rayon Certical (40) border-radius: 20px 40px ; border-top-right-radius: 20px 40px ;

INF2005– Programmation web– A. Obaid 4 Les bordures On peut utiliser des images pour dessiner des bordures avec border-image. On peut aussi utiliser une image pour chaque coin ou côté. On peut également spécifier des gradients de coulures pour les bordures. coleurdeBordure{ border: 8px solid #000; -moz-border-bottom-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc; -moz-border-top-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc; -moz-border-left-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc; -moz-border-right-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc; width:200px; } css3_5.html border_color.html

INF2005– Programmation web– A. Obaid 5 Le images de bordure Au lieu de trait, on peut utiliser des images avec la propriété: – border-image, border-top-image, etc. #boite { border: 30px solid transparent; padding: 20px; width: 200px; height: 200px; border-image: url(bordure3.png) round; } border-image.html

INF2005– Programmation web– A. Obaid 6 Les colonnes multiples On peut formater un objet sous forme de plusieurs colonnes On peut soit spécifier la largeur de chaque colonne ou en spécifient le nombre de ces colonnes..blocPc { -moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em; }.blocPc { -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black; } css3_2.html

INF2005– Programmation web– A. Obaid 7 Les ombres On peut spécifier des ombres pour les éléments (boites, textes, images, etc.) text-shadow ajoute une ombre à chaque lettre d'un texte. – text-shadow: n1 n2 [n3] couleur n1 désigne le décalage de l'ombre vers la droite. n2 désigne le décalage de l'ombre vers le bas. n3 désigne le flou de l'ombre Les nombre n1 et n2 auvent être négatifs. box-shadow désigne l'ombre des boites.,,,,, #ombre { text-shadow: 2px 2px 2px #FF3333 ; 3px 3px 2px #eee; } css3_7.html #Exemple1 { -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; } texte.html

INF2005– Programmation web– A. Obaid 8 Opérations de transformation 2D rotate(n deg): rotation de n degrés (n peut être négatif). translate(nX, nY): déplacement par rapport à la position courante (nX: left, nY: top) scale(x,y): mise à l'échelle des valeurs x (horizontalement) et y (verticalement) skew(nX, nY): tourne l' element de nX (angle de X) et nY (angle des Y) On peut les combiner pour un seul élément transform2.html transform: skew(45deg) scale(1.5,1.5) translate(20px, 100px) rotate(30deg);

INF2005– Programmation web– A. Obaid 9 Opérations de transformation 3D Les propriétés rotateX() et rotate(Y) permettent de faire des rotation 3D. – rotateX(n deg): faire une rotation de n degrés suivant l'axe des X. – rotateY(n deg): faire une rotation de n degrés suivant l'axe des Y. – rotateZ(n deg): faire une rotation de n degrés suivant l'axe des Z. #boite1 { transform: rotateX(130deg);} transform3.html

INF2005– Programmation web– A. Obaid 10 Transitions 3D On peut ajouter des règles de transition spécifiques au 3D avec : – propriéte utilisée, durée de la taransition (en sec.), vitesse (lineaire, etc.), début de la transition. – transition: spécifie ces 4 propriétés de transition. – Exemple: Pour effectuer une transition sur la couleur d'un élément, on utilise la transition transition: color 3sec linear

INF2005– Programmation web– A. Obaid Transitions 3D #contenu { border: 2px solid blue; height: 240px; width: 40%; } #contenu div { transition: all 2s linear; width: 100px; float: left; border: 2px solid red; margin: 20px; } #contenu:hover #boite1 { transform:rotateX(180deg); } #contenu:hover #boite2 { transform:rotateY(180deg); } #contenu:hover #boite3 { transform:rotateZ(180deg); } transitions2.html div { width:200px; height:100px; background: yellow; border: 2px solid red; //transition:width 2s linear; //transition:background 2s linear; transition:all 2s linear; } div:hover { width: 100px; height: 200px; background: blue; } transitions3.html

INF2005– Programmation web– A. Obaid 12 Les animation On peut nommer les propriétés d'animation et les appeler et la propriété couleutFond{ from {background: yellow;} to {background: red;} fondOpaque { 0%{background: yellow;} 100 {background: red;} } #contenu { animation: fondOpaque 10s; } keyframes.html

INF2005– Programmation web– A. Obaid 13 Les animations On peut utiliser des jalons pour couleutFond{ 0%{background: yellow;} 25%{background: red;} 50%{background: blue;} 75% {background: green;} 100% {background: yellow;} } #contenu { animation: couleutFond 10s; } keyframes1.html Source:

INF2005– Programmation web– A. Obaid 14 L'opacité On peut spécifier le degré d'opacité des images avec les propriétés : – -moz-opacity: 0.n – filters.alpha.opacity: n; <ing src="vache.jpg" style="-moz-opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" > css4_2.html transition4.html

INF2005– Programmation web– A. Obaid 15 Images de background On peut spécifier des backgrounds (multiples) pour des éléments avec l'attribut background- image. div { background-image: url(vache.jpg), url(chameau.jpg); } css3_8.html