Compagnon de code
CSS : l'essentiel, avec style !
Leçons :
Découverte & Sélecteurs
18:11
Styliser les textes
18:47
Comprendre les couleurs
14:11
Les backgrounds Color
10:49
Les modèles de boîtes
25:10
Notion de Clamp, le min et le max
09:12
Arrondis et Hover
14:57
Les Display
09:21
Invisibilité & Morale
08:57
Transformer des éléments ?
15:29
Les Positions
24:18
Positions & Précautions
08:11
MEP : Les positions
22:37
Les bases de Flexbox
36:54
MEP : un dé en flexbox
27:06
MEP : des cartes flexibles
19:08
Les animations en CSS
21:03
MEP : un système solaire animé
27:00
MEP : Un texte qui défile ?
09:12
MEP : un loader... des points sauteurs !
07:38
Sélectionner un enfant
07:04
Les variables CSS
15:42
Responsivité et Media Queries
19:36
Enoncé Exercice Twitter
05:15
Un clone de Twitter
54:11
Un site complet et Responsive en HTML / CSS
02:12:46
Notice
=> leçons
=> express
=> exercices
=> projets
Leçons :
Découverte & Sélecteurs
18:11
Styliser les textes
18:47
Comprendre les couleurs
14:11
Les backgrounds Color
10:49
Les modèles de boîtes
25:10
Notion de Clamp, le min et le max
09:12
Arrondis et Hover
14:57
Les Display
09:21
Invisibilité & Morale
08:57
Transformer des éléments ?
15:29
Les Positions
24:18
Positions & Précautions
08:11
MEP : Les positions
22:37
Les bases de Flexbox
36:54
MEP : un dé en flexbox
27:06
MEP : des cartes flexibles
19:08
Les animations en CSS
21:03
MEP : un système solaire animé
27:00
MEP : Un texte qui défile ?
09:12
MEP : un loader... des points sauteurs !
07:38
Sélectionner un enfant
07:04
Les variables CSS
15:42
Responsivité et Media Queries
19:36
Enoncé Exercice Twitter
05:15
Un clone de Twitter
54:11
Un site complet et Responsive en HTML / CSS
02:12:46
Notice
=> leçons
=> express
=> exercices
=> projets
Arrondis et Hover
Arrondissons les angles et donnons vie avec une première interaction entre nos pages web et nos visiteurs grâce au survol avec leur souris sur un de nos éléments.
Pour des coins arrondis :
.container {
border-radius: 15px; /* Tous les coins à 15px */
}
.container {
border-radius: 50px 0 0 50px; /* Haut gauche et bas droit arrondis , dans l'ordre : TL TR BR BL */
}
.container {
border-radius: 45% 55% 34% 66% / 63% 35% 65% 37%; /* Forme organique */
}
Pour les formes dites "organiques", je vous laisse retrouver un outil sur : ce site
Une interaction au survol ? hover
On souligne et on passe le texte en bleu au survol :
.title:hover {
color: blue; text-decoration: underline;
}
Une animation plus fluide ?
.container {
transition: 0.5s; /* Animation sur 0.5 seconde */
}
.container:hover {
background: lime;
border-radius: 9999px; /* Rend la boîte totalement ronde */
}
Là où border-radius permet d'arrondir les angles
et de donner un autre style à ta page web,
hover permet une interactivité.
Fais tes tests et amuse toi 😉
Écrit en 02/25 par Christophe C.
Mis à jour en 02/25