Coder des cartes tournantes 3D en CSS
HTML-код
- Опубликовано: 1 янв 2022
- 🎓 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/
Les meilleures vidéo, tu m'aide beaucoup pour mes projets perso, un grand merci !
😯 Ho, le repeat(auto-fill, minmax(value, value)) une pépite pour le responsive
Salut à tous, dites-moi si vous recevez bien le code source via la landing page.
En effet j'ai tenté une nouvelle approche, vous pouvez recevoir le code source des vidéos en rentrant votre mail ici : www.le-designer-du-web.com/70gami6zn2
Normalement ça déclenche un envoi automatique vers votre boite mail.
Bonne journée ✌️
Genial, Encore merci Enzo tes vidéos sont toujours super clair... Je kiff
Toujours aussi génial pour s'améliorer toutes les semaines ! Bravo !
Merci Ev..Maxime!
Toujours très instructif ! ! merci et le mail auto marche bien j'ai bien reçu le code.
Vraiment très chouette, j'aime trop ces animations 👍😊. Merci Enzo 🙏😊
Merci Isabelle!
Excellent, tu es vraiment très "balaise", rapide comme l'éclair 😁 mais tu as le mérite de donner toutes les explications nécessaires.
Et surtout, je t'ai connu par Udemy, tu es cohérent, dynamique et clair.
mdr la vidéo de confirmation pour recevoir le code source mais mailchimp est à la traine par rapport à toi 🤣 toujours rien 5 min plus tard...
Bonne continuation
edit: le mail prend plus de 30s 😋 mais c'est ok 👍👍👍👍👍
Merci pour ton soutien et ton retour, je vais essayer d’accélérer l’envoi avec Mailchimp pour les prochains projets 👌
Merci pour tes vidéos 🙌🙌
Merci pour ton soutien et avec plaisir !
Super interessant
très bonne vidéo j'ai juste un problème avec le code: mes cartes ne se mettent pas en ligne mais elle se mettent en colonnes et je n'arrive pas à trouver d'où cela peut venir.
Sinon rien à redire sur le tuto qui est clair, net et précis continue comme ça
merci enzo
Super vidéo ! Comment tu a fais pour mettre la petite flèche stp ?
je prends rendez-vous *
Bonjour, tout d'abord merci pour tes videos! ensuite je voulais revenir sur la propriété backface-visibility : en effacant cette propriété je ne vois pas la difference de résultat ducoup je ne comprend pas son interet.. Est ce vraiment important de le mettre ? Idem avec les position relative des div .card-wrapper et .card
Merci encore pour les vidéos que tu fais 🤙👍
Bonjour, Petite question : est ce que c'est intégrable facilement sur Wordpress ? merci d'avance
Peut on faire ça avec des image du coup ?
Absolument, on peut!
bonour jai fait exactement comme vous mais sa ne marche pas perso je suis un debutant
Salut, y'a que moi qui ne trouve pas le code source en description 🥲
Je l'ai trouvé merci beaucoup pour ta vidéo 🫶
Bien copié, mais permets-moi de faire quelques remarques techniques... 😇
J'aime le fait que tu utilises :nth-child(). Ce groupe de sélecteurs n'est pas assez promu et enseigné !
Tu aurais pu utiliser `:first-child` et limiter `display:block` à ce premier `span`. Le deuxième aurait été automatiquement déplacé sur une nouvelle ligne. Globalement, moins de CSS, même si ce n'est qu'un bref exemple de code. Ces choses-là s'accumulent :-)
À propos de gaspillage : il est très dommage et pas particulièrement efficace que tu charges pour *UNE* simple flèche un énorme fichier CSS (110 kb minifié !) plus sa grosse police de caractères (70-100 kb) de FontAwesome -- alors que cela aurait pu être fait avec un simple symbole HTML (ou Unicode) et moins de balisage : → / ⇒
Et la performance est aussi garantie meilleure ! En HTML, cela représente 12 octets, contre environ 200 000 pour le même effet visuel avec FontAwesome. 🤯
Des flèche Unicode: www.w3schools.com/charsets/ref_utf_arrows.asp
Les propriétés avec préfixe (-webkit-) doivent également être notées *avant* les propriétés standard. Si la prochaine version (16?) de Safari utilise enfin le standard CSS (identique), tout continuera à fonctionner sans erreur.
Tous les autres navigateurs le font sans préfixe depuis 2014.
Au lieu de `div.card-font` pour le prix, un autre `p` serait plus sémantique. Mettre la flèche (&rArr ;) et utiliser "display:flex" : c'est fait.
p.class-price { display:flex }
p.class-price > i { margin-inline-start:auto }
... et oui : le français n'est pas ma langue maternelle :-)