CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Maîtriser les Effets CSS Avancés

Maîtriser les Effets CSS Avancés

Les bandes en biais sur des images de fond
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Manipulation des Backgrounds avec Skew et Flexbox

Objectifs

Les objectifs de cette vidéo sont de :

  • Comprendre l'utilisation des pseudo-éléments ::before et ::after
  • Apprendre à manipuler les propriétés de transformation skew
  • Maîtriser l'intégration des background-image avec propriétés fixées
  • Utiliser flexbox pour centrer du contenu textuel

Résumé

Découvrez comment créer des effets visuels sophistiqués en CSS avec des images de fond et des transformations skew.

Description

Cette leçon explore des techniques avancées de CSS pour manipuler les éléments de fond de manière innovante. Vous apprendrez comment utiliser les pseudo-éléments ::before et ::after en conjonction avec les transformations skew pour créer des effets de bande diagonale. L'instruction pas à pas comprend :

  • La duplication de bandes avec les pseudo-éléments
  • L'annulation et la réinitialisation des positions initiales des éléments
  • La manipulation du positionnement en fonction de la fenêtre d'affichage
  • L'utilisation de flexbox pour centrer du contenu textuel sur les images de fond

En suivant ce tutoriel, vous serez en mesure de reproduire et de personnaliser des effets modernes et dynamiques sur vos pages Web.

Voir plus

Questions - réponses

Pourquoi utiliser les pseudo-éléments ::before et ::after ?
Les pseudo-éléments ::before et ::after permettent d'insérer du contenu avant ou après le contenu d'un élément, facilitant ainsi la création d'effets visuels avancés sans modifier la structure HTML principale.
Comment réinitialiser une valeur CSS à son état initial ?
Pour réinitialiser une valeur CSS à son état initial, on peut utiliser la valeur 'initial' qui remet la propriété à sa valeur de départ définie par le navigateur.
Quelle propriété CSS permet de centrer du contenu textuel avec flexbox ?
La propriété 'align-items: center' utilisée avec 'display: flex' permet de centrer du contenu textuel verticalement lorsqu'elle est appliquée à un conteneur.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 5 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !