[Résolu] Appliquer une trame à motifs sur une image / overlay

Bonjour,

Je parle bien d'une trame sur une image en background. J'ai déja deux solutions mais qui sont assez limitées.

1) trame lisse : j'assombris la photo

background-color: rgba(0,0,0,0.1);

Inconvénient : c'est lisse et pas très graphique

2) trame à petits carrés
- une image que je nomme "overlay.png" avec un carré noir de 1px et 3px transparents :

background-image: url(img/overlay.png);
background-repeat: repeat;*/

Inconvénient : le point se voit un peu trop (même atténué) mais on ne peut pas descendre en dessous de 1px a priori même si certain sites semble y parvenir.

Bref, avec les miracles du css3, je me demande s'il y a mieux, notamment en matière de trame à point ou motifs

goudurisc a écrit :
Voir le slider de ce site : http://mi2-avocats.fr/ qui est réalisé depuis le plugin revolution slider, pas possible de savoir comment c'est fait

Si si, c'est fait avec superposition d'une image: la voici: http://mi2-avocats.fr/wp-content/plugins/revslider/public/assets/assets/gridtile.png

Déjà merci, je n'étais pas parvenu à repérer cet image. Et ça alors, c'est la même image que celle de mon test avec 2X2px don 1 noir !!!

Pourtant, l'effet semble différent !

La seule différence, c'est que c'est une image bitmap et la mienne est en RVB

Par contre, il faudrait éviter d'animer l'image sous la trame comme sur ce site, à moins de souhaiter vraiment tuer des épileptiques.

bonsoir,

réaction tardive et pour infos . un gradient peut éventuellement donner quelques effets intéressants https://codepen.io/gcyrillus/pen/rexVWR

 background:
    linear-gradient(to left,transparent 50%, rgba(0,0,0,0.3) 50%),
    linear-gradient(to bottom,transparent 50%, rgba(0,0,0,0.3)50%),url(http://lorempixel.com/640/480/abstract/1);
  background-size:2px 4px, 4px 2px, cover;

et l'exemple fait disparaitre la trame sur hover avec

  background-size:0 0 , 0 0 ,cover;

Cependant, Il y a un defaut. Cela nécessite plus de ressources pour dessiner et redimensionner les gradients que l'usage d'un simple png a la bonne taille.

Techniquement, rien de tout cela ne peut être accompli dans une image.

Ce que fait ce code est de créer une image ainsi qui se répète:



que voici en png:



Le CSS n'est en rien plus «puissant» que ce que peut accomplir une image, CSS sera au mieux autant efficace (mais généralement moins). Le tout est de savoir ce que l'on veut faire.

"dans une image" ou "sans une image" ?

Je note que le css proposé par gcyrillus n'exploite pas d'image. Pour ce qui est de l'adaptation de ce code aux visuels de bannière de mon thème, j'ai retenu :

.fancy-header-overlay {
	background:
    linear-gradient(to left,transparent 50%, rgba(0,0,0,0.3) 50%)!important;
 	background-size:2px 4px, 4px 2px, cover!important;
}

Mais je comprends aussi, grâce à ton exemple en image, que la sensation de petite trame vient du fait que les 3 pixel qui entourent le point de trame ne sont pas blancs mais gris, ce qui, par effet d'optique, donne la sensation que le point est réduit.

goudurisc a écrit :
"dans une image" ou "sans une image" ?

Tout cela peut être accompli dans une image, c'est plus clair sans négation

goudurisc a écrit :
Mais je comprends aussi, grâce à ton exemple en image, que la sensation de petite trame vient du fait que les 3 pixel qui entourent le point de trame ne sont pas blancs mais gris, ce qui, par effet d'optique, donne la sensation que le point est réduit.

C'est exactement cela. Pour être précis, ce n'est pas gris, mais noir avec de la tranparence.

Mais c'est le concept: une bordure d'un pixel d'une couleur mélangée avec l'arrière-plan simule une ligne plus étroite qu'un pixel.

Tout s'éclaire donc !