How can i do this design?/Como puedo diseñar esto?

Dise%C3%B1o
http://plan1estudio.com

I have 2 question:

  1. What is the name of the style of the background image?. This nice effect like grid. Or how can i create it?.
  2. How or what its the name of the function to “put” links in “spaces” with that kind of effect that “shine” when you put the cursor over the space
    Thanks in advance!.
    // Español:
  3. ¿Cual es el nombre del estilo de la imagen de fondo? como unas celdas, rendijas o cuadriculas? o como puedo crearlas?
  4. ¿Cual es el nombre de la funcion que “coloca” links en “espacios” con ese efecto que brilla al poner el cursos sobre este “espacio”?
    Gracias de antemano!.

y mil disculpas si parece muy atrevido preguntar tanto.

Sorry, I couldn’t look at it for long. It was very uncomfortable for me.

I just made a codepen for you: https://codepen.io/leebut/pen/gVvXLq
Be aware of the z-index and position.

I made a very small (2px) black dot with some empty space around it in Inkscape, see below. The whole image was 3px x 3px. Of course, this is much bigger to show the space around the dot. It could be any shape.
image

1 Like

Efecto que brilla: glow.

:hover change the outline or border and shadow. Just use colors that are like fire or neon lights. Look at old photoshop tutorials on how to make glows or shiny things or light scattering effects. There are css properties with similar names and its the process of building up parts of the “look”. For me it was photoshop tutorials because they explained better how things are supposed to look and how to describe what light does and putting it all together not which tool to use. Then look up how to “scatter” a shadow in CSS and use a border when you need a harder edge.

1 Like

As already shown, it’s just a pattern on top of the image. Here is the png they are using.

http://www.plan1estudio.com/plan1/wp-content/themes/plan1/images/pattern.png

You can use SVG as well (and use other patterns).

background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjIiPgogIDxjaXJjbGUgcj0iMS41Ij48L2NpcmNsZT4KPC9zdmc+");

Not really sure what I would call the effect. It’s almost like a CRT monitor effect. Part of the effect you get is a bit like a moire pattern. Depending on the content of the image it may show more or less of an interference pattern (especially when changing the viewport size). Also, the brighter the image the more “uncomfortable” it will be to look at for long periods of time.

The links are a bit more complicated. I didn’t really bother making them like on the page. To be honest I didn’t even notice the fade effect till after I (thought) I was done with the page and I didn’t want to spend much more time on it.

https://codepen.io/lasjorg/pen/LwQMJP

1 Like

Omg you are awasome. Thanksss!