Pourquoi entends t'on beaucoup parler de CSS3?
Oui! Mais comment?
Pour cela:
-webkit-,-moz-,-ms- et -o-E F, E>F)E+F, E~F)E#id) et de classe (E.class)E:first-child, E:last-child...)E:hover, E:focus, E:active...)E::first-letter, E::after, E::before...)[attr], [attr=val], [attr~=val][attr^=val], [attr$=val], [attr*=val]<ul>
<li id="art18">Vers article 18</li>
<li id="art12">Vers article 12</li>
<li id="rub4">Vers rubrique 4</li>
<li id="art3">Vers article 3</li>
</ul>ul li[id^=art]{
color: tomato;
}:nth-child(3) cible le 3ème enfant:nth-child(an+b) ou a et b sont des entiers :nth-child(3n+2), pour chaque entier positif de n:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>ul li:nth-child(3n+2){
color: tomato;
}:nth-last-child():nth-of-type(), :nth-last-of-type():not() permet de retirer un sélecteur simple:
div:not(.toto)ul li a:not(:hover).toto:not(p)a:not([href^=http]):not(div p) est invalide.:enabled, :disabled:checkedinput{
vertical-align: middle;
}
input:checked + label{
color: tomato;
}
border-radius: 10px;
border-radius: 0 10px 2px 20px;border-radius: 50%; crée un rond
text-shadow: 2px 2px 5px black;
box-shadow: 2px 2px 5px (5px) black (inset);
inset
linear-gradient((to left), red, green);
to bottomE{
background: dodgerblue;
background: -webkit-linear-gradient(deepskyblue,dodgerblue);
background: -moz-linear-gradient(deepskyblue,dodgerblue);
background: -ms-linear-gradient(deepskyblue,dodgerblue);
background: -o-linear-gradient(deepskyblue,dodgerblue);
background: linear-gradient(deepskyblue,dodgerblue);
}
background: rgb(235, 162, 53);
opacity: 0.5;
background: rgba(235, 162, 53, 0.5);
rgb(r,v,b) avec l'alphahsl(t,s,l) et hsla(t,s,l,a)
ul{
...
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,.3),
0 5px 10px rgba(0,0,0,.25),
0 20px 20px rgba(0,0,0,.15);
}
ul li{
...
background: dodgerblue;
background: -webkit-linear-gradient(deepskyblue,dodgerblue);
background: -moz-linear-gradient(deepskyblue,dodgerblue);
background: -ms-linear-gradient(deepskyblue,dodgerblue);
background: -o-linear-gradient(deepskyblue,dodgerblue);
background: linear-gradient(deepskyblue,dodgerblue);
}
ul li:first-child,
ul li:first-child a{
border-radius: 3px 0 0 3px;
}
ul li:last-child,
ul li:last-child a{
border-radius: 0 3px 3px 0;
}
ul li a{
display: block;
text-align: center;
text-decoration: none;
padding: 8px 8px 17px 8px;
color: black;
color: rgba(0,0,0,.7);
text-shadow: 0 1px 0 rgba(255,255,255,.4);
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,
0 -1px 0 hsl(210,100%,32%) inset,
0 -2px 0 hsl(210,100%,38%) inset,
0 -3px 0 hsl(210,100%,44%) inset,
0 -4px 0 hsl(210,100%,50%) inset,
0 -5px 0 hsl(210,100%,60%) inset;
}
ul li a:hover,
ul li a:focus{
background: rgba(255,255,255,.2);
padding: 8px 25px 17px 25px;
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,
0 -1px 0 hsl(210,100%,42%) inset,
0 -2px 0 hsl(210,100%,48%) inset,
0 -3px 0 hsl(210,100%,54%) inset,
0 -4px 0 hsl(210,100%,60%) inset,
0 -5px 0 hsl(210,100%,70%) inset;
}
ul li a:active{
background: rgba(0,0,0,.15);
background: -webkit-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
background: -moz-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
background: -ms-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
background: -o-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}
transition: width 2s ease;
transition-property: propriété à animertransition-duration: durée de la transitiontransition-delay: retardement de la transitiontransition-timing-function: méthode d'interpolationtransition: propriété raccourcielinear: linéaireease: départ rapide, arrivée lente (défaut)ease-in: départ lentease-out: arrivée lenteease-in-out: départ lent, arrivée lente
cubic-bezier(x1,y1,x2,y2)
@keyframes@keyframes nomAnim{
from{ ... }
40% { ... }
to { ... }
}
animation: nomAnim 2s ease 5;
animation-name: nom de l'animation utiliséeanimation-duration: durée de l'animationanimation-delay: retardement de l'animationanimation-direction: joue l'animation en sens inverseanimation-iteration-count: nombre de répétitionanimation-timing-function: méthode d'interpolationanimation-fill-mode: état de l'animation avant et après celle-cianimation: propriété raccourcie
display
block, inlineinline-blocktable, table-row, table-cell...float
left, rightposition
relative, absolute, fixedvertical-align
display: table simule <table>display: table-row simule <tr>display: table-cell simule <td>table-layout modifie le calcul d'affichage du tableau
auto le tableau s'adapte au contenufixed le contenu s'adapte au tableauvertical-aligntable-header-group, table-footer-group
display: flex;
flex-flow: row wrap;
flex-direction définit l'axe principal et l'axe secondaire du Flexbox: affichage en colonnes ou lignes
column, column-reverserow, row-reverseflex-wrap gestion du débordement des lignes
nowrapwrap, wrap-reverseorder: 2;
> div{
display: -webkit-flex; /*prefix*/
flex-direction: row;
}
> div > div:nth-child(2){
order: 0;
}
> div > div{
margin: 5px;
padding: 5px 30px;
background: tomato;
}flex: 1 100px;
flex-grow contrainte d'agrandissementflex-shrink contrainte de réductionflex-basis taille de base> div{
height: 100%;
display: -webkit-flex; /*prefix*/
flex-direction: row;
}
> div > div:nth-child(2){
}
> div > div{
flex: 0;
margin: 1px;
background: tomato;
}
justify-content sur le parent Flexbox
flex-start, flex-end, center, space-between, space-around
align-items sur le parent Flexbox
flex-start, flex-end, center, baseline, stretch
align-self sur un Flexbox item (enfant)
flex-start, flex-end, center, baseline, stretch
> div{
height: 100%;
display: -webkit-flex; /*prefix*/
flex-direction: row;
}
> div > div:nth-child(2){
}
> div > div{
flex: 0 40px;
margin: 1px;
background: tomato;
}