Tuto publié par Avec ce tuto CSS 3, apprenez à réaliser un menu déroulant dit "intelligent" en full CSS 3.
Plus besoin de passer des heures devant Photoshop pour avoir des dégradés, des bordures et des ombres dignes de professionnels! Avec ce tutoriel CSS qui est compatible sur 4 des plus puissants navigateurs web (Mozilla Firefox, Chrome, Safari, Opera) vous n'aurez que la difficulté du choix!
De niveau intermédiaire voir même facile, ce tutorial s'adresse à toute personne connaissant très légèrement le CSS 3. Nous aborderons ensemble les points suivants :
- Les préfixes -moz- / -webkit- / -o-
- Réaliser un dégradé en CSS3
- Réaliser un text-shadow (ombre de texte) ou un box-shadow (ombre d'élément) en CSS3
- Apprendre à réaliser un border-radius (coins arrondis) en CSS3
- Gestion des listes "ul" et "li" en HTML
- Apprendre à gérer des classes avec des largeurs différentes sous CSS
- S'intéresser à la balise "input" et la styliser
Un fichier source est fourni avec ce tutoriel vidéo :)
Jetez un oeil à ces autres tuto CSS 3
10 astuces CSS pour faciliter…
Dans cette formation CSS volume 2, nous allons découvrir 10…
Apprendre le Responsive Design…
Dans cette formation Responsive Design signée Elephorm, vous…
Créer un site One Page complet…
Dans ce tuto vidéo HTML5, CSS3 et jQuery, nous allons voir…
Créer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…
Montage HTML/CSS d’une maquette…
Voici une formation dédiée à la découpe et au montage HTML…
Créer un portfolio full responsive…
Voici une formation pour apprendre à créer un portfolio full…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto CSS 3 de 1 heure 48 minutes est proposée dans une résolution plus grande que l’extrait suivant :
bpdesign
, Formateur
Utilisateur adobe photoshop depuis plus de 10 ans, je suis très sensible au monde du Webdesign.
Aujourd'hui auto-entrepreneur dans la création de site internet j'enseigne également en Technologie de l'information et de la communication à l'Université Claude Bernard Lyon 1.
Toutes les formations de Bpdesign
Témoignage des clients de bpdesign
je recommande ce formateur pour ses tutos bien réalisés et bien expliqués.
de très bon tuto.
Formateur plutôt explicite, des tutos assez faciles d'accès.
Ses formations sont super bien expliquées et la voix est très agréable à écouter.
merci ça m'a beaucoup aidé
Lire les autres témoignages
D'autres tuto de bpdesign
Découper et intégrer une maquette Blog Web 2.0
Ce tuto dédié à l'intégration d'une maquette de blog web 2.0 est la suite du tuto…
Créer une Maquette de Blog web 2.0
Apprenez à créer de A à Z une maquette de blog Web 2.0 dans ce tuto Photoshop! Dans…
Découper et intégrer une maquette de site internet web 2.0
Dans cette seconde et dernière partie du tutoriel "Créer une maquette de site internet…
Réaliser un scrolling animé
Dans ce tuto Flash Catalyst CS5, nous allons réaliser un scrolling animé à partir…
Notes attribuées par les utilisateurs (13 votes)
Les avis / Questions des utilisateurs (28)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto CSS 3 d’une durée de 1 heure 48 minutes a été acheté 423 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 17 mars 2011 par bpdesign, contributeur, ayant reçu une note moyenne de 4,3/5 pour l’ensemble de ses vidéos, dans les catégories Tuto CSS Menu et webdesign.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.
Choisissez parmi 32361 tuto classés dans nos 237 logiciels ou langages informatiques.
(auteur de ce tuto - 28 mars 2013)
" Hello parisben, essaie d'utiliser la propriété CSS z-index.
Cette propriété va te permettre de définir premier plan, second plan, background,...
Tu définis un z-index: 999; au sous menu déroulant qui passe en dessous de ton slider
Et un z-index:-1; ou 0 (si 0 marche) à ton slider. "
(a acheté ce tuto - 28 mars 2013)
" Super tuto, mais j'ai un soucis
J'ai intégré ce menu dans mon site, et j'ai placé en dessous un diapo jquery
Et maintenant, le menu déroulant déroule en dessous de mes diapo au lieu de se placer au dessus...
Aurais-tu une idée pour m'aider ?
(j'ai placé la div du menu au dessus dans le fichier source, et de même pour le CSS, au dessus de celui celui du jquery..mais rien n'y fait)
Merci d'avance, à très vite "
(a acheté ce tuto - 28 août 2012)
" encore Bravo
et mes remeciements pour cette méthode de travail et toutes les possibilitès offertes "
(a acheté ce tuto - 17 août 2012)
" Execellent tutoriel ! très bien expliqué très clair très précis ! j'en attend d'autres avec impatience ! "
(a acheté ce tuto - 01 août 2012)
" Tuto sympa, mais manque un peu de clarté et d'explication parfois. "
(a acheté ce tuto - 18 juillet 2012)
" Merci super tuto j'espère pouvoir le mettre sur mon site.
Eric "
(a acheté ce tuto - 26 décembre 2011)
" Bon tuto.
Petit plus à apporter: plus d'explication sur le comportement CSS à certains moments. "
(a acheté ce tuto - 11 décembre 2011)
" tres bon "
(a acheté ce tuto - 22 novembre 2011)
" Excellent tuto ! Du très bon travail :) "
(a acheté ce tuto - 02 octobre 2011)
" Tuto parfait !
Tout est super bien expliqué, c'est un réel plaisir de parcourir les 1h48.
Pour quelqu'un comme moi, qui ne maitrise absolument rien à tout ça, réussir du premier coup c'est que j'ai eu un bon prof.
Bonne continuation. "
(auteur de ce tuto - 02 septembre 2011)
" Bonjour,
je peux l'effacer moi même c'est pas un problème, ça me permet d'ailleurs de vous prouvez ma bonne foie. D'autre part je le répète, je m'inspire du web tout le temps, je suis autodidacte. Oui c'est ressemblant mais ma motivation était de faire découvrir border-radius, box-shadow en inset etc... et ces choses là sont toutes ressemblante sur le web.
Je vous en veux pas, je prends au contraire en considération vos paroles. Ça renforcera ma méfiance sur les tutos à proposer et je vous en remercie fortement! "
(n'a pas acheté ce tuto - 02 septembre 2011)
" N'ayant pas acheté votre tuto, c'est vrai que j'ai peu être parlé un peu vite. Je n'accuse en aucun cas votre tallent qui, il est clair est là. Cependant, je dois avouer que de voir ce rendu sur ce site anglophone m'a un peu étonné. Il est vrai que de nombreux tutos circulant sur le net touchent ce sujet. Mais c'est votre aspect graphique qui m'a un peu bouleversé, en deux menus aperçus (dans l'extrais vu que je ne l'ai pas acheté), le design employé est pratiquement le même que sur le site cité plus bas. Je pense que vous avez bien réalisé ce tuto tout seul et que votre aspect graphique m'a induit en erreur.
Je m'excuse donc auprès de vous pour mon commentaire un peu gênant qui était dû à une réaction à chaud et à un petit énervement pour rien :)
Si les administrateurs du site peuvent le supprimer pour vous éviter des problèmes avec d'autres futurs acheteurs, qu'ils le fassent.
Cordialement. "
(auteur de ce tuto - 02 septembre 2011)
" Bonjour synops,
j'aimerai vous signifier 2-3 choses à mon tour:
1) Je n'ai jamais plagié quoi que ce soit comme vous et moi je m'inspire et je propose MA version des faits. Dans ce genre de tuto, le sujet visé n'était en aucun cas le design qui je le reconnais n'est pas forcément différent mais j'en assume votre plainte; mais les techniques apprises; et l'approche du tuto est complètement différente. Je me suis pas inspiré des structures...
2) Si pour vous je vous apprenais à faire des coins plus arrondis avec un dégradé à 3 couleurs et une hauteur de 500 pixels, cela vous semblerait toujours du "plagiat" comme vous dîtes ci-bien? Pour moi ça ne change rien mais je suis convaincu que votre jugement serait altéré.
J'arrête là, je préfère être cours pour éviter de vous en parler pendant 3h. Parfois l’inspiration et le rendu peuvent êtres semblables à d'autres tutoriels mais comment faire alors? Expliquez-moi? Mes maquettes de site web, de blog ou portfolio vous font aussi penser à des plagiats? Ah oui ils vous font penser à des site internet, des blogs et des portfolios que vous auriez pu voir là ou là bas...
Cordialement,
"
(n'a pas acheté ce tuto - 02 septembre 2011)
" Lorsque j'ai vus l'extrais du tuto, j'ai apprécié et me suis dis que j'allais l'acheter. Mais quelle ne fut pas ma surprise de voir exactement le même tuto écrit mais en anglais sur un site assez connu chez les anglophones : tutsplus.com. Pour un site qui prône le droit d'auteur et l'anti-plagia, je suis un peu déçus, j'aurais pensé que vous auriez vérifié un peu plus surtout que ça m'a pris 5 minutes pour voir la supercherie. BPDesign est peu être un bon formateur, mais ça ne l'autorise pas à plagier pour autant. Surtout qu'il n'a pas fait beaucoup d'effort pour le cacher : le designs utilisé sont quasiment les même (le bleu devient du rouge). J'espère que l'équipe du site supprimera ce tuto, car c'est se faire de l'argent sur le travail des autres.
Sur ce à bientôt ;) "
(a acheté ce tuto - 03 juillet 2011)
" Bonjour,
Tuto vraiment instructif (qui demande beaucoup de patience...). J'ai tenté l'installation d'un framework pour simplifier tout ça mais l'installation du framwork en lui même est trop compliquée ... "
(a acheté ce tuto - 18 mai 2011)
" il est vraiment super, dommage que ca ne fonctionne pas sous ie "
(auteur de ce tuto - 16 mai 2011)
" Non non il n'y a pas de soucis,
mais justement pour moi la vérité c'est de ne pas le cacher.
Après je m’efforce depuis 1 semaine de trouver un "remède" pour cette m**** de ie ;) "
(n'a pas acheté ce tuto - 16 mai 2011)
" Il me semble que tu n'as pas bien compris ma remarque, alors je vais la reformuler autrement:
- Quel intérêt d'intégrer un menu de ce type si celui-ci ne sera pas utilisable par 60% des visiteurs ?!
Je dis que c'est pas très pro de ta part de vendre quelque chose qui ne marchera pas dans 60% des cas. Désolé si ça t'offenses mais c'est la vérité.
Cordialement "
(auteur de ce tuto - 13 mai 2011)
" Pourquoi "pas très pro" ? SI tu veux je pourrais lâcher comme toi les 60% des utilisateurs d'iE ne savent pas ce qu'ils perdent.... c'est tout aussi peu "pro" de dire ça...
Pour en revenir à iE je cherche actuellement des possibilités de gérer le CSS3 à partir de iE6 avec un autre utilisateur. Je tiendrai les utilisateurs du tuto au jus ;)
Cordialement, "
(n'a pas acheté ce tuto - 13 mai 2011)
" Ah mince ce menu CSS n'est pas compatible avec internet explorer ??!!
... Internet Explorer c'est quand même 60% des navigateurs !! Ce tuto m'intéressait mais là ... ça va grandement détériorer la qualité de mon site si j'utilise ça ... C'est pas très "pro" de proposer ça ... "
(auteur de ce tuto - 12 mai 2011)
" Merci !! Et pour info, ma recherche aussi est toujours d'actualité ;) "
(a acheté ce tuto - 12 mai 2011)
" Vraiment cool ce tuto, ravi de voir que l'on peut faire comme les pro, voir le site vodafone.
encore merci BPDESIGN!!!!!!!!!!!!!!
juste le petit soucis avec ie, qui reste d'actualité......... c'est du caca IE!!!!!!!!!!!!!!!!!!!! "
(auteur de ce tuto - 28 mars 2011)
" Merci pour votre commentaire! Cela fait toujours plaisir d'avoir des retours satisfaits de mon travail.
Amicalement, "
(a acheté ce tuto - 27 mars 2011)
" très cool comme tuto, bravo!
les notions d'ombres, de gradient sont bien utilisées et le rendu est propre et moderne.
Continue comme ça! "
(a acheté ce tuto - 21 mars 2011)
" Merci pour la réponse. Je vais y reflechir...
Karine "
(auteur de ce tuto - 18 mars 2011)
" Bonsoir,
alors après quelques recherches je crois qu'il y ait moyen de fixer le menu et gérer le CSS3 pour ie avec:
behavior: url(ie-css3.htc);
sinon allez voir ici:
http://www.marevueweb.com/css3-compatibles-ie-internet-explorer/ "
(a acheté ce tuto - 18 mars 2011)
" la réponse à la question de Dorius m'interresse aussi.
Karine "
(n'a pas acheté ce tuto - 18 mars 2011)
" Bonjour, tuto qui a l'air superbe au final mais dès le début pas d'iE pris en compte dans la compatibilité. Même si celui ci perd régulièrement du terrain en tant que navigateur il est encore incontournable sur bon nombre de poste.
Alors que donne ce menu sur IE ? Les dégâts sont-ils si important ou peut-on réparer avec des lignes CSS supplémentaires ? Sachant que le CSS3 n'est pas super bien gérer à la base ...
Merci par avance "