Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como Imágenes

Lookeando las imágenes con CSS

Tips y Tutoriales para Blogger

Hace tiempo encontré grandiosos efectos que se pueden lograr sólo con CSS, como un efecto vintage , en Ciudad Blogger y un filtro de escala de grises , en Oloblogger. Con estos métodos como base, se pueden lograr infinitas opciones para decorar las imágenes. Imagen de The Art of Matt Kaufenberg . Para lograr la textura utilizamos los CSS Patterns  con los cuales utilizamos un liviano trozo de base64, obtenemos grandes resultados. Acá te muestro el CSS de los ejemplos, y luego el HTML. Recuerda que puedes experimentar cambiando los colores, probando con las texturas y agregando lo que quieras para lograr todo lo que creas posible, esto sólo es una base para que obtengas tus propios resultados. Ejemplo 1 . clase-a-eleccion { width: 320px;   /* Ancho de la imagen */ height: 265px;   /* Alto de la imagen */ position: relative; float:left; } . clase-a-eleccion  img { padding:0; margin:0; width:100%; height:100%; } . clase-a-eleccion :before { content...

Galería de Imágenes Simple, con Javascript y CSS

Tips y Tutoriales para Blogger

¡Hola! Ya extrañaba escribir en mi blog. Vuelvo con esta genial galería de imágenes que es muy fácil de insertar y es súper simple. Sólo es necesario insertar el HTML, y decorarlo un poco con CSS, veamos: <div id="galeria"> <div id="galeria_imagen"> <img id="imgGaleria" src=" URL-IMAGEN-POR-DEFECTO " /></div> <div id="galeria_miniaturas"> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-1 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-2 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-3 " /> <img class="miniatura" onclick="javascript:document.getEle...