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
Afficher des vidéos en Responsive…
Dans ce tuto CSS en vidéo, nous verrons comment nous pouvons…
Créer une galerie d'images…
Dans ce tuto WordPress, nous allons voir comment ajouter une…
Débuter en HTML5 - CSS3 -…
Cette formation fait partie d'une série sur la programmation…
Créer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…
Créer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…
Ajouter une bulle d'info enrichie…
Dans ce tuto jQuery en vidéo, nous allons voir comment créer…
Intégrer et Développer un…
Voici une formation complète dédiée à l'intégration et…
Rendre votre site compatible…
Dans ce tuto CSS 3 et Javascript, vous découvrirez comment…
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 en Licence Professionnelle.
En savoir plus sur bpdesign
Témoignage des clients de bpdesign
Très bon formateur ! Clair et précis c'est parfait
Formateur génial, un des meilleurs.
Un très bon formateur, des tuto vidéo de qualité et des explications claires, précises et simples ! Je suis désormais bpdesign sur twitter et attends avec impatience ses divers projets en cours de réalisation ! :) A recommander !
Très bon tuto!
Bravo très bon Tuto sur la création d'une page contact. A quand la suite pour l'intégrer sous Dreamweaver par ex. Jean Michel
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 (9 votes)
Les avis / Questions des utilisateurs (22)
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é 302 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 24010 tuto classés dans nos 201 logiciels ou langages informatiques.
(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 "