Frase del día

Esta crisis es peor que divorcio. He perdido la mitad de todo mi patrimonio, pero todavía tengo a mi mujer...

Leia Mais…

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.

Free High Resolution Grunge Rustic Textures » »

Leia Mais…

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;
}

Ver ejemplo en funcionamiento » »

CSS Watermark » »

Leia Mais…

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 */
} 

Leia Mais…

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>

Ver ejemplo en funcionamiento en la web del autor

SimpleTabs by Komrade

Leia Mais…

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.

Leia Mais…