Un aperçu de la programmation web
En quoi consiste le travail du développeur ?
A communiquer avec la machine en donnant des instructions précises à l'ordinateur. Avec ce code CSS (le langage utilisé pour styliser les pages web) qui s'écrit en direct sur votre machine, vous allez voir progressivement se dessiner une forme et se construire une animation...
/* Bienvenue dans cette démonstration du langage CSS, qui sert à créer le design des sites web !
Commençons par créer un bloc de couleur bleu... */
#animation_container {
width: 49%;
height: 400px;
background: #4d84c6;
position: relative;
}
/* Ajoutons un dégradé */
#animation_container {
background-image: linear-gradient(to top, #69a6e7, #4d84c6);
}
/* Créons un ou deux nuages dans ce ciel trop bleu pour être vrai... */
.cloud, .cloud:before, .cloud:after {
position: absolute;
background: white;
}
.cloud {
width: 160px;
height: 60px;
left: 10px;
top: 80px;
border-radius: 30px;
}
.cloud + .cloud {
left: 200px;
top: 150px;
}
.cloud:before {
content:'';
width: 40px;
height: 44px;
left: 26px;
top: -20px;
border-radius: 20px;
z-index: 20;
}
.cloud:after {
content:'';
width: 80px;
height: 80px;
right: 26px;
top: -38px;
border-radius: 40px;
z-index: 20;
}
/* Donnons-leur vie... */
@-webkit-keyframes agitation {
0%, 100% {
-webkit-transform: scale(0.96);
}
50% {
-webkit-transform: scale(1.00);
}
}
@keyframes agitation {
0%, 100% { transform: scale(0.96); }
50% { transform: scale(1.00); }
}
.cloud {
animation: agitation 1s infinite;
-webkit-animation: agitation 1s infinite;
}
/* Laissons le vent les emporter ! */
@-webkit-keyframes mouvement {
from {
-webkit-transform: scale(1.00);
}
to {
-webkit-transform: scale(0.7) translateX(1000px);
}
}
@keyframes mouvement {
from { transform: scale(1.00); }
to { transform: scale(0.7) translateX(1000px); }
}
.cloud {
animation: mouvement 3s ease-in forwards;
-webkit-animation: mouvement 3s ease-in forwards;
}