Template flexbox page type :
le fichier pagetype.html
le fichier style.css
Ce qui donne :
overflow: auto; ou overflow: scroll; sur la div <main> par exemple permet le scrolling sur la div.
@media all and (max-width: 600px) sert a définir un style différent si l'écran a une largeur max de 600px , pour les tablettes et smartphones par exemple.
Background :
le fond jaune avec l'image "peace and love" du sommaire de cette page par exemple :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background : linear-gradient et radial-gradient.
La propriété opacity, très simple, permet d'indiquer le niveau d'opacité .
- Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.
- Avec une valeur de 0, l'élément sera totalement transparent.
exemple :
p {
opacity: 0.5;
}
Style du texte :
La taille :
Pour modifier la taille du texte, on utilise la propriété CSS font-size, on peut soit:
- Indiquer une taille absolue : en pixels, en centimètres ou millimètres.
- Indiquer une taille relative : en pourcentage, « em » ou « ex » .
la taille relative a l'avantage d'être plus souple, elle s'adapte plus facilement aux préférences de taille des visiteurs.
Si vous écrivez 1em, le texte a une taille normale, 1.3em il sera plus gros et 0.7em plus petit.
La police :
La propriété CSS qui permet d'indiquer la police à utiliser est font-family.
On précise en général plusieurs noms de police, séparés par des virgules ,au cas ou le visiteur n'a pas la police choisi par défaut :
balise {
font-family: police1, police2, police3, police4;
}
Les principales polices:
- arial
- arial black
- comic sans ms
- courier new
- georgia
- impact
- times new roman
- trebuchet ms
- verdana
Italique, gras, souligné…
-
Pour mettre en italique, on utilise font-style:
balise {
font-style: italic ou oblique ou bien normal ;
}
-
Pour mettre en gras on utilise font-weight:
balise {
font-weight: bold ou bien normal ;
}
-
Pour souligner , on utilise text-decoration:
balise {
text-decoration: underline ou line-through ou overline ou blink ou bien normal ;
}
L'alignement :
C'est tout simple, on utilise la propriété text-align et on indique l'alignement désiré :
- left : le texte sera aligné à gauche (c'est le réglage par défaut).
- center : le texte sera centré.
- right : le texte sera aligné à droite.
- justify : le texte sera « justifié ». Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes.
Les flottants :
Ceci est un texte normal de paragraphe,
écrit à la suite de l'image et qui l'habillera car l'image est flottante, voici le CSS :
imgflot {
float: left;
margin-right: 2%;
}
on decolle l'image du text avec margin-right:
ce texte est à coté de l'image.
Je dis à ce texte stop le float pour moi avec :
stopflot {
clear: both;
}
peux importe qu'elle flotte à droite ou à gauche le texte reprend en dessous de l'image.
Les bordures et les ombres :
Les bordures standard :
- border-width, la largeur.
- border-color, la couleur.
- border-style, le type de bordure :
- none : pas de bordure (par défaut) ;
- solid : un trait simple ;
- dotted : pointillés ;
- dashed : tirets ;
- double : bordure double ;
- groove : en relief ;
- ridge : autre effet relief ;
- inset : effet 3D global enfoncé ;
- outset : effet 3D global surélevé.
exemple :
border: 2px green dotted;
}
voici le résultat :
une bordure verte en pointillé de 2px
En haut, à droite, à gauche, en bas:
- border-top : bordure du haut ;
- border-bottom : bordure du bas ;
- border-left : bordure de gauche ;
- border-right : bordure de droite.
border-left: 2px green dotted;
border-right: 2px red outset;
border-top: 2px blue groove;
border-bottom: 2px black dashed;
}
voici le résultat :
une bordure custom de 2px
Les bordures arrondies :
La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe quel élément.
#borar {
width:150px;
height:100px;
background-color: #81F7D8;
border:solid black 2px;
border-radius: 5px;
}
#borar2 {
width:150px;
height:100px;
background-color: #81F7D8;
border:solid black 2px;
border-radius: 10px 20px 30px 40px;
}
#borar3 {
width:150px;
height:100px;
background-color: #81F7D8;
border:solid black 2px;
border-radius: 10px / 30px;
}
Les ombres :
box-shadow : les ombres des boîtes
La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant :
- le décalage horizontal de l'ombre ;
- le décalage vertical de l'ombre ;
- l'adoucissement du dégradé ;
- la couleur de l'ombre.
- on peut rajouter inset
pour une ombre à l'intérieur.
.ombre {
border: solid black 1px;
background-color: #81F7D8;
box-shadow: 6px 6px 2px gray inset;
}
Les apparences dynamiques :
on peut changer l'apparence d'un élément:
- au survol ;
- lors du clic ;
- lors du focus (élément sélectionné);
- lorsqu'un lien a été consulté.
Les transissions et animations:
On peut créer une animation pour les liens :
passer la souris au dessus des rectangles pour voir le code correspondant:
La méga propriété de transition:
p {
transition: property duration timing-function delay;
}
Il est possible de spécifier des valeurs différentes pour chaque propriété, il suffit de les ajouter à la suite, chacune séparée par une virgule. Pour notre exemple, voici ce que ça donne :
#transex2 {
transition: background-color 3s ease 1500ms, width 1s ease-in 0s, height 2s ease-out 0.2s;
}
Une animation CSS correspond à plusieurs transitions qui s’enchaînent.
Création d’une animation de changement de taille :
0% { width: 50px;}
50% { width: 200px;}
100% { width: 100px;}
}
ou alors :
from, to { width: 100px;}
25%, 75% { width: 200px;}
50% { width: 50px;}
}
Cette animation peut ensuite être appliquée par le biais de huit propriétés :
- animation-name : le nom de l’animation à utiliser ;
- animation-duration : la durée complète de l’animation ;
- animation-delay : le délai avant que l’animation ne se lance ;
- animation-timing-function : la méthode d’interpolation (départ rapide, lent…) entre chaque étape (voir plus bas) ;
- animation-iteration-count : le nombre de fois où l’animation est répétée. Le mot-clé infinite permet d’effectuer l’animation en boucle ;
- animation-direction : permet de jouer l’animation en sens inverse (voir plus bas);
- animation-fill-mode : état des éléments avant et après l’exécution de l’animation (voir plus bas) ;
- animation-play-state : permet de mettre l’animation en pause ;
Ou la super propriété : animation:[animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];
Par défaut, la durée est de 0 seconde, le nombre de répétitions est 1 et la méthode d’interpolation est ease.
Modifier la méthode d’interpolation animation-timing-function :
- linear : méthode linéaire ;
- ease : le départ est rapide, l’accélération lente. L’accélération semble naturelle ;
- ease-in : le départ est lent. L’arrivée semble donc plus rapide ;
- ease-out : l’arrivée est lente. Le départ semble donc plus rapide ;
- ease-in-out : le départ et l’arrivée sont lents ;
- cubic-bezier(p2x,p2y,p3x,p3y) : courbe d’accélération personnalisée (p1 : 0 en x et y et p4 : 1 en x et y);
- steps(nb, sart|end) : animation par palier (image par image). Les transitions/animations ne sont plus fluides.
La propriété animation-direction accepte 4 valeurs :
- normal : l’animation est jouée normalement, de l’étape 0 % (from) à l’étape 100 % (to) ;
- reverse : l’animation est jouée en sens inverse, de l’étape 100 % à l’étape 0 % ;
- alternate : l’animation est jouée normalement les cycles impairs (1,3…) et en sens inverse les cycles pairs (2,4,…) ;
- alternate-reverse : l’animation est jouée en sens inverse les cycles impairs (1,3…) et normalement les cycles pairs (2,4..).
Gérer l’état des éléments animés avant et après l’animation avec animation-fill-mode:
- backwards : les éléments sont tels que définis à l’étape 0 % de l’animation avant le début de celle-ci ;
- forwards : les éléments sont tels que définis à l’étape 100 % de l’animation après la fin de celle-ci ;
- both : combinaison de backwards et forwards ;
- none : par défaut.
Autres exemples:
transform :
- none aucune transformation
- matrix(n,n,n,n,n,n) définit une transformation 2D, en utilisant une matrice de six valeurs
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) définit une transformation en 3D, en utilisant une matrice 4x4 de 16 valeurs
- translate(x,y) définit une translation 2D
- translate3d(x,y,z) définit une translation 3D
- translateX(x) définit une translation, en utilisant uniquement la valeur de l'abscisse
- translateY(y) définit une translation, en utilisant uniquement la valeur de l'axe des Y.
- translateZ(z) définit une translation en 3D, en utilisant seulement la valeur de l'axe Z
- scale(x,y) définit une transformation d'échelle 2D
- Scale3D(x,y,z) définit une transformation d'échelle 3D
- scaleX(x) définit une transformation d'échelle en donnant une valeur pour l'axe X
- scaleY(y) définit une transformation d'échelle en donnant une valeur pour l'axe Y.
- scaleZ(z) définit une transformation d'échelle 3D en donnant une valeur pour l'axe Z
- rotation(angle) définit une rotation 2D, l'angle est spécifié dans le paramètre
- rotate3D(x,y,z,angle) définit une rotation 3D
- rotateX(angle) définit une rotation 3D le long de l'axe X.
- rotateY(angle) définit une rotation 3D le long de l'axe Y
- rotateZ(angle) définit une rotation 3D le long de l'axe Z
- skew(x-angle, y-angle) définit une transformation par inclinaison 2D le long de la X- et l'axe des Y
- skewX(angle) définit une transformation par inclinaison 2D le long de l'axe X
- skewY(angle) définit une transformation par inclinaison 2D le long de l'axe Y
- perspective(n) définit une vue en perspective d'un élément 3D transformé
- initial définit cette propriété à sa valeur par défaut.
- inherit Inherits cette propriété de son élément parent.
Le chat, une animation a partir d'une planche:
