CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Techniques Avancées de Positionnement en Web Design

Techniques Avancées de Positionnement en Web Design

La page d'accueil - partie 3
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
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Combiner Positionnement et Animation

Objectifs

Les objectifs de cette vidéo sont de permettre aux apprenants de :

- Utiliser le positionnement relatif et absolu pour styliser des éléments HTML.
- Appliquer des effets de survol et des transitions CSS.
- Combiner différents techniques CSS pour créer des designs interactifs et visuellement attrayants.

Résumé

Dans cette leçon, apprenez à combiner le positionnement, le design et les animations en utilisant HTML et CSS.

Description

Cette leçon couvre une approche intégrée du positionnement, du design et de l'animation des éléments HTML en utilisant CSS. Elle commence par la mise en place d'une classe de produit pour cibler et styliser les articles, en les disposant les uns à côté des autres grâce à un conteneur flex. Chaque produit reçoit un fond bleu, un espacement grâce au padding et margin, et une dimension spécifique via flex-basis.


Ensuite, nous explorons l'importance du positionnement relatif pour les éléments de l'article, permettant d'ajouter des divs en position absolue et de manipuler leur placement. Le texte est aligné à l'intérieur, et les titres sont stylisés et ajustés avec des marges.


Nous examinons également l'utilisation de l'opacité et des transitions pour créer des effets de survol. Les images des produits sont agrandies avec transform et reçoivent une opacité modifiée. L'effet de dézoom est sécurisé avec un overflow hidden pour éviter tout dépassement visuel.

Voir plus

Questions fréquentes

Quel est l'objectif de l'utilisation de la classe 'flex' dans le design des articles ?
L'objectif est de disposer les articles les uns à côté des autres de manière alignée grâce à un conteneur flexbox.
Pourquoi utilise-t-on l'opacité et les transitions pour les images des produits ?
L'opacité et les transitions permettent de créer des effets de survol agréables et visuellement attractifs sans dépasser les limites de l'élément parent.
Quel est le rôle du positionnement relatif des articles ?
Le positionnement relatif permet de placer des éléments enfants en position absolue de manière structurée, assurant un alignement et une disposition précise au sein des articles.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 1 an
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 2 ans
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
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 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !