CATALOGUE Code & Data Formation Web App Créer une Web App - Vos sites Web sur mobiles

Les Nouveautés des Propriétés CSS3

Retour à la formation
Chapitre 5 Leçon 4
Précédent
Suivant

Explorez les nouvelles propriétés CSS3 telles que border-radius et box-shadow pour créer des designs modernes avec des bordures arrondies et des ombres.
Découvrez également l'utilisation de la propriété opacity pour ajouter de la transparence à vos éléments.

Détails de la leçon

Description de la leçon

Cette leçon vous introduit aux principales nouvelles propriétés de CSS3, à savoir border-radius et box-shadow. Le border-radius permet de créer des bords arrondis sur les boîtes CSS, offrant un design plus doux et moderne. La valeur peut être uniformément appliquée aux quatre coins ou spécifiée individuellement pour chaque coin afin de créer des formes uniques.

La propriété box-shadow vous permet d'ajouter des ombres portées aux éléments, augmentant ainsi la profondeur et la dimension de vos designs. Vous apprendrez à manipuler les différents paramètres de cette propriété, y compris les décalages horizontal et vertical, la zone de flou, et la couleur de l'ombre.

Enfin, la vidéo traite de l'usage de la propriété opacity pour définir la transparence des éléments. Vous verrez comment jouer sur l'opacité de l'arrière-plan tout en gardant le texte et les ombres entièrement visibles, améliorant ainsi l'esthétique de vos compositions. Chaque technique est illustrée avec des exemples pratiques, garantissant une compréhension claire et une application facile dans vos projets de développement web.

Objectifs de cette leçon

Les principaux objectifs de cette vidéo sont :
- Comprendre et utiliser la propriété border-radius pour arrondir les bords des éléments.
- Maîtriser la propriété box-shadow pour ajouter des ombres portées avec différents paramètres.
- Explorer les possibilités offertes par la propriété opacity pour manipuler la transparence des éléments.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML et CSS. Une compréhension préalable des principes fondamentaux de positionnement en CSS sera également utile.

Métiers concernés

Les connaissances acquises dans cette vidéo seront utiles pour les développeurs front-end et les designers web qui cherchent à améliorer l'apparence de sites web grâce aux nouvelles propriétés de CSS3.

Alternatives et ressources

Pour des effets similaires, vous pouvez explorer des frameworks CSS comme Bootstrap ou des bibliothèques JavaScript pour des animations et visuels plus complexes.

Questions & Réponses

La propriété border-radius permet d'ajouter des bords arrondis aux éléments en définissant les rayons des coins, soit uniformément pour tous les coins, soit spécifiquement pour chacun.
La propriété box-shadow est utilisée en indiquant le décalage horizontal, le décalage vertical, la zone de flou, et la couleur de l'ombre. Par exemple, 'box-shadow: 10px 30px 20px black;' ajoute une ombre noire avec 10 pixels de décalage horizontal, 30 pixels de décalage vertical, et une zone de flou de 20 pixels.
La propriété opacity affecte l'ensemble de l'élément y compris son contenu, tandis que l'utilisation de valeurs RGBA permet de définir uniquement la transparence de la couleur de fond, laissant le texte et autres contenus inchangés.