Tutoriel Vidéo HTML-CSS : Menu Flou en CSS3

Dans ce tutoriel vidéo vous apprendrez à réaliser un effet de flou sur un menu grâce à l'argument BLUR de la propriété CSS3 text shadow. Nous rajouterons en plus une transition  en  CSS3 pour animer notre menu.

La version actuel d'internet explorer (9) ne supporte pas les transitions en CSS3.
Il est possible de faire fonctionner l'effet de flou avec cette méthode.

Démonstration


Télécharger la vidéo
(Réservé aux premiums)

Télécharger les sources
(Réservé aux premiums)


Designer x Développeur. http://jeijones.com http://www.creatiq.fr/ http://jeijones.tumblr.com/ #jQueryMartialArtist #CakePHPCooker #CSS3Magician

Vous aimerez aussi

Loader Animé

Loader Animé
11m

Dans ce tutoriel vous allez apprendre à créer votre propre loader animé...

Menu accordéon

Menu accordéon
15m

Dans ce tutoriel vous allez apprendre à intégrer un menu/sous-menu au...

19 commentaires
Ajouter un commentaire

gugul Il y a 13 jours Répondre

Pas très difficile à mettre en place, mais d'un point de vue personnel, je trouve pas ça très esthétique ^^

Weby Il y a 30 jours Répondre

…Par contre, si pas de text-shadow le menu est invisible. Tu as une solution ?

Creatiq Il y a 30 jours - Répondre

Si tu parles pour IE, regarde la description du tutoriel, il y a la possibilité de créer un text_shadow flou avec IE, un pseudo hack :D

Weby Il y a 30 jours Répondre

Hooo, super ton idée d'utiliser color:transparent+text-shadow pour faire du flou !!!

Ianis Il y a 30 jours Répondre

Tutoriel Vidéo HTML-CSS : Menu Flou en CSS3

Bonjour
je débute en CSS et je suis entrain de remettre
à niveau un vieux site
Pour cela j'utilise ce tutoriel : Tutoriel Vidéo HTML-CSS : Menu Flou en CSS3
pour faire le menu.

Dans l'exemple les titres du menu sont composés d'un seul mot et ça marche très bien
Exemple : Presentation
Image
Videos

Dans mon projet les titres sont composés de titres avec un mots et de titres avec plusieurs mots
Exemple :

Présentation
Art de vivre

et cela ne marche pas
cela joue uniquement sur le premier mot et le second est renvoyé à la ligne
comme cela :

Art
de
Vivre


Pouvez vous me dire pourquoi ?

Creatiq Il y a 30 jours - Répondre

Vérifie le code CSS, j'ai mis un display:bock sur l'élément, agrandi la width du conteneur

sei05 Il y a 1 mois Répondre

Yeah merci du tuto

pierrot Il y a 1 mois Répondre

Aussi efficace qu'un jambon purée! :D Merci pour le tuto

Ciloe Il y a 1 mois Répondre

Aucun moyen de le faire facilement avec du CSS2? Le CSS3 est trop peut valide pour le mettre en place sans se prendre la tête...

SummerlySubset Il y a 1 mois Répondre

Sympa le tuto, merci

David Il y a 1 mois Répondre

Super tuto merci

Cristof Il y a 1 mois Répondre

sympas ce pti effet, ça peut être marrant à utiliser merci

igors Il y a 1 mois Répondre

Sympa

Johayeux Il y a 1 mois Répondre

C'est simple, c'est rapide, c'est efficace ! Merci.

hlibre Il y a 1 mois Répondre

merci pour ce tutoriel.

extrarox Il y a 1 mois Répondre

Salut,

Merci pour ce tutoriel, ça fait longtemps qu'on ne t'avais pas vu, cool d'être revenu pour nous^^

Pour IE, ils sont vraiment à la ramasse chez Microsoft...

magicvince76650 Il y a 1 mois Répondre

salut super tuto mais quelle est ta coloration syntaxique ?

Ex0tiik Il y a 1 mois Répondre

Toujours de si bons tutoriel, Creatiq, franchement j'suis fan de toi!
Merci beaucoup en tout cas pour ce petit tuto avec un rendu très sympathique !

Creatiq Il y a 1 mois - Répondre

Héhé

dutbas Il y a 1 mois Répondre

C'est vrais que c'est assez simple et la rendu est bien !

totof Il y a 1 mois Répondre

dommage sous ie !

Creatiq Il y a 1 mois - Répondre

IE ne gère pas les transitions et pour faire fonctionner le flou c'est vraiment pas top, plus du "bidouillage" tu peux aller voir ici : http://www.useragentman.com/blog/2011/04/23/css-blurred-text-shadow-in-ie-part-i/

Chris31 Il y a 1 mois Répondre

Prem's!
Bravo super tutoriel!

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.