Magia con jQuery
Ya conocéis mi debilidad por usar Ajax en diseño web, me parece una solución que además de dar usabilidad a nuestra web, nos da oportunidad de sorprender al usuario, captando así su atención.
En esta ocasión vamos a hablar de unas cuantas librerías para hacer animaciones.
Muchos de los ejemplos que vais a ver están en bruto, es decir, no llevan nada de diseño, en vosotros estará el hacer que esas animaciones sean todo lo espectaculares que vuestra imaginación os sugiera.
ilustraciones y photoshop
Desde hace un tiempo, el Arte Digital y en particular el vectorizado tratado posteriormente con Photoshop, inunda el Diseño Web.
He encontrado un post súper interesante con trabajos de los mejores ilustradores del Mundo. No tiene desperdicio, aquí os dejo una pequeña muestra, pero os aconsejo que visitéis el post porque puede además de daros una idea de lo “grandes” que son estos diseñadores, podréis ver cómo son capaces de además de realizar diseños increíbles, hacernos dudar de si se trata o no de una fotografía.
Comparte este Blog de Diseño Web
Fuentes Graffiti Gratis
El Diseño Web se nutre de una cantidad ilimitada de estilos, y la combinación de estos. Hace varios meses, escribí en este blog de diseño web un par de post relacionados con el graffiti y la respuesta fue increíble, se ve que hay mucho grafitero al que le interesa el diseño web, pues bien, he encontrado en dzineblog.com 30 fuentes grafiteras bastante buenas y gratuitas que seguramente os vengan bien para vuestros diseños, además podéis descargarlas tanto para Win como para Mac.
Espero que os gusten.
POST RELACIONADOS CON EL GRAFFITI
Comparte este Blog de Diseño Web
Rotar texto Html con CSS
Hoy vamos a ver otro “truco de diseño web con CSS“. Vamos a girar un texto, algo que hasta ahora no quedaba más remedio que hacerlo con una imagen. Además contamos con la ventaja de que se ve en Explorer !!, como veremos más adelante para Explorer hay que hacer algún “retoque”, pero se consigue girar, que es lo importante.
Ese “truco”, nos permite abrir aún más el diseño de nuestros sites, utilizando además texto en Html, lo cual significa menor peso y ayuda al posicionamiento SEO.
A continuación vamos a ver el código necesario y lo fácil que es usarlo.
Comparte este Blog de Diseño Web
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
<style>
body { font-family: Arial, Helvetica, sans-serif; }
.fecha {
background-color:#c02f55;
position:absolute;
padding:45px 5px 0px;
margin:0px;
}
.fecha .mes {
text-transform: uppercase;
font-size:25px;
}
.fecha .dia {
font-size:45px;
line-height:45px;
position:absolute; left:5px; top:0px;
}
.fecha .year {
display:block;
position:absolute; right:-5px; top:15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
color: #fff;
}
</style>
</head>
<body>
<div class="fecha">
<span class="dia">31</span>
<span class="mes">July</span>
<span class="year">2009</span>
</div></body>
</html>
