Barre de blur

**Xjames56X** · 23/06/2014, 13h52

Bonjour à tous et à toute amis webmaistres !

J'ai un problème. j'essaye de faire une barre horizontale qui mesure 70px de hauteur. Elle est transparente et donne un effet de flou au texte qui défile dessous... mais voilà je n'arrive pas à la dimensionner pour 70px puisque si je ne met rien dans le div "<div id="bd"></div>" la barre ne "floute" plus et si je met quelque chose dedans... ben sa floute tout ! voici mon code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Le Nouveau Journal</title>
    </head>
    <body style="background-color: rgb(238, 238, 238); z-index: 1">
    <p class="Titre" style="text-align: center">Le Nouveau Journal</p>
    <div id="bd"></div>
    <div class="tout">
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p> 
    </div>
    </body>
</html>

et mon CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.Titre {left: 1%;
position: fixed;
z-index: 4;}
#bd{padding: 0px;
margin: 0px;
border: none;
width: 100%;
min-height: 70px;
max-height: 70px;
position: fixed;
top: 0px;
-webkit-filter: blur(2px);
z-index: 2;
display: inline-block;}
 Répondre

**Bisûnûrs** · 23/06/2014, 15h08

Il doit manquer une partie de ton code, je n'arrive pas à voir quel est le problème. Ici le code donné floute bien le texte dans le div #bd quand j'en mets un.

**Xjames56X** · 23/06/2014, 15h59

En fait ce que je veux c'est que sa fasse une barre qui se limite a 70px et que qu'au fur et à mesure que l'utilisateur descende le texte remonte (logique) et quand le texte arrive dans les 70 px du haut il soit flouté... Donc je n'ai pas de valeur précise à flouter juste je voudrai une barre-filtre qui floute ce qui passe "dessous"

Barre de blur

CSS

Vue hybride

Discussions similaires

Partager

Partager