CSS effect "grid / grid" semi-transparent


I'm trying to put a CSS "grid / grid" effect on an integer.

On this website you can see the example (it covers the entire first section and the navbar) link

I could not find in your CSS the value generated by this effect

Any ideas?

asked by Elias Aria 07.09.2016 в 20:31

2 answers


That effect is achieved with an image of 2x2 pixels, and the pseudo element ::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;
answered by 07.09.2016 / 20:41

I do not know if it will be of any use to you, but it occurs to me to put an image that has the grid you are looking for and add it in the CSS opacity: 0.2; or something similar, to lower the opacity. Also a color: gray; to give it that grayish tone if you use some unicode or similar. It would be to superimpose the image that has the opacity (or the icon if you use unicode) on which you want it to be seen with that effect (and the one below with a normal opacity, that's how the effect would look).

I have never done it and I can not help you anymore, I hope it will help or guide you a bit.

answered by 07.09.2016 в 20:41