Dans ce tuto CSS 3 & Photoshop CS5 en vidéo, nous allons voir comment concevoir une bannière de navigation animée pour votre site internet. Ce tuto se divise en deux parties :
  • Une partie programmation en CSS 3 & HTML 5 : Nous verrons comment gérer les effets d'animation au survol de l'une des rubriques de notre menu, et comment faire en sorte que la rubrique survolée reste opaque tandis que les autre rubriques s'assombriront.
  • Une partie graphisme avec Photoshop CS5 : Nous partirons d'une image unique et la découperont en vignettes de sorte à pouvoir animer ces vignettes indépendamment les unes des autres.

Ce tuto est destiné à tous ceux quoi souhaitent améliorer leurs connaissances en CSS 3. Il est nécessaire de posséder quelques notions de base en HTML, CSS et Photoshop.

Les fichiers sources sont livrés avec cette formation. Bon tuto à tous!

Jetez un oeil à ces autres tuto CSS 3, Photoshop CS5

Pack créer et développer un portfolio de A à ZPack créer et développer…
Voici un tuto créer et développer un portfolio de A à Z dédié…

Le CSS Responsive avec Emmet, Sass et CompassLe CSS Responsive avec Emmet,…
Tuto CSS Responsive avec Sass, Emmet, Compass : créer un site…

Découverte de Foundation 5Découverte de Foundation…
Tuto Foundation 5 : Un framework CSS Responsive pour le design…

Créer une superposition de div lors du scroll dans une pageCréer une superposition de…
Dans ce tuto vidéo nous allons voir ensemble comment créer…

Créer un site One Page complet de A à ZCré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 slider d'images en full pageCréer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…

Menu déroulant intelligent en full CSS 3Menu déroulant intelligent…
Avec ce tuto CSS 3, apprenez à réaliser un menu déroulant…

Débuter avec BootstrapDébuter avec Bootstrap
Dans cette formation Bootstrap complète de plus de 2h30, nous…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto CSS 3, Photoshop CS5 de 1 heure 1 minute est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

VincentTutos , Formateur

Bonjour ! Je m'appelle Vincent Tartar je suis chef opérateur caméra sur les plateaux de tournage et aspirant réalisateur. Je suis passé par beaucoup de corps de métier, du web à l'image, ce qui m'a naturellement emmené vers l'enseignement (je suis ponctuellement professeur de cinéma au lycée) et la création de tutos. N'hésitez pas à me contacter si vous avez des questions, j’essaierai de vous répondre au mieux ! Mon blog : http://www.thepixelisland.com

Toutes les formations de VincentTutos


 

D'autres tuto de VincentTutos

Créez votre menu polaroïd animéCréez votre menu polaroïd animé
Dans ce tuto CSS 3 en vidéo, nous allons voir comment concevoir un menu de navigation…

Atelier CSS 3 et HTML 5 : TV en CSS 3Atelier 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 3DRé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 aquatiqueCréez un texte avec effet aquatique
Dans ce tuto Photoshop CS6, nous allons voir ensemble comment créer un texte avec effet…

voir tous les tuto de VincentTutos

Notes attribuées par les utilisateurs (1 vote)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (3)

par VincentTutos
(auteur de ce tuto - 19 janvier 2012)

" Bonjour,

Concernant la compatibilité de ce menu, il sera visible et fonctionnel sans problème sous la majorité des navigateurs dont Firefox, Safari & Chrome.

Concernant Internet explorer, il est possible d'ajouter le préfixe -ms- à votre propriété CSS pour que le navigateur interprète le script comme vous le souhaitez, cependant la prise en charge des animations n'est pas encore compatible avec la version 9 (implémentation prévue pour la version 10).

Enfin en ce qui concerne Opéra, la dernière version du logiciel n'interprète pas encore l'effet de fondu animé, cependant il interprète le code sans problème et le menu s'affiche sans encombre.

Je vous invite par ailleurs à consulter ce tableau de compatibilité CSS3 : http://www.findmebyip.com/litmus/

Gardez à l'esprit que le CSS3 devrait normalement être implémenté sur tous les nouveaux navigateurs et que les légers décalages de version sont liés au fait que la version 3 du langage CSS est assez jeune, cela devrait rentrer dans l'ordre d'ici peu.

Cordialement,
Vincent "

par Makeindesign
(n'a pas acheté ce tuto - 19 janvier 2012)

" Bonjour,

juste une petite question, pour la compatibilité, quels sont les navigateurs qui sauront faire fonctionner ce menu ?

Merci. "

par lolos972
(n'a pas acheté ce tuto - 18 janvier 2012)

" superb "

 

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, Photoshop CS5 d’une durée de 1 heure 1 minute a été acheté 38 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 12 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.

N'hésitez pas à nous contacter si vous avez la moindre question !