Tuto publié par 
Dans ce tuto CSS 3 en vidéo, nous allons voir comment concevoir un menu de navigation web agrémenté de vignettes type polaroid et comment les animer avec le CSS3. Nous aborderons plusieurs nouvelles propriétés de ce langage, dont :
- Les rotations d'images
- Les changements d’échelles
- Les police de caractère dynamique
- Les animations
- Et bien plus encore...
Ce tuto est destiné à tous ceux quoi souhaitent améliorer leurs connaissances en CSS, il est nécessaire de posséder quelques notions de base en HTML et CSS.
Bon tuto à tous !
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,…
Menu déroulant intelligent…
Avec ce tuto CSS 3, apprenez à réaliser un menu déroulant…
Montage HTML/CSS d’une maquette…
Voici une formation dédiée à la découpe et au montage HTML…
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 36 minutes est proposée dans une résolution plus grande que l’extrait suivant :
VincentTutos
, Formateur
Intermittent du spectacle depuis plusieurs années, je suis passé par différents corps de métiers, dont la programmation et l'enseignement. C'est ce qui m'a conduit à m'intéresser à la création de tutoriels vidéos et à les proposer sur tuto.com.
Toutes les formations de VincentTutos
D'autres tuto de VincentTutos
Créez votre bannière de navigation animée
Dans ce tuto CSS 3 & Photoshop CS5 en vidéo, nous allons voir comment concevoir une…
Atelier CSS 3 et HTML 5 : TV en CSS 3
Dans ce tuto CSS3 & HTML5, nous verrons ensemble comment concevoir et réaliser une télévision…
Réalisez des incrustations grâce au tracking 3D
Dans ce tuto After Effects CS6, nous allons voir ensemble comment utiliser le moteur…
Créez un texte avec effet aquatique
Dans ce tuto Photoshop CS6, nous allons voir ensemble comment créer un texte avec effet…
Notes attribuées par les utilisateurs (6 votes)
Les avis / Questions des utilisateurs (10)
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 36 minutes a été acheté 82 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 2 janvier 2012 par VincentTutos, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto CSS Menu.
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 tuto classés dans nos 237 logiciels ou langages informatiques.
(a acheté ce tuto - 10 novembre 2012)
" merci vincent
j'ai un niveau debutant donc je vais laissé ainsi, ce n'est pas si genant.
merci encore pour ton tuto qui est top. "
(auteur de ce tuto - 08 novembre 2012)
" Bonjour funkyjeff,
Merci pour votre commentaire et excusez la réponse un peu tardive, je rentre juste de déplacement.
Concernant votre question il existe le sélecteur :target en css qui peux être détourné pour créerun effet de scroll (j'en fais l'utilisation dans l'un de mes tutos : http://fr.tuto.com/css/atelier-css-3-et-html-5-tv-en-css-3-css-html,35046.html), néanmoins sa mise en place n'est pas forcément aisée et peux prendre du temps.
Si vous ne vous sentez pas de vous embarquer dans du CSS un peu ardu, j'aurais tendance à vous conseiller d'aller voir du côté de jQuery, il existe un plugin qui s'appelle ScrollTo et qui permet de scroller automatiquement vers une portion de la page, vous pourriez par exemple activer ce plugin au survol d'une image (onMouseOver) en appelant cette fonction jQuery, vous trouverez toutes les informations sur ce plugin ici : http://flesler.blogspot.fr/2007/10/jqueryscrollto.html
J'espère que ce commentaire vous permettra de réaliser votre site comme vous l'entendez,
Bonne journée,
Vincent "
(a acheté ce tuto - 01 novembre 2012)
" Un grand merci, c'est parfait.
petite question : j'ai adapté à ma future utilisation et j'ai besoin d'un petit plus.
pour un effet plus percutant j'ai agrandi l’échelle, du coup certaines photos ne se retrouvent pas entièrement a l’écran a la remontée.
on est donc obligé de scoller pour voir la photo entière.
existe t il une petite propriété qui permette d'ajuster la montée de la page automatiquement afin de s'aligner sur la rangée de la photo quand celle ci monte ?
merci d'avance "
(auteur de ce tuto - 18 janvier 2012)
" Bonjour,
Merci pour votre commentaire.
En effet il est possible d'ajouter le préfixe -ms- devant les propriété css3 expliquée dans ce tuto. Cependant, certaines propriétés comme celle qui permettent l'animation ne sont pas encore implémentées dans la version actuelle du navigateur (9), ainsi les rotations et les changements d'échelle seront bien prises en compte, tandis que l'animation ne se fera tout simplement pas.
Gardez à l'esprit que Internet Explorer a souvent quelques difficultés à bien suivre les standards du web (W3C), et qu'il lui faut parfois plusieurs évolutions pour se trouver compatible avec les langages jeunes tels que le CSS3 ou le HTML5.
De ce fait il vous est plutôt conseillé de développer dans ces langages sur des navigateurs tels que Firefox, Safari ou encore Chrome, tout en gardant à l'esprit qu'un site internet doit toujours être le plus largement compatible avec les ordinateurs de vos utilisateurs qui eux ne seront pas toujours à la pointe des navigateurs.
Notez enfin que Microsoft a annoncé que le CSS3 serait implémenté dans son intégralité dans sa version 10, lequel est dors et déjà disponible pour les développeurs, mais pas encore pour le grand public.
Par ailleurs je vous remercie pour votre suggestion de tuto, je vais me pencher sur la question et enregistrer cela très vite.
Bonne journée,
Vincent "
(a acheté ce tuto - 18 janvier 2012)
" Bonjour
J'ai acheté sans regrets et suivi votre tuto "créez votre menu polaroid animé"
J'en suis enchanté.
Une question toutefois, s'il fonctionne très bien, les css3 ont du mal a être interprété par IE9 surtout pour les animations.
J'ai lu que l'on pouvait ajouter le préfixe -ms- devant la commande.
Qu'en est il?
Autre demande:
Pourriez vous faire un tuto sur les div qui montent et descendent comme sur ce site :
http://fr.tenbyfotolia.com/
Les 3 onglets du milieu
Merci de votre réponse
condon@bbox.fr "
(a acheté ce tuto - 07 janvier 2012)
" Très clair. "
(a acheté ce tuto - 07 janvier 2012)
" Merci pour ce tuto très intéressant et très bien expliqué.
Dommage qu'il n'y pas les fichier index et css ! "
(a acheté ce tuto - 07 janvier 2012)
" Tès intéressant "
(a acheté ce tuto - 04 janvier 2012)
" tres clair , merci "
(a acheté ce tuto - 02 janvier 2012)
" génial "