Filtre blur sur background mais pas le texte

Ce topic a été résolu
Azee

Azee Le 21 octobre 2016 à 16:59 (Édité le 25 janvier 2019 à 17:52)

Bonjour, bonjour, 

Après des heures de recherches, je me tourne vers vous !

J'aimerais sur ce projet : http://clement-loire.fr/ToODay/ que la <div class="block_content"> ait un background flou sans flouter le texte mais en enlevant l'image qui si trouve.

En gros, mettre un fond flou sur la div uniquement et non sur le contenu sans que cette div comporte une image, je sais que c'est simple avec l'image mais sans, je suis bloqué !

Merci à vous de m'aider !
Balatharas

Balatharas Le 21 octobre 2016 à 21:22

J'ai clairement rien compris 😗
TheOldNoob

TheOldNoob Le 21 octobre 2016 à 22:26

Dans ton css, essaie ça :

.block_content img {  filter: grayscale(0.5) blur(10px);}
TheOldNoob

TheOldNoob Le 21 octobre 2016 à 22:34

non ça va pas marcher...

Je recherche, j'ai eu le problème sur un projet, c'est assez relou a gérer le blur sur un background
TheOldNoob

TheOldNoob Le 21 octobre 2016 à 22:36

Essaie ça dans ton css :

.block_content{
   ici ton css actuel sans le background
   


}

.block_content:before {
    content: '';
    background: url('../images/background-1.png"') fixed 0 0;
    -webkit-filter: blur(5px);
           -moz-filter: blur(5px);
            -ms-filter: blur(5px);
             -o-filter: blur(5px);
                filter: blur(5px);
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;    
    z-index: -1;
}

Azee

Azee Le 21 octobre 2016 à 22:37

Oui, je pense que tu as compris, je m'explique très mal...
Azee

Azee Le 21 octobre 2016 à 22:44

Oui c'est exactement ça, j'avais trouvé cette solution mais le problème, c'est qu'elle n'est pas responsive et qu'elle ne s'adapte pas vraiment au background
Azee

Azee Le 21 octobre 2016 à 22:47

J'ai trouvé un thème pour les nas synology qui le fait, je vais le retrouver, mais je pense qu'ils ont du le faire en js. Aucune trace de filter blur dans le css
Azee

Azee Le 21 octobre 2016 à 22:49

non ça va pas marcher... 

Je recherche, j'ai eu le problème sur un projet, c'est assez relou a gérer le blur sur un background
Oui, effectivement, très relou ...
TheOldNoob

TheOldNoob Le 21 octobre 2016 à 23:18

Vois avec ce que j'ai proposé après.
Par contre, c'est pas responsive parce que tu as un soucis avec ton css.
Quand je regarde les tailles de polices que tu utilise pour tes font-size sont en 'em' et c'est pas ce qu'il y a de plus facile a utilisé pour avoir un rendu responsive.
Pour ma part, j'utilise le 'rem' comme unité pour la taille de mes fonts et je fait un reset navigateur quicomme cela :

* { /* Réinitialisation navigateur*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font: 62.5% arial, sans-serif; /* pour normalisé la taille de mes fonts */
    color: #323232;
    background: #ddd;
}
img {
    max-width: 100%; /* pour que mes images soit de la taille de leur bloc parents*/
}
h1, h2, h3 {
    color: #fff;
}
h1 {
    font-size: 3.2rem;
}
h2 {
    font-size: 2.5rem;
}
h3 {
    font-size: 1.3rem;
}
body {
    font-size: 1.2rem;
}
Le fait de définir les font a 62,5% va permetre de mettre mes fonts a 10px, puisqu'on sais que de base une font est de 16px 62,5% de 16 = 10
Partant de la, je sais que 1rem = 10 px
TheOldNoob

TheOldNoob Le 21 octobre 2016 à 23:20

Sinon, pour avoir un rendu vraiment responsive, la convention actuel veux qu'on developpe mobile first et qu'on adapte avec les media queries pour les ecrans plus grand.
Azee

Azee Le 21 octobre 2016 à 23:23

Top ca, merci bcp pour ton astuce du rem, je testerais et te tiens au courant !

Qui où quoi définit la"convention actuelle" et qu'elle était elle avant d'être mobile first !?
TheOldNoob

TheOldNoob Le 22 octobre 2016 à 00:13

Quand je parle de "convention actuel" c'est une expression pour dire que c'est la façon de codé actuel. Puisque ça évolue rapidement et constament il faut s'adapté. Sinon, c'est surtout le W3C qui défini réelement les conventions.

Avant mobile first je dirais qu'on faisais du desktop first 😋

Même si je suis pas certains qu'on pouvais définir ça avant.
Quand je parle de mobile first, c'est surtout que de nos jours les smartphone et tablette on une très grosse part de marché utilisateur. On ne peu pas les ignorer. Donc, pour nous facilité la tache, nous intégrateur, on va au plus simple => on fait pour les mobile et on adapte pour les autres.
Si un site n'est pas adapté pour les mobiles, tu perd automatiquement le client qui visite le site.
Mobile first apporte aussi un autre aventage, c'est qu'on peu se passer de créer une apli mobile. Déjà au niveau du cout de developpement tu économise les spécialiste api mobile pour les différents OS mobile. Ensuite, il faut prendre en compte que tout le monde n'a pas la place sur son smartphone d'avoir 85 apli installer. Donc la selection d'un utilisateurs va vers les plus utile et les plus a la mode.
Si ton site est fait pour les mobiles, on peu se passer d'une apli ...
Azee

Azee Le 22 octobre 2016 à 09:27

P'naise, très intéréssant ! Merci !!!
TheOldNoob

TheOldNoob Le 22 octobre 2016 à 10:55

Tu a essayé la deuxieme solution que je t'es proposé?
Azee

Azee Le 23 octobre 2016 à 15:44

Yep, ca marche effectivement ! Merci !
Balatharas

Balatharas Le 23 octobre 2016 à 16:34

Plus qu'a cliquer sur Résolu 😉 @Azee
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte