CSS 3 qui signifie « Cascading Style Sheet » est également un langage codé qui, contrairement au HTML 5, fait référence à la mise en forme d’une page web.
On a sélectionné pour vous quelques nouvelles fonctionnalités afin que vous puissiez observer le potentiel important et inédit de ce type de langage :
Avec l’avènement des smartphones, la navigation sur mobiles est de plus en plus utilisée, c’est pourquoi Maitre CSS a décidé de vous apprendre les media-queries afin d’être au top sur le responsive !
Les media-queries sont utilisés dans les fiches de style, elles définissent les css s’adaptant aux différents formats d’écran qu’utilisent les internautes. Généralement, on définit une media-query pour les écrans de 1024px de large (ordinateur), pour ceux de 768px (tablette) et de 320px pour les téléphones.
Exemple :
@media screen and (max-width: 320px) {
/*écrire ici vos propriétés css*/
}
Pour que les media-queries fonctionnent, il ne faut pas oublier d’insérer une balise meta servant à utiliser des métadonnées. Dans ce cas précis, il s’agit d’appeler l’attribut « width » :
<meta name="viewport" content="width=device-width"/>
Maintenant que vous savez mettre votre site en responsive, Coding Panda va vous montrer les aspects fun du code !
Avez-vous remarqué la particularité de notre logo ? (passer la souris dessus)
Vous trouvez ça génial ? Et bien, nous allons vous apprendre à le faire :
.logo_rotate {
-webkit-transition: -webkit-transform .7s;
-moz-transition: -moz-transform .7s;
-o-transition: -o-transform .7s;
-ms-transition: -ms-transform .7s;
transition: transform .7s;
}
.logo_rotate:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Tout d’abord, il faut préciser les navigateurs qui utiliseront cette propriété « rotation » :
- Webkit : pour Chrome, Safari, Android,…
- Moz : pour Mozilla
- O : pour Opéra
- Ms : pour Internet Explorer
Dans la classe du logo, il faut déclarer la propriété « transition » et indiquer la valeur « transform » et le temps d’animation. Ensuite, pour créer la rotation lors du passage de la souris sur le logo, il faut récupérer la classe du logo et ajouter le sélecteur « hover ». Vous y placez la propriété « transform » et la valeur « rotate() » et choisissez le degré de rotation.
Pour réaliser cet effet, nous avons utilisé des keyframes qui nous permettent de réaliser des animations responsives et accessibles sur tous les navigateurs.
Il se construit de cette manière :
@keyframes animationPANDA {
0% {
transform: translate(-50%,-10%) ;
}
100% {
transform: translate(500%,20%) ;
}
}
@-webkit-keyframes animationPANDA {
0% {
-webkit-transform: translate(-50%,-10%) ;
}
100% {
-webkit-transform: translate(500%,20%) ;
}
}
.panda_css3 {
z-index: 6;
width: 20%;
.voiture_css3 {
z-index: 5;
width: 12%;
}
.voiture_css3 {
animation: animationPANDA linear 4s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: animationPANDA linear 4s;
-webkit-animation-iteration-count: infinite ;
-webkit-transform-origin: 60% 40%;
}
Surtout, n'oubliez pas de tout mettre en % pour que vos animations soient responsives ;)
