Before et after en CSS, definition et animations.
HTML-код
- Опубликовано: 6 янв 2019
- 🎓 Tous mes cours sur l'École du Web (pour les obtenir tous d'un coup) : www.ecole-du-web.net/
📚 Tous mes cours sur UDEMY : liste-des-cours.com/
🚀 1 Cours gratuit en t'abonnant à ma newsletter :
www.le-designer-du-web.com/news
Le lien du Discord : / discord
Ma chaine en Anglais :
/ @thewebschool
Je suis aussi sur la plateforme Tuto.com :
fr.tuto.com/formateur/enzo_us...
🎓 Tous mes cours sur l'École du Web (pour les obtenir tous d'un coup) : www.ecole-du-web.net/
📚 Tous mes cours sur UDEMY : liste-des-cours.com/
Grand merci pour cette explication qui m’a débloqué complètement la compréhension des pseudos éléments. J’ai pu faire mon projet de formation plus rapidement grâce à toi 👍
Merci beaucoup pour ce tuto clair et rapide, j'ai enfin compris le principe du ::before ::after :)
Super explication, tu m'as fait comprendre le before et after si simplement !
Toujours sympas ces animations !!!
Merci, au top !
Merci beaucoup pour ce partage
C'est vraiment BIEN !MERCI
J'aime bien tes cours !
Merci pour les conseils
Super !
Un grand merci
salut à tous, des explications claires, que veut le peuple du css.............. Merci
Excellent 😊👍👍👍
Merci Isabelle!! Et bonne année
super ces petits effets
Je découvre ta chaine en préparant mon exam et je trouve tous tes tutos très bien expliqués et intuitifs. Très peu d'abonnés, c'est dommage, mais tu dois faire ça par passion avant tout je suppose. Quoi qu'il en soit j'aime et je me suis activé les notifications pour ne rien louper ! Merci !
Merci pour ce commentaire et pour ton soutien, je suis passionné c'est sûr, et je fais ces vidéos quand j'ai le temps en dehors de mon travail de Freelance.
Pour ce qui est des stats elles montent peu à peu, il faut être patient avec RUclips !
@@EcoleduWeb Je te souhaite de progresser dans ta popularité. Moi en tout je follow. Je m'aide d'ailleurs actuellement de tes tutos pour refaire mon écrit de ce matin ^^
@@LioNTiKaF Génial ! Quel Examen vas-tu passer ?
@@EcoleduWeb BTS Web Designer. Il me reste l'oral demain et quelques jours de patience en attendant le verdict !
@@LioNTiKaF D'accord je vois, je te souhaite de l'avoir ;).
Courage
Merci bien
Merci pour le tuto! Fait un peu étrange, la partie gauche du border, quand c'est zoomé, se décalle de 50% vers le haut, et seulement la bordure gauche + je dirais 1/3 de la bordure haut gauche et bas! Si tu as des informations à ce propos! En tout cas, merci pour ce tuto bien qui m'a bien aidé!
C'est très bien la video. Merci beaucoup, mais pour ce qui de ":: after" aussi ce serait bien que vous nous montriez la différence. Encore merci, c'était vraiment très utile.
After se créé après l'élément, before avant, merci à vous ;)
Salut Enzo, merci pour ces tutos et les formations sur udemy! Top! sinon tu as vu , il y a un mini espace sur la gauche non comblé par la transition du btn before qui s'ouvre, encore plus visible chez moi....
👍
salut j'ai refait le tuto et j'ai remarqué que la transition marchait quand même malgré que je n'ai mis la propriété transition seulement au niveau du .btn:: before sans le mettre dans .btn
Yes c'est le bug des transitions, j'ai fait une vidéo dessus ;)
@@EcoleduWeb quelle classe 😎
Bonsoir, cela fait déjà plusieurs heures que j'essaye de comprendre seul, en vain... Comment gère-t-on la façon dont le remplissage se fait ? Pourquoi se fait-il des deux côtés du ::before ? Imaginons que je souhaites que le remplissage ne se fasse qu'à moitié mais à partir du milieu, comment cela se passe-t-il ?
Ces questions mises à-part, merci beaucoup pour cette vidéo j'ai enfin pu comprendre comment fonctionnaient before et after !
C'est un peu technique, quand un élément crée un nouveau contexte d'empilement, via position absolute par exemple, la propriété width ne va plus s'étendre de gauche à droite, elle n'est plus dans le flux normal, elle va s'étendre des deux côté.
@@EcoleduWeb Merci beaucoup j'ai pu régler mon problème même si je ne suis pas sûr d'avoir entièrement compris.
Tuto très sympa, je n'ai juste pas trop compris le "transform: translate"
salut,dispensez vous des cours en ligne
Bonjour, oui sur udemy, tuto.com et mon site ecole-du-web.net
Curieux que l'effet "translate and rotate" à la fin de ton exemple est besoin d'un rajout d'un display block.. Dans une de tes vidéos sur les displays tu expliquais que display inline-block est un mélange de display block + display inline, or un boutton est par défaut en inline-block, du coup je ne comprend pas pourquoi ça ne marche pas. 😯
Car c'est un lien ici, donc inline de base et transform ne fonctionnent pas avec les éléments inline (span, a, i, etc...) 👍