Esta crisis es peor que divorcio. He perdido la mitad de todo mi patrimonio, pero todavía tengo a mi mujer...
Leia Mais…domingo, enero 18, 2009
lunes, enero 12, 2009
Texturas grunge de alta resolución
via Intenta on 1/11/09
Interesante colección de paquetes de texturas grunge, de aspecto oxidado y en formato de gran resolución, obtenidas desde Deviantart.
miércoles, enero 07, 2009
Marcas de agua con CSS
via Intenta on 1/7/09
CSS Watermark es una forma sencilla de crear una marca de agua para nuestras imágenes. Se puede personalizar el lugar donde aparecerá la marca de agua: superior-izquierda (topleft), superior-derecha (topright), inferior-izquierda (bottomleft) e inferior-derecha (bottom-right).
Simplemente hay que incluir el CSS:
<link href="Watermark/Watermark.css" type="text/css" rel="stylesheet"></link>
y añadir el siguiente código cada vez que deseemos añadir una imagen con marca de agua:
<div class="watermark posicion"> <div class="text">Marca de agua</div> <img src="Nombre_Imagen.jpg" width="300" height="199" alt="alt imagen" > </div>
donde "posicion" puede tomar los valores: topleft, topright, bottomleft, bottomright.
Podemos modificar tanto el formato del texto, como la opacidad del mismo si modificamos la siguiente clase CSS incluida en el fichero Watermark.css:
div.watermark .text {
position: absolute;
cursor: default;
font: bold 22px Verdana, Arial, Sans-serif;
color: White;
margin: 4px;
line-height: 20px;
filter:
progid:
DXImageTransform.Microsoft.Alpha(opacity=50);
opacity: .5;
-moz-opacity: .5;
}Distinguir Google Chrome y Safari con CSS
via Intenta on 1/6/09
No es lo más ortodoxo pero a veces no hay más remedio que echar mano de ellos: dos hacks para distinguir los navegadores Chrome y Safari.
/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName {
/* Propiedades para Google Chrome */
}
/* Safari hack */
body:first-of-type .elementOrClassName{
/* Propiedades para Safari */
}
lunes, enero 05, 2009
SimpleTabs
via Intenta on 1/5/09
SimpleTabs es un script no intrusivo para realizar "tabs" (pestañas). Quizá la gran ventaja es que no depende de ninguna biblioteca como jQuery, Mootools, etc. Lo que significa, por un lado, que nos podremos evitar posibles conflictos entre librerías o incompatibilidades con otros scripts, y por otro qe el tamaño final del script será mucho menor. También cabe destacar que es capaz de recordar el último tab al que se ha accedido si se recarga la página.
Para implementarlo hay que incluir los ficheros simpletabs.js y simpletab.css files y replicar una estructura XHTML similar a la siguiente:
<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="simpleTabsContent">
Contenido llamado cuando a "Tab 1" se le hace click.</div>
<div class="simpleTabsContent">
Contenido llamado cuando a "Tab 2" se le hace click.</div>
<div class="simpleTabsContent">
Contenido llamado cuando a "Tab 3" se le hace click.</div>
</div>sábado, enero 03, 2009
Efecto "nudging"
via Intenta on 1/3/09
En el blog de David Walsh nos muestran como lograr un interesante efecto con jQuery para nuestros menús. Al posar el ratón sobre una opción de menú ésta se desplaza hacia la derecha con una animación. Es un efecto denominado "nudging", que se podría traducir como dar con el codo al enlace.
Para realizar el efecto, lo primero que tendríamos que hacer es enlazar en nuestro documento con la librería de jQuery.
<script type="text/javascript" src="jquery-1.2.6.js"></script>
Seguidamente construimos un menú al que deberemos añadir la clase "nudge" a cada uno de los enlaces:
<ul> <li><a href="#" class="nudge">home</a></li> <li><a href="#" class="nudge">acerca de nosotros </a></li> <li><a href="#" class="nudge">servicios</a></li> <li><a href="#" class="nudge">productos</a></li> <li><a href="#" class="nudge">contacta con nosotros</a></li> </ul>
Ahora tan sólo queda animar la propiedad "padding-left" tanto cuando estamos sobre una opción y cuando salimos de ella:
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '35px' }, 400);
}, function() { //mouse out
$(this).animate({ paddingLeft: '15px' }, 400);
});
}); Yo he establecido un valor inicial de "padding-left" de 15 px y que es el valor al que ha de retornar la opción de menú al evento "mouse-out". Cuando se está sobre la opción ésta se desplaza hasta un valor de 35 px. Para ambas acciones la velocidad es de 400 milisegundos. Lógicamente todas estos valores son modificables y se deberán ajustar a las pretensiones de cada uno.
Suscribirse a:
Entradas (Atom)
