Filtre blur sur background mais pas le texte
Azee Le 21 octobre 2016 à 16:59 (Édité le 25 janvier 2019 à 17:52)
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 !
TheOldNoob Le 21 octobre 2016 à 22:26
.block_content img { filter: grayscale(0.5) blur(10px);}
TheOldNoob Le 21 octobre 2016 à 22:34
Je recherche, j'ai eu le problème sur un projet, c'est assez relou a gérer le blur sur un background
TheOldNoob Le 21 octobre 2016 à 22:36
.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 Le 21 octobre 2016 à 22:44
Azee Le 21 octobre 2016 à 22:47
Azee Le 21 octobre 2016 à 22:49
non ça va pas marcher...Oui, effectivement, très relou ...
Je recherche, j'ai eu le problème sur un projet, c'est assez relou a gérer le blur sur un background
TheOldNoob Le 21 octobre 2016 à 23:18
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;
}
Partant de la, je sais que 1rem = 10 px
TheOldNoob Le 21 octobre 2016 à 23:20
Azee Le 21 octobre 2016 à 23:23
Qui où quoi définit la"convention actuelle" et qu'elle était elle avant d'être mobile first !?
TheOldNoob Le 22 octobre 2016 à 00:13
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 ...
