(Voir la page des exercices et exemples)
| TITRES | FORMULES | ARRIVEE | EXPLICATIONS | DEPART | ZIP | |
OUTILS ADAPTATIFS
|
||||||
| Hors ligne | ||||||
| 01 | Viewport Resizer |
|
Glisser le bouton du bookmarklet sur la barre des dossiers du navigateur. C'est installé immédiatement ! |
|||
| En ligne | ||||||
| 01 | Screenfly |
|
https://bluetree.ai/screenfly/ | Coller l'url de la page en ligne. Puis sélectionner successivement le format à tester. |
||
| 02 | Responsinator |
|
http://www.responsinator.com/ | Coller l'url de la page en ligne. Il ne faut PAS sélectionner successivement le format à tester, car tous les formats s'affichent en même temps. |
||
OUTILS INSPECTION
|
||||||
| Navigateurs | ||||||
| 01 | Chrome |
|
position-01-margin-padding.html | |||
| 02 | Firefox |
|
||||
| 03 | Safari |
|
||||
| 04 | Explorer |
|
||||
| Programmes | ||||||
| 01 | Dreamweaver |
|
||||
OUTILS CODES
|
||||||
| Programmes | ||||||
| 01 | Visual Studio Code |
|
https://code.visualstudio.com/ | |||
| 02 | Atom | (Obsolète, remplacé par Pulsar) |
https://atom.fr.softonic.com/mac | |||
| 03 | Pulsar | Remplace Atom |
https://pulsar-edit.dev/ | |||
| 04 | Sublime Text |
|
https://www.sublimetext.com/ | |||
| 05 | Brackets |
|
https://brackets.io/ | |||
| 06 | Emmet | Extension |
http://docs.emmet.io/cheat-sheet/ | |||
PRINCIPE DE BASE
|
||||||
| Cascade | ||||||
| 01 | association | background-color |
css-02titres-02association-04cascade-01une-propriete.html css-02titres-02association-04cascade-02plusieurs-proprietes.html |
|||
| Héritage | ||||||
| 01 | parent-enfant | color | css-02titres-01selecteur-04heritage.html | |||
| Cascade et héritage | ||||||
| 01 | combinaison | color | heritage-association.html | |||
| Priorité dans la cascade | ||||||
| 01 | priorité | !important | association-important.html | |||
SELECTEURS
|
||||||
| Balise | ||||||
| 01 | de balise | <b1> | selecteur-02element.html | |||
| Classe | ||||||
| 01 | de classe | .c1 | selecteur-03classe.html | |||
| ID | ||||||
| 01 | d'identification (d'ID) | #i1 | selecteur-04id.html | |||
| Combiné sélecteurs directs | ||||||
| 01 | sans espace |
b1.c1 b1#i1 #i1.c1 |
selecteur-05classe-element.html | |||
| Combiné sélecteurs enfants | ||||||
| 01 | avec espace |
b1(espace).c1 b1(espace)#i1 #i1(espace).c1 .c1(espace).c2 |
||||
| Groupé | ||||||
| 01 | virgule | b1, b2, .c, #i, ... | selecteur-groupe-01groupe.html | |||
| Classe additionnel | ||||||
| 01 | espace | class="c1 c2" | selecteur-groupe-02classes-add-01base.html selecteur-groupe-02classes-add-02permutation-valeurs.html selecteur-groupe-02classes-add-03permutation-selecteurs.html selecteur-groupe-02classes-add-04ajout-body-selecteur1.html selecteur-groupe-02classes-add-05ajout-body-selecteur1-2.html |
|||
UNITES
|
||||||
| Absolue | ||||||
| 01 | pixel |
|||||
| Relative | ||||||
| 01 | Pourcent |
% |
fontsize-01sans100pourcent.html |
|||
| 02 | EM |
em rem |
fontsize-04pratique-01unite-em.html fontsize-04pratique-02unite-rem.html
|
|
||
| Variable | ||||||
| 01 | V... |
vw vh vmim vmax |
fontsize-04pratique-03unite-vw-vh.html fontsize-04pratique-04vmin-video.html
|
http://fittextjs.com/ | ||
FLUX
|
||||||
| Dans le flux | ||||||
| 01 | flux |
|
||||
| Hors flux | ||||||
| 01 | hors du flux |
|
||||
| Dans et hors flux | ||||||
| 01 | combinaison |
enfsousenf2-pos-04solution-dansflux-plusieurs.html
Combinaison 01 : relatif centré Combinaison 02 : en-tête relative |
|
|
||
LAYOUT
|
||||||
| Disposition horizontale | ||||||
| 01 | float |
float: left; float: right; clear: both; |
||||
| 02 | float et margin |
float: left; float: right; clear: both; margin: left; |
layouts-01float-02width-fixe-marge.html | |||
| 03 | display |
display: inline-block; | layouts-02display-01inline-block.html |
|
||
| 04 | display |
display: flex; |
|
|||
| Résolution du fond | ||||||
| 01 | problème du fond avec float |
overflow: hidden;
#groupe > .clearfix {
#groupe:after { |
layouts-02fond-01probleme.html
layouts-02fond-01solution-01overflow.html layouts-02fond-01solution-02clear.html layouts-02fond-01solution-03after.html |
|||
CENTRAGE
|
||||||
| Centrage horizontal | ||||||
| 01 | bloc centré | margin-left: auto; margin-right: auto; |
position-02-centrage-horiz-01-margin.html | |||
| 02 | texte centré | text-align: center; |
position-02-centrage-horiz-02-text-align.html | |||
| 03 | image centrée | text-align: center; display: block; |
position-02-centrage-horiz-03-image.html | |||
| Centrage vertical | ||||||
| 01 | bloc centré | margin-top: ...px; | position-03-centrage-vertic-01-margin.html | centrage-vertical.zip | ||
| 02 | texte centré | padding-top ...px; | position-03-centrage-vertic-02-padding.html | |||
| 03 | texte centré | padding-top ...px; | position-03-centrage-vertic-03-texte-padding.html | |||
| 04 | texte centré | line-height: ...px; | position-03-centrage-vertic-04-texte-line-height.html | |||
| 05 | image centrée | margin-top: ...px; padding-top ...px; line-height: ...px; |
position-03-centrage-vertic-05-image.html | |||
| Centrage horizontal et vertical | ||||||
| 01 | margin |
centrage-vertical.zip | ||||
LAYOUT ADAPTATIF
|
||||||
| Layout adaptatif | ||||||
| 01 | media queries | @media only screen and (min-width: 1000px) {...}
@media only screen and (min-width: 768px) and (max-width: 999px) {...}
@media only screen and (min-width: 480px) and (max-width: 767px) {...}
@media only screen and (max-width: 480px){...} |
div-03-media-query-4-tailles.html | |||
| 02 | viewport | <meta name="viewport" content="width=device-width, initial-scale=1"> |
adaptatif-02viewport.html | |||
PAGE UNIQUE
|
||||||
| OnePage Scroll | ||||||
| 01 | formule |
|
-> | dung-onepage-scroll.zip | ||
| FullPage | ||||||
| 01 | formule | dung-fullpage | -> | dung-fullpage.zip | ||
| Parallax | ||||||
| 01 | jquery | parallax-1.1.3.js localscroll-1.2.7-min.js scrollTo-1.4.2-min.js
$('#nav').localScroll(800); $('#section-01').parallax("50%", 0.1);
background: url(../images/fond-01-rouge.jpg) 50% 0 no-repeat fixed; |
|
-> | ||
| 02 | avec vidéos | video {
<video autoplay loop> |
-> | |||
FONDS
|
||||||
| Fond aplat | ||||||
| 01 | Couleur | background-color | ||||
| Fond dégradé | ||||||
| 01 | manuellement | linear-gradient() radial-gradient() |
degrades-01formules.html | |||
| 02 | visuellement ColorZilla |
degrades-02colorzilla.html | ||||
| 03 | échantillon image ColorZilla |
degrades-03colorzilla-echantillon.html | ||||
| 04 | code CSS ColorZilla |
degrades-04colorzilla-formule-existante.html | ||||
| Fond image | ||||||
| 01 | propriétés | background-image background-attachment background-origin background-clip background-size |
||||
| 02 | taille | background-size |
||||
| 03 | multiple |
background-image: url(../images/logo.png), url(../images/formations.png);
background-repeat: no-repeat;
|
backgrounds-01div.zip | |||
MENU
|
||||||
| Liens | ||||||
| 01 | 4 états (sélecteurs pseudo-classes) |
:link
LoVeHAte |
selecteur-pseudo-classe-01lien.html
|
|||
| Menu horizontal | ||||||
| 00 | Liste et valeurs par défaut | ul li a |
||||
| 01 | float | float: left; |
||||
| 02 | display | display: inline-block; | liste-horiz-inline-block-01base.html
liste-horiz-inline-block-02sansespace-01codeuneligne.html liste-horiz-inline-block-02sansespace-02commentaires.html liste-horiz-inline-block-02sansespace-03sansfermerture.html
|
liste-horiz-inline-block.jpg | ||
DIVERS
|
||||||
| Taille de bloc | ||||||
| 01 | taille exacte | box-sizing: border-box; | boite-01modeles.html | |||
| Elément caché | ||||||
| 01 | cache-cache |
display:none; visibility: hidden; opacity: 0; |
||||
TYPOGRAPHIE
|
||||||
| Typographie liée | ||||||
| 01 | locale | @font-face
.eot .svg .ttf .woff
|
http://www.css3maker.com/font-face.html | -> | http://www.css3maker.com/font-face.html | |
| 02 | en ligne | <link> | http://www.google.com/webfonts | -> | http://www.google.com/webfonts | |
| 03 | convertisseur |
|
http://www.fontsquirrel.com/fontface/generator | -> | http://www.fontsquirrel.com/fontface/generator | |
ANIMATION
|
||||||
| Survol | ||||||
| 01 | 2 images avec 1 état chacun |
#logo { #logo:hover { |
||||
| 02 | 1 seule image avec 2 états inclus |
#logo { #logo:hover { |
||||
| 03 | opacité |
#logo { #logo:hover { |
||||
| 04 | opacité et transition |
#logo { #logo:hover { |
||||
| 05 | 3D |
#liste-1:hover:before { |
||||
| Transformation | ||||||
| 01 | propriétés | transform transform-origin
translate rotation scale, scaleX, scaleY skew, skewX, skewY |
||||
| Anination | ||||||
| 01 | propriétés | animation-name animation-duration animation-iteration-count animation-direction animation-play-state animation-delay animation-fill-mode |
animations-01couleur.html | |||
MULTIMEDIA
|
||||||
| Audio | ||||||
| 01 | propriétés | audio source |
||||
| 02 | mp3 | audio source |
||||
| Vidéo | ||||||
| 01 | propriétés | video source |
|
|||
| 02 | mp4 | video source |
||||
| 03 | convertisseurs | http://www.mirovideoconverter.com/ |
||||
| 04 | Vidéos gratuites | |||||
FORMULAIRE
|
||||||
| Formulaire | ||||||
| 01 | Mise en forme | input[type=text] input[type=radio] input[type=checkbox] input[type=submit] |
|
formulaire-01layout.html | ||
jQUERY
|
||||||
| Galerie | ||||||
| 01 | Circulaire jQuery, Ajax et XML |
|
|