18100 sujets

Questions générales et questions de débutants

[Résolu]Effet de flou

Il suffit de créer une image avec ton texte qui n'est pas flou, et puis une autre qui est floue, et tu la mets en hover.

Ça se fait très facilement avec Photoshop avec le flou gaussien.
Ou sans image, tu peux jouer avec le text-shadow.

Texte non floue : Ton texte
Texte floue : Ton texte plus petit avec un text-shadow.
Bonsoir,

MoOx a écrit :
Ou sans image, tu peux jouer avec le text-shadow.

Texte non floue : Ton texte
Texte floue : Ton texte plus petit avec un text-shadow.


Petit bémol, cette propriété CSS n'est reconnue que par le navigateur Safari.
Ce qui pose un petit problème d'accessibilité Smiley confus .
merci à vous. Je ne m'en sors pas avec la propriété text-shadow (reconnu par Firefox, en fait...), ou je suis mauvais, ou ça ne peut pas faire ce que je souhiate ! Smiley cligne
Je vais devoir me mettre à Photoshop...
Text-shadow est supporté par tous les navigateurs dans leur dernière version, sauf IE évidement...
Je vais faire un test à midi pour faire un effet de flou correcte.

Edit : Et un problème d'accessibilité à cause d'un text-shadow, j'aimerais bien voir... Au pire un design dégradé je veux bien...
Modifié par MoOx (15 Jan 2010 - 09:16)
jQz a écrit :
Ce qui pose un petit problème d'accessibilité Smiley confus .
Attention à ne pas confondre accessibilité et interropérabilité.

Un effet purement décoratif absent sur certains navigateurs n'est en aucun cas un problème d'accessibilité (puisque l'information reste accessible, ce qui manque n'étant que de la présentation).
bonjour,
j'ai pris ton problème comme exercice et
je me suis permise de tester quelque chose en css avec Text-shadow, si cela peut t'aider.

<ul class="flou">
	<li><a href="#" alt="">Menu 1</a></li>
	<li><a href="#" alt="">Menu 2</a></li>
	<li><a href="#" alt="">Menu 3</a></li>
	<li><a href="#" alt="">Menu 4</a></li>
	<li><a href="#" alt="">Menu 5</a></li>
	<li><a href="#" alt="">Menu 6</a></li>
</ul>



ul.flou
	{
			list-style-type:none;
	}	
ul.flou li
	{
			float:left;
			text-align:center;
	}
ul.flou:hover a, ul.flou:focus a
	{
		text-shadow: #EEE 0px 0px 3px; 
		color: #EEE;
	}
ul.flou a
	{
		padding: 5px;
		color: #FFF;
		background-color: #666;
		text-decoration: none;
		font-weight: bold;
	}
ul.flou a:hover
	{
                color: #FFF;
		text-shadow: none;
	}


Internet Explorer : ne fonctionne pas
Firefox : ok
Chrome : ok
Opera : ok

Sur opera, si je ne modifie pas la couleur du lien dans (.flou:hover a, .flou:focus a // .flou a:hover) alors le text-shadow n'est pas pris en compte.
merci, ça marche pas mal ! Juste dommage que l'effet de flou ne soit pas plus pronocé, et ce même en changeant la valeur, y'a rien d'énorme... Mais c'est déjà pas mal ! Merci encore !
Essaie avec ça sous un webkit (safari, chrome) ou ff > 3.6, ou opera 10.5, ca rend pas mal (ca utilise plusieurs text-shadow Smiley cligne 

<html>
<head>
<style>
body {
    background-image: url(http://www.stripegenerator.com/generators/generate_stripes.php?fore=C4BCBC&h=30&w=6&p=6&back1=ABA4A4&back2=ff0000&gt=0&d=0&shadow=0) ;
    color: #fff;
    font-family: rockwell, georgia, serif;
}

code {
    white-space: pre-wrap;
}

/** start */
#blurred {
    list-style-type: none;
    line-height:40px;
    font-size: 26px;
    background-color: rgba(0,0,0,.7);
    overflow: hidden; /* for the li float */
}
    
    #blurred li {
        float: left;
        text-align: center;
    }
    
        #blurred:hover a,
        #blurred:focus a {
            color: #eee;
            color: rgba(255,255,255,0.1);
            text-shadow:
             rgba(255,255,255,0.2) 0px 0px 2px
            ,rgba(255,255,255,0.3) 1px 0px 4px
            ,rgba(255,255,255,0.3) -1px 0px 4px
            ,rgba(255,255,255,0.3) 0px 1px 4px
            ,rgba(255,255,255,0.3) 0px -1px 4px
            ;
        }

        #blurred a,
        #blurred a:hover
        {
            display: block;
            padding: 20px 10px;
            
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            text-shadow: #fff 0 0 1px;
        }
</style>
</head>
<body>
    <ul id="blurred">
        <li><a href="#">home</a></li>
        <li><a href="#">web</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">hire me!</a></li>
    </ul>
</body>
</html>
Sujet clos
Aller à