4

Estoy tratando de colocar un efecto CSS "rejilla / cuadricula" a un entero.

En esta web se puede ver el ejemplo (abarca toda la primera seccion y el navbar) http://demo.uncommons.pro/themes/wp/maya/wedding/

No pude encontrar en su CSS el valor que genera dicho efecto

¿Alguna idea?

2 respuestas 2

7

Ese efecto lo logran con una imagen de 2x2 píxeles, y el pseudoelemento ::after

.dotted:after {
  background: url("../img/pattern_dot.png") repeat left top rgba(0,0,0,0.5);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  position: absolute;
  top: 0;
  bottom: 0;
}
1
  • Funcionó a la perfección. Mil gracias!
    – Elias Aria
    el 7 sep. 2016 a las 19:01
2

No se si te servirá de algo, pero se me ocurre poner una imagen que tenga la rejilla que buscas y añadirle en el CSS opacity: 0.2; o algo parecido, para bajarle la opacidad. También un color:grey; para darle ese tono grisáceo si usas algo de unicode o similares. Sería superponer la imagen que lleva la opacidad (o el icono si usas unicode) sobre la que quieres que se vea con ese efecto (y la de debajo con una opacidad normal, así se vería el efecto).

No lo he hecho nunca y no puedo ayudarte mas, espero que te sirva o te guíe un poco.

1
  • Lo he logrado hacer "imitando" el efecto con photoshop, pero solo abarcaria la parte de la imagen, y no la del navbar. Es buena idea igualmente
    – Elias Aria
    el 7 sep. 2016 a las 18:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.