Como crear un especie de punteado delante de las fotografías web

[alexander_sp]

Hola,
hay un efecto que ahora esta muy de moda,
es el de crear un fino punteado o lineas delante de las fotos o sliders web;
como por ejemplo estas

http://themeforest.net/item/inesta-r...review/6648341

Es un efecto muy sutil, pero que les da estilazo.

Alguien sabe como se hace???

[Franchesquini]

En el link que pusiste no vi ese efecto, pero asumo que te referís a un efecto en la transición de las fotos. Si es así, lo podes hacer en CSS tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/

[alexander_sp]

Gracias Franchesquini pero no son las transiciones.

Son unas lineas que se aprecian en las 2 primeras fotos, muy sutiles... como si ya vinieran en la foto, unas lineas negras muy finas que estan delante de la foto, y que supongo que ya están en la propia foto.

Me gustaría saber como se puede hacer ese efecto en la foto!

[Franchesquini]

Ah, ya entendí.
Posiblemente hayan sido retocadas con Photoshop, probá con eso.

[siddartha23]

Se llaman rellenos de motivo, patrones o en Inglés "patterns". Aplicarlos sobre una foto es simple, descargas un "dot pattern" lo llevas a PS y lo guardas como motivo en menú Edición, luego abres la foto y en estilos de capa buscas superposición de motivo, ahí aparece el 'dot pattern' que habías guardado, puedes cambiarle la escala haciendolo mas pequeño, bajarle la opacidad, probar con fusiones de capa, etc.

Para implementarlo en un slider sin retocar la foto, podrías guardar el 'dot pattern' como png con fondo transparente y aplicarlo como background en una capa que quede por encima de las fotos, como vas a usar la propiedad background-repeat, no va afectar en nada a la carga de tu web...

[alexander_sp]

Gracias siddartha23 !!!
Si es eso lo a lo que me refiero, lo pruebo y te digo!!!
Gracias!

[Rafael]

Aunque es una opción, no es el caso en la muestra. Las fotos en sí no tienen efectos, el efecto está agregado después. La segunda foro está descargada del caché del navegador.

[alexander_sp]

Ostia que curioso Rafael,
supongo que para hacer esto es wordpress con CSS tiene que ser complicaado,
si no sabes demasiado sobre el tema.
Gracias!

[siddartha23]

Iniciado por alexander_sp

Ostia que curioso Rafael,
supongo que para hacer esto es wordpress con CSS tiene que ser complicaado,
si no sabes demasiado sobre el tema.
Gracias!

No es tan complicado, si sabes poner una capa sobre otra usando posicionamientos absolutos y relativos, ya tienes la mitad del trabajo hecho, el resto es usar un background con el pattern en png y queda...

[alexander_sp]

Gracias se me escapa de las manos!!!
pero lo puedo hacer con photoshop ;)
Saludos!

[Rafael]

Retomando el tema.

Bajé todas las imágenes que ocupa la página al cargar, y efectivamente encontré un png de 2x2 pixéles, semitransparente, que posiblemente es el que está repetido sibre toda la imagen.

Hacer esto permite que el patern se muestre de la misma calidad, independientemente de que la imagen de fondo se expanda o reduzca en diferente tamaño de pantalla.

Ampliar o disminuir el tamaño de un patrón puede producir muaré, por lo que al final no te recomiendo que lo hagas directo en la foto en cuestión, a menos que esta la presentes sin escalar en ningún momento.

[alexander_sp]

Gracias Rafael,
me arriesgaré por que a mi me es imposible, hacerlo con codigo!
además es un wordpress, y no se como hacerlo.
Intentaré poner una imagen con buena resolución aunque pese más!

[Rafael]

Después de analizarlo con tiempo. Efectivamente es una imagen transparente de 2x2 o 3x3 repetida encima de la foto.

[corazondepoeta]

Amigos no se si lo resolvieron, pero se hace utilizando ::after en la hoja de estilo CSS para el contenedor en cuestion en este caso es marquee.slide
El sitio de ejemplo que les pongo es el siguiente [URL="http://www.undec.edu.ar"]http://www.undec.edu.ar[/URL]

Y este sería el codigo que deben agregar cambiando por supuesto el nombre del contenedor:

Código CSS:

#marquee .slide:after {
    background-image: url('../img/marquee-overlay-bg.png');
    background-position: 0 0;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
}
 

[siddartha23]

Iniciado por corazondepoeta

Amigos no se si lo resolvieron, pero se hace utilizando ::after en la hoja de estilo CSS para el contenedor en cuestion en este caso es marquee.slide
El sitio de ejemplo que les pongo es el siguiente [URL="http://www.undec.edu.ar"]http://www.undec.edu.ar[/URL]

Y este sería el codigo que deben agregar cambiando por supuesto el nombre del contenedor:

Te faltó decir que el contenedor del pseudo-elemento debe tener position:relative...

Y con respecto a la imagen 'marquee-overlay-bg.png' ¿de donde sale? ¿está en algún CDN?

[memoadian]

Iniciado por siddartha23

Te faltó decir que el contenedor del pseudo-elemento debe tener position:relative...

Y con respecto a la imagen 'marquee-overlay-bg.png' ¿de donde sale? ¿está en algún CDN?

Es una ruta relativa, que apunta a las imágenes del theme en este caso.

[siddartha23]

Iniciado por memoadian

Es una ruta relativa, que apunta a las imágenes del theme en este caso.

Eso es algo obvio, me refería a que su solución es muy poco clara, parece que dijera que con ponerle un pseudo-elemento a un box el efecto se produce solo y no es así primero hay que preparar el pattern con el efecto que queremos que aparezca la imagen...

[memoadian]

Iniciado por siddartha23

Eso es algo obvio, me refería a que su solución es muy poco clara, parece que dijera que con ponerle un pseudo-elemento a un box el efecto se produce solo y no es así primero hay que preparar el pattern con el efecto que queremos que aparezca la imagen...

Pues a mi lo único que se me hace obvio es el código, cualquiera que entienda un poco de css lo sabe, tú mismo has dicho que es obvio, tú lo sabes, yo lo sé.

¿entonces?

[corazondepoeta]

Muchachos, los invito a pescar. Bien ustedes preguntan: Cómo se hace eso?. Bien, yo les digo como se hace, luego por ser gentil les presto una caña de pescar. Si?
Bueno el "PESCADO" búsquenlo ustedes. ja ja ja

[siddartha23]

Iniciado por memoadian

Pues a mi lo único que se me hace obvio es el código, cualquiera que entienda un poco de css lo sabe, tú mismo has dicho que es obvio, tú lo sabes, yo lo sé.

¿entonces?

A lo que me refería es que no se supo explicar y cualquier que lee su respuesta piensa que se hace a puro css y no es así, y ahí lo dejo por que ya está mas que claro el tema...

[alexander_sp]

Gracias chicos!
he descubierto que con wordpress y el plugin "revolutionslider" puedes crear ese punteado y con "LayerSlider" tmb se puede, pero no se como.

Saludos!