Retourner à la page d'accueil de TJS

Script css : Exemples de l'annexe CSS

Tous les exemples de l'annexe CSS
Annexes / Chapitre 27 : Annexe CSS / Page 354

Exécution du script

Emulation de la console

Code source

<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-é;;ment ::after */a[target]::after {  content:url(media/url_icon.gif);  padding-left:5px;  }/* Pseudo-é;;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-é;;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é;; 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>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 12/11/2019 04:35:23 sur php7 en 40.53 ms