28112 sujets

CSS et mise en forme, CSS3

[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 Smiley ohwell
Modérateur
bonjour,

je ne comprends pas trop ce que tu cherches à obtenir.

as-tu un visuel de l'effet recherché?
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.

Le point de trame a l'air d'être inférieur à 1px, ce qui est très bien en rendu et j'imagine donc que ce n'est pas obtenu à partir d'une image...
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 ! Smiley eek

La seule différence, c'est que c'est une image bitmap et la mienne est en RVB
Modérateur
Par contre, il faudrait éviter d'animer l'image sous la trame comme sur ce site, à moins de souhaiter vraiment tuer des épileptiques.
Modérateur
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.
gcyrillus, c'est exactement ce que je cherchais, la trame apparaît beaucoup plus fine qu'avec un carré de 1px, la puissance du CSS me sidère à chaque grande découverte ! (l'usage de ce gradient en est une pour moi Smiley cligne
Merci beaucoup !!!! Smiley cligne
Modérateur
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:

upload/1507893263-32231-trame.jpg

que voici en png:

upload/1507893288-32231-trame2.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.
Modérateur
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 Smiley smile


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.
Sujet clos
Aller à