Búsqueda personalizada

Agrega Estilos a tus imagenes con enlaces

styleimg.jpg

Image Link es un script que permite aplicar un estilo adicional a los enlaces de nuestras imagenes. Este script nos permitirá no solo agregar bordes en estado activo sino llegar un poco más lejos que eso agregando imágenes superpuestas. Image Link nos permite crear diversos estilos y hacer uso de cada uno de ellos llamando a una clase especifica, o evitar hacer usos de las clases y dejar que el script automáticamente resalta los enlaces de nuestras imágenes de forma default utilizando siempre un único estilo.

Descarga Image Link

USO

Descargamos el script Image Link. Descomprimimos cada uno de los archivos y los alojaremos en nuestro servidor, posteriormente realizaremos la llamada al script, introduciendo en nuestro encabezado, dentro de las etiquetas < head > …..< /head > el siguiente código.

JavaScript:

<script type=“text/javascript” src=“imagelink/imagelink.js”></script>

Tambien agregaremos un poco de CSS para los estilos:

CSS:

<style>/* Estilos Usados en los ejemplos */ 

.imageOver{
    background:url(zoom.gif) no-repeat 50% 50%; 
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;   
}
.imageOver2{
    background:#fff;   
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;   
}
.imageOut2{
    background:url(frame.gif) no-repeat 0 0;   
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.imageOver3{
    background:url(frame.gif) no-repeat 0 0;   
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;   
}
.imageOver4{
    background:url(pattern.gif) repeat
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;   
}
.imageOver5{
    background:url(button.gif) no-repeat 50% 50%;   
}
</style>

Implementándolos:

s0.jpg

La lupa es el estilo por default, no necesitaemos aplicar ninguna clase y el script automáticamente en estado over o al posar el mouse sobre la imagen, nos mostrara la lupa que indicara seguir un enlace. Entonces para este ejemplo agregaremos nuestras imágenes de forma tradicional y sin llamar a una clase.

HTML:

<p><a href=”http://borchani.com”><img src=”image.jpg” alt=”image” /></a></p>

Llamar a clases y diversos estilos

 jg.bmp
Comenzamos a utilizar diversos estilos, por lo tanto llamamos a una clase class= “Nombre”:

HTML:

<p><a href=”http://enlace.com”><img class=”image2″ src=”image.jpg” alt=”image” /></a></p>
vbjm.bmp
HTML:
<p><a href=”http://enlace.com”><img class=”image4″ src=”image.jpg” alt=”image” /></a></p>
fgh.bmp
HTML:
<p><a href=”http://enlace.com”><img class=”image5″ src=”image.jpg” alt=”image” /></a></p>

 Si vas a cambiar los nombres en los estilos, debes recordar también cambiar los nombres en el archivo javascript.

Espero les haya sido util, nos vemos
Joel

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS,Desarrollo Web,Diseño,Maquetación | Responder

Posteet – Guardar y Compartir fragmentos de códigos

postttee.jpg

Si tienes miedo perder fragmentos de códigos que guardas en tu ordenador o careces de una portátil que te permita llevar contigo tus códigos vayas a donde vayas para tenerlos siempre a mano al momento de necesitarlos, quizás el nombre Posteet deberías recordar. Es un sitio que nos permite guardar y etiquetar fragmentos de códigos que solemos utilizar a diario o bien que encontramos al navegar por Internet. Posteet nos permitirá también guardar todo nuestros código de forma privada, para de esta forma tener solo acceso a ellos nosotros, pero también podremos en caso de decidirlo así, compartir todo lo que guardemos aquí con el resto de los usuarios.

Enlace Posteet

Fuente wwwhatsnew

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS,Desarrollo Web,Diseño,Maquetación | Responder

CSS – Recursos útiles para desarrolladores

webdevelopersfieldguide.jpg

Web Developer’s Field Guide otro sitio que se encarga de recopilar enlaces y recursos útiles para desarrolladores y diseñadores. La lista va desde artículos hasta técnicas CSS, Trucos, sitios donde podremos obtener bonitas fuentes, ajax, sitios de inspiración, javascript, herramientas de color, patterns, etc. Seguramente muchos artículos ya los hemos conocido desde la fuentes originales, y en el peor de los casos, la lista recopilada se repita mucho en sitios similares o con el mismo fin, de todas formas vale la pena echar una mirada y ver cuales son los artículos que hemos pasado por alto, o aquellos que valen la pena recordar y que hemos olvidado con el tiempo.

Enlace Web Developer’s Field Guide

 

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS,Desarrollo Web,Diseño,Maquetación | Responder

Novedades