CSS3
Jean-Claude Charr
Maître de conférences IUT de Belfort – Montbéliard Université de Franche Comté
Introduction
● CSS3 est la nouvelle version de CSS
● Toujours en développement par la W3Cp
● CSS3 est complètement rétrocompatiblear W3
● Certaines propriétés de CSS3 ont été inclues dans les navigateurs moderneses
● Certains navigateurs exigent un préfix pour certaines propriétés : -moz- pour firefox
-webkit- pour safari ou chrome -o- pour opera
Borders
C o i n s a r ro n d i s :
border-radius:25px ; Contours ombrés :
box-shadow: 10px 10px 5px #888888;
Image comme bordure :
border-image:url(border.png) 30 30 round;
Background
Nouvelles propriétés pour mettre en forme l'arrière plan :
● background-size : définir la taille de l'image de l'arrière plan, Ex : background-size:80px 60px;
● background-origin : définir la position de l'image d'arrière plan, Ex : background-origin:content-box;
background-clip:content-box;
Plusieurs images d'arrière plan :
Ex : background-image:url(flwr.gif),url(tree.gif);
Transformations 2D
translate() : déplace un élément
Ex : transform: translate(50px,100px);
rotate() : pivoter un élément selon l'axe X Ex : transform: rotate(30deg);
scale() : mise à l'échelle d'un élément Ex : transform: scale(2,4);
skew() : pivoter un élément selon l'axe X et Y Ex : transform:skew(30deg, 20deg);
Transition
Ce sont des effets qui permettent de changer le style d'un élément sans javascript ni flash
div{ width:100px; height:100px;
transition:width 2s, -moz-transform 2s;
}
div:hover{ width:200px;
-moz-transform:rotate(180deg); }
Animation (1/2)
Définir l'animation dans @keyframes Ex : @keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
Appliquer l'animation avec « animation » et préciser la durée :
Ex : div{ animation: myfirst 5s; }
Animation (2/2)
@keyframes myfirst{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
div{ animation: myfirst 5s linear 2s infinite alternate; }
Colonnes multiples et redimensionner
Diviser un élément en plusieurs colonnes : div{-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule:4px outset #ff00ff; } Redimensionner un élément :
div{ resize:both;
overflow:auto;
}
Responsive design
Règles à respecter :
● Les éléments ne doivent pas être plus larges que le
viewport. Par suite, il vaut mieux spécifier des largeurs relatives (en %) à la place des largeurs fixes (en px)
● La largeur d'un élément HTML ne doit pas être spécifiée en fonction de la largeur d'un viewport donné.
● Ne pas utiliser des positions fixes trop à droite
● Appliquer différentes feuilles de style à la page HTML en fonction de la taille de l'écran.
viewport
Viewport est la partie visible de la page web, elle est différente sur ordinateur ou un smartphone
Pour contrôler la largeur du viewport, il faut ajouter :
<meta name="viewport" content=
"width=device-width, user-scalable=no">
Système de grille
Système de grille
La largeur d'un élément HTML sera exprimée en nombre de colonnes.
On divise le viewport en 12 colonnes. La largeur
totale de la grille est de 100 % du viewport, donc la largeur d'une colonne est de 8,33 %
On définit une classe pour chaque largeur possible, col-1, col-2, … , col-12
Ex : col-4{width:33.33%} (4X8.33)
Système de grille
Il faut aussi ajouter au CSS les instructions suivantes :
1) * { box-sizing: border-box; } pour que la largeur des éléments comprenne le padding et la bordure
2) [class*="col-"] {float: left; padding: 15px;} pour que les éléments se mettent sur la même ligne
3) .row::after{content:""; clear:both; display: table; } pour passer à une nouvelle ligne
<div class="row">
<div class="col-12 header">Lorem Ipsum</div>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<div class="col-9 content">
<p>Lorem ipsum dolor sit amet … </p>
