<html><head><title>Exemples de l'annexe CSS</title><style type="text/css">div.bloc { padding:5px; margin:5px; border:1px solid #000; border-radius: 5px; background-color:#fff; color:#000; text-align: center;}div#survol:hover { background-color:#000; color:#fff;}/* pseudo-classes :first-child et :last-child */ul.groupe { display:inline-block; padding:0px; margin:10px;}ul.groupe li { display:inline-block; padding:5px; margin:0px; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000;}ul.groupe li:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }ul.groupe li:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right:1px solid #000;}/* Transition sur les LI */ul.groupe li { background-color:#fff; color:#000; transition-property: background-color, color; transition-duration: 0.5s, 0.5s; }ul.groupe li:hover { background-color:#000; color:#fff;}/* Pseudo-é;lé;ment ::after */a[target]::after { content:url(media/url_icon.gif); padding-left:5px; }/* Pseudo-é;lé;ment avec Fontawesome */a.external::after { content:"f35d"; font-family:"Font Awesome 5 Free"; padding-left:5px; font-weight:900; display: inline-block; color:#aaa;}/* Explications des pointes en CSS */div#pointe { margin:20px; display: inline-block; border-width: 100px; border-style: solid; border-left-color: #00f; /* A gauche : bleu */ border-top-color: #fff; /* En haut : blanc */ border-right-color: #f00; /* A droite : rouge */ border-bottom-color: #000; /* En bas : noir */}/* Pseudo-é;lé;ment pour boî;te à; fleche */div.infobulleJS { position:absolute; padding:3px; margin:0px; border:1px solid #000; background: #ccc; color:#000; box-shadow: 3px 3px 3px #000; max-width:200px;}div.infobulleJS::before { position:absolute; bottom:100%; left:50%; content:" "; border-width:8px; margin-left:-16px; border-style:solid; border-color:transparent; border-bottom-color:#000;}div.infobulleJS::after { position:absolute; bottom:100%; left:50%; margin-left:-15px; content:" "; border-width:7px; border-style:solid; border-color:transparent; border-bottom-color:#ccc;}/* Transformations CSS */div.translate { transform: translate(50px, -10px);}div.rotate { transform: rotate(10deg); }div.scale { transform: scale(1.2); }div.skew { transform: skew(30deg, 5deg);}div.matrix { transform: matrix(0.9,0.5,0.1,1,150,0);}div.rotate3d { transform: rotate3d(0, 1, 0, 160deg);}/* L'impact de transform-origin */div.carre#center { transform-origin: center; transform: rotate(30deg);} div.carre#topleft { transform-origin: top left; transform: rotate(30deg);}div.carre#moins50 { transform-origin: -50px 50px; transform: rotate(30deg);}/* Animation de transform */div#animationRotate { animation: rotate 1s linear infinite;}div#animationRotateAlternate { animation: rotate 1s ease-in-out alternate infinite;}@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}div#animationBump { animation: bump 0.5s ease alternate infinite;}@keyframes bump { from { transform: translate(-50px, 0); } to { transform: translate(50px, 0); }}div#animation3D { animation: rotate3 1s linear alternate infinite;}@keyframes rotate3 { from { transform: rotate3d(0, 1, 0, 0deg);; } to { transform: rotate3d(0, 1, 0, 180deg);; }}/* Proprié;té; Z-index */div.containZIndex { position:relative; border:1px solid #999; background: #ccc; height:300px;}div.containZIndex div { position:absolute; width:150px; height:150px; line-height: 100px; text-align: center; color:#fff; border:2px solid #000; font-size:22px;}div.containZIndex #zindex1 { left:170px; top: 10px; z-index:1; background: #900;}div.containZIndex #zindex2 { left:80px; top: 30px; z-index:2; background: #009;}div.containZIndex #zindex3 { left:30px; top: 110px; z-index:3; background: #090;}div.containZIndex #zindex4 { left:150px; top: 140px; z-index:4; background: #909;}/* Pastille CSS */div.pastille { display:inline-block; width:30px; height:30px; line-height: 30px; text-align: center; background: #d00; color:#fff; font-size:20px; font-weight: bold; border:1px solid #000; border-radius: 50%;}/* Clip-path */#clipCircle { clip-path: circle(33% at 65% 65%); -webkit-clip-path: circle(33% at 65% 65%);}#clipEllipse { clip-path: ellipse(20% 40% at 60% 60%); -webkit-clip-path: ellipse(20% 40% at 60% 60%);}#clipPolygon { clip-path: polygon(40% 40%, 90% 40%, 90% 90%, 40% 90%); -webkit-clip-path: polygon(40% 40%, 90% 40%, 90% 90%, 40% 90%); }/* Simple mises en forme de la page */h2 { color:#9600c4; }h2::before { content:"f091"; font-family:"Font Awesome 5 Free"; padding-right:5px; font-weight:900; display: inline-block; }div.transform { display:block; margin:20px; padding:20px; border:1px solid #666; font-family: courier new; width:320px; font-size:13px; font-weight:bold; color:#090; background-color: #ddd;}div.containCarre { display:table-cell; width:150px; padding:50px; margin:10px; text-align: center; vertical-align: top;}div.containCarre div.transformOrigin { color:#000; font-family: courier new; font-weight:bold; color:#090; font-size:12px; margin:auto; margin-bottom:25px; }div.containCarre div.carre { background-color:#9600c4; width:100px; height:100px; color:#fff; line-height:55px; text-align:center; margin-left: auto; margin-right: auto;}div.containCarre div.carreFixe { position:relative; top:-100px; left:0px; width:100px; height:100px; border:4px dotted #696; margin-left: auto; margin-right: auto;}div.containCarre div.pointerOrigine { position:absolute; top:-10px ; left:-10px; color:#090; font-size:20px;}div.containAnimation { display:table-cell; width:200px; padding:10px; margin:10px; text-align: center; vertical-align: top; color:#ff6700; font-size:100px;}div.containAnimation div.transformAnimation { color:#000; font-family: courier new; font-weight:bold; color:#090; font-size:12px; margin:auto; margin-bottom:25px; }div.containClip { display:table-cell; width:110px; padding:10px; margin:10px; text-align: center; vertical-align: top; color:#ff6700; font-size:100px;}div.containClip div.clip-path { color:#000; font-family: courier new; font-weight:bold; min-height: 36px; color:#090; font-size:12px; margin:auto; margin-bottom:0px; }div.css { color:#000; font-family: courier new; font-weight:normal; color:#090; font-size:12px; margin:auto; margin-bottom:6px; }p { padding:0px; margin-top:5px; margin-bottom: 20px; }p.info::before { content:"f05a"; font-family:"Font Awesome 5 Free"; padding-right:5px; font-weight:900; display: inline-block; }img.logojs { width:100px; height:100px;}</style></head><body> <h1>Tous les exemples de l'annexe CSS</h1><h2>Les effets de survol avec :hover</h2><div class="css"><pre>div#survol:hover { background-color:#000; color:#fff;}</pre></div><div id="survol" class="bloc">Survolez ce bloc pour voir l'effet :hover </div><h2>Les pseudo-classes :first-child et :last-child</h2><div class="css"><pre>ul.groupe { display:inline-block; padding:0px; margin:10px;}ul.groupe li { display:inline-block; padding:5px; margin:0px; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000;}ul.groupe li:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }ul.groupe li:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right:1px solid #000;}</pre></div><ul class="groupe"><li>Football</li><li>Handball</li><li>Rugby</li><li>Aqua-poney</li><li>Bière-pong</li></ul><h2>Les transitions</h2><div class="css"><pre>ul.groupe li { background-color:#fff; color:#000; transition-property: background-color, color; transition-duration: 0.5s, 0.5s; }ul.groupe li:hover { background-color:#000; color:#fff;}</pre></div><ul class="groupe"><li>Passez</li><li>votre</li><li>souris</li><li>sur</li><li>les</li><li>éléments</li></ul><h2>Les pseudo-éléments ::before et ::after</h2><div class="css"><pre>/* Pseudo-élément ::after */a[target]::after { content:url(media/url_icon.gif); padding-left:5px; }</pre></div><p><a href="https://fontawesome.com/" target="_blank">Ouvrir le site officiel de FontAwesome</a></p><div class="css"><pre>/* Pseudo-élément avec Fontawesome */a.external::after { content:"f35d"; font-family:"Font Awesome 5 Free"; padding-left:5px; font-weight:900; display: inline-block; color:#aaa;}</pre></div><p><a href="https://fontawesome.com/" class="external" target="_blank">Ouvrir le site officiel de FontAwesome</a></p><h2>Construction d'une boîte fléchée</h2><div class="css"><pre>div#pointe { margin:20px; display: inline-block; border-width: 100px; border-style: solid; border-left-color: #00f; /* A gauche : bleu */ border-top-color: #fff; /* En haut : blanc */ border-right-color: #f00; /* A droite : rouge */ border-bottom-color: #000; /* En bas : noir */}</pre></div><div id="pointe"></div><p><a href="http://tjs.ovh/infobulle" class="external" target="_blank">Ouvrir l'exemple info-bulle</a></p><div class="infobulleJS">Une infobulle de démo</div><br><br><h2>Les transformations CSS</h2><div class="transform translate"> transform: translate(50px, -10px);</div><div class="transform rotate"> transform: rotate(10deg);</div><div class="transform scale"> transform: transform: scale(1.2);</div><div class="transform skew"> transform: skew(30deg, 5deg);</div><div class="transform matrix"> transform: matrix(0.9,0.5,0.1,1,150,0);;</div><div class="transform rotate3d"> transform: rotate3d(0, 1, 0, 160deg);</div><h2>Les transformations CSS en fonction du repère d'origine</h2><div class="containCarre"> <div class="transformOrigin">transform-origin: center</div> <div class="carre" id="center">Rotation 30°</div> <div class="carreFixe"><div class="pointerOrigine" style="left:40px; top:40px;"><i class="fas fa-crosshairs"></i></div></div> </div><div class="containCarre"> <div class="transformOrigin">transform-origin: top left</div> <div class="carre" id="topleft">Rotation 30°</div> <div class="carreFixe"><div class="pointerOrigine"><i class="fas fa-crosshairs"></i></div></div></div><div class="containCarre"> <div class="transformOrigin">transform-origin: -50px 50px</div> <div class="carre" id="moins50">Rotation 30°</div> <div class="carreFixe"><div class="pointerOrigine" style="left:-60px; top:40px;"><i class="fas fa-crosshairs"></i></div></div></div><div style="clear:both"></div><h2>Les animations sur les transformations</h2><div class="css"><pre>@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes bump { from { transform: translate(-50px, 0); } to { transform: translate(50px, 0); }}@keyframes rotate3 { from { transform: rotate3d(0, 1, 0, 0deg);; } to { transform: rotate3d(0, 1, 0, 180deg);; }}</pre></div><div class="containAnimation"> <div class="transformAnimation">animation: rotate 1s linear infinite</div> <div id="animationRotate"><i class="fab fa-bitcoin"></i></div> </div><div class="containAnimation"> <div class="transformAnimation">animation: rotate 1s ease-in-out alternate infinite</div> <div id="animationRotateAlternate"><i class="fab fa-bitcoin"></i></div></div><div class="containAnimation"> <div class="transformAnimation">animation: bump 0.5s ease alternate infinite</div> <div id="animationBump"><i class="fab fa-bitcoin"></i></div></div><div class="containAnimation"> <div class="transformAnimation"> animation: rotate3 1s linear alternate infinite;</div> <div id="animation3D"><i class="fab fa-bitcoin"></i></div></div><div style="clear:both"></div><h2>Les empilements avec z-index</h2><p>Plus la propriété z-index est élévée, plus l'élément se rapproche du premier plan</p><div class="containZIndex"> <div id="zindex1">z-index:1</div> <div id="zindex2">z-index:2</div> <div id="zindex3">z-index:3</div> <div id="zindex4">z-index:4</div> </div><h2>Pastilles rondes en CSS</h2><p>Une pastille devient ronde avec un border-radius de 50%</p><div class="css"> <pre>div.pastille { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background: #d00; color: #fff; font-size:20px; font-weight: bold; border: 1px solid #000; border-radius: 50%;}</pre></div><div class="pastille">1</div><div class="pastille">2</div><div class="pastille">3</div><div class="pastille">4</div><div class="pastille">5</div><h2>Zones de rognage du contenu avec clip-path</h2><p class="info">Pour Safari, il faut dupliquer la propriété avec -webkit-clip-path</p><p class="info">Ne fonctionne pas avec Internet Explorer</p><div class="containClip"> <div class="clip-path">clip-path:none<br></div> <div id="clipNone"><img class="logojs" src="media/logo-js.png" /></div></div><div class="containClip"> <div class="clip-path">clip-path: circle(33% at 65% 65%);</div> <div><img class="logojs" src="media/logo-js.png" id="clipCircle"/></div></div><div class="containClip"> <div class="clip-path">clip-path: ellipse(20% 40% at 60% 60%);</div> <div id="clipEllipse"><img class="logojs" src="media/logo-js.png" /></div></div><div class="containClip"> <div class="clip-path">clip-path:polygon(40% 40%, 90% 40%, 90% 90%, 40% 90%)</div> <div id="clipPolygon"><img class="logojs" src="media/logo-js.png" /></div></div><div style="clear:both"></div><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"></body></html>
Edition 1 | Chapitre 27 : Annexe CSS / Page 354
Edition 2 | Chapitre 30 : Annexe CSS / Page 423
Edition 3 | Chapitre 30 : Annexe CSS / Page 423
En savoir plus
