CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3

Comment utiliser la propriété CSS 'transform skew' ?

Retour à la formation
Chapitre 78 Leçon 1
Précédent
Suivant

Découvrez comment utiliser la propriété transform skew en CSS pour créer des bandes en biais sur votre site web.

Détails de la leçon

Description de la leçon

Dans cette vidéo, nous allons explorer la technique de création de bandes en biais à l'aide de la propriété CSS transform skew. Nous commencerons par introduire la mise en place d'une bannière avec un overlay et un background attachment fixe. Ensuite, nous allons détailler comment encapsuler le contenu de la page dans un wrap et ajouter une div avec une classe bg-light pour appliquer un fond bleu clair.

Ensuite, nous allons appliquer la propriété skew sur l'axe y avec une valeur en degrés pour incliner notre élément. Nous aborderons comment les éléments enfants reçoivent également cet effet et comment contrebalancer cela avec un skew négatif sur le wrap intérieur. Pour finir, nous ajusterons les marges et les paddings afin d'obtenir l'effet visuel souhaité.

Cette technique vous permettra d'ajouter une touche de dynamisme à vos pages web en jouant avec les angles et les perspectives visuelles.

Objectifs de cette leçon

L'objectif de cette vidéo est d'apprendre à utiliser la propriété transform skew en CSS pour créer des bandes en biais et maîtriser les ajustements nécessaires pour intégrer correctement ces éléments dans une page web.

Prérequis pour cette leçon

Les prérequis pour cette vidéo sont des connaissances de base en HTML et CSS.

Métiers concernés

Cette technique est particulièrement utile pour les web designers, les développeurs front-end et les intégrateurs web qui cherchent à apporter des touches esthétiques et fonctionnelles sophistiquées à leurs projets.

Alternatives et ressources

Comme alternatives, vous pouvez utiliser les propriétés CSS rotate ou translate pour créer des effets similaires d'inclinaison. Des bibliothèques comme Bootstrap ou Tailwind CSS peuvent également offrir des utilitaires pour gérer les transformations d'éléments.

Questions & Réponses

La propriété CSS utilisée est 'transform skew'.
Il faut appliquer une transformation 'skew' négative sur le conteneur intérieur pour contrebalancer l'effet 'skew' sur les éléments enfants.
La valeur pour 'skew y' doit être exprimée en degrés, par exemple '5deg'.