CSS with Codin'Tricks
> Où puis-je facilement et gratuitement apprendre le CSS?
Il y a plusieurs endroits où vous pouvez facilement et gratuitement apprendre le CSS :
Le site web du W3C (World Wide Web Consortium) propose une introduction complète au CSS et une référence détaillée de toutes les propriétés CSS.
Le site web de MDN (Mozilla Developer Network) propose une documentation complète sur le CSS, ainsi que des tutoriels et des exemples de code.
Le site web de Codecademy propose des cours interactifs gratuits pour apprendre le CSS et d'autres technologies web.
Le site web de Khan Academy propose également des cours interactifs gratuits pour apprendre le CSS et d'autres technologies web.
Il y a également de nombreux autres tutoriels et ressources en ligne qui peuvent vous aider à apprendre le CSS de manière gratuite. Je vous recommande de faire une recherche en ligne pour trouver ce qui convient le mieux à vos besoins et à votre niveau de connaissances.
> Quelques astuces faciles
Voici quelques astuces CSS :
1. Pour masquer un élément de la page, vous pouvez utiliser la propriété "display" et lui donner la valeur "none" :
#mon-element {
display: none;
}
2. Pour changer la couleur de fond d'un élément, vous pouvez utiliser la propriété "background-color" :
#mon-element {
background-color: red;
}
3. Pour ajouter une bordure à un élément, vous pouvez utiliser la propriété "border" :
#mon-element {
border: 1px solid black;
}
4. Pour aligner un élément au centre de la page, vous pouvez utiliser les propriétés "margin: auto" et "display: block" :
#mon-element {
margin: auto;
display: block;
width: 50%;
}
5. Pour appliquer une transition douce lorsque vous modifiez les propriétés d'un élément, vous pouvez utiliser la propriété "transition" :
#mon-element {
transition: all 0.5s ease-in-out;
}
> Essayons plus dur
Voici une astuce CSS un peu plus avancée :
1. Pour créer un menu de navigation horizontal qui s'adapte automatiquement à la largeur de la fenêtre du navigateur, vous pouvez utiliser les flexboxes et les media queries. Voici comment cela pourrait être mis en place :
/* Style de base des éléments du menu */
.menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
flex: 1;
text-align: center;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.menu li:first-child {
border-left: none;
}
.menu li:last-child {
border-right: none;
}
/* Style pour les écrans de largeur inférieure à 600 pixels */
@media screen and (max-width: 600px) {
.menu {
flex-direction: column;
}
.menu li {
border-right: none;
border-left: none;
border-bottom: 1px solid #ccc;
}
.menu li:last-child {
border-bottom: none;
}
}
En utilisant les flexboxes et les media queries, vous pouvez créer un menu de navigation qui s'affiche horizontalement pour les écrans de grande taille et qui s'affiche verticalement pour les écrans de petite taille. Cela permet de créer
2. Il s'agit de créer un effet de survol sur un élément qui change la couleur de fond et l'opacité de celui-ci, ainsi que celle de ses enfants.
Pour ce faire, nous pouvons utiliser les propriétés transition et opacity avec les pseudoclasses :hover et :before :
.mon-element {
position: relative; /* nécessaire pour utiliser :before */
transition: background-color 0.5s, opacity 0.5s; /* définit la durée de l'animation */
}
.mon-element:hover {
background-color: rgba(0, 0, 0, 0.1); /* change la couleur de fond au survol */
opacity: 0.8; /* change l'opacité de l'élément au survol */
}
.mon-element:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.1); /* même couleur de fond que ci-dessus */
opacity: 0; /* opacité initiale de 0 */
transition: opacity 0.5s; /* définit la durée de l'animation */
}
.mon-element:hover:before {
opacity: 0.8; /* change l'opacité de :before au survol */
}
L'astuce consiste à utiliser un élément :before en position absolue sur l'élément parent, et de lui donner la même couleur de fond et opacité que celui-ci au survol. Cet élément :before est initialement invisible (opacité de 0) et devient visible au survol grâce à la transition définie sur sa propriété opacity.
Cet effet peut être utilisé pour mettre en valeur un élément et ses enfants au survol de la souris, tout en conservant un fond transparent et une opacité modifiée.
> Animation d'ondulation
Voici une astuce CSS assez avancée qui consiste à créer une animation d'ondulation à l'aide de la propriété clip-path et de la fonction polygon :
.ondulation {
position: relative;
width: 200px;
height: 200px;
background-color: blue;
clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* forme initiale de clip-path */
transition: clip-path 1s; /* définit la durée de l'animation */
}
.ondulation:hover {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* forme finale de clip-path */
}
La propriété clip-path permet de découper un élément de manière à n'afficher que la partie qui se trouve à l'intérieur de la forme spécifiée. La fonction polygon permet de définir une forme à n points, en précisant les coordonnées de chaque point.
Dans l'exemple ci-dessus, nous avons défini une forme initiale de clip-path en spécifiant des coordonnées de points à 0. Au survol de l'élément, la forme finale de clip-path est définie, affichant ainsi toute la surface de l'élément. La transition définie sur la propriété clip-path permet d'animer cette transformation, créant ainsi un effet d'ondulation.
Cet effet peut être utilisé pour mettre en valeur un élément au survol de la souris, en lui donnant une apparence dynamique et originale. Cependant, il est à noter que cette astuce n'est compatible qu'avec les navigateurs qui prennent en charge la propriété clip-path, et peut ne pas être compatible avec tous les navigateurs.