Efectos en texto con jQuery
Hoy traemos más jQuery para diseño web. En este caso se trata de efectos aplicados a párrafos y textos en general.
Podréis simular desde el típico efecto de máquina de escribir, hasta los efectos más alucinantes que hasta ahora sólo eran terreno flash.
A continuación os dejo el listado de efectos junto a la dirección en la que podéis descargarlos. Espero que os sirvan.
CONTINUAR LEYENDO “Alucinantes efectos en texto con jQuery” »
Generador de texto curvo en CSS y HTML5
Gracias al HTML5 el diseño web está viendo cómo paso a paso van cayendo todas las barreras que hasta ahora nos limitaban como diseñadores.
Gracias a CSSWarp ahora podemos diseñar un texto como si estuviésemos trabajando con Ilustrator. Con CSSWarp podemos rotar, inclinar, curvar el texto de tal modo que nos permite hacer cualquier diseño con él y luego obtenerlo como código HTML. Además también nos permite seleccionar cualquier tipo de fuente de Google Web Fonts, lo que lo convierte ahora mismo en la herramienta más potente para generar texto en CSS y HTML.
El uso no podría ser más simple, una pantalla gráfica nos ayuda a generar el diseño y una vez finalizado no tenemos más que pulsar sobre el botón “Generar HTML”, sencillamente GENIAL !!!
Fuentes Grunge Gratis
Es evidente que en los últimos tiempos el grunge ha influido notablemente en el diseño web.
En este blog de diseño web, ya hemos abordado varias veces el tema del grunge en el diseño web.
Hoy os dejo el enlace a un interesante post de madtuts.com en el que podréis descargaros gratuitamente 50 fuentes grunge para vuestros diseños web.
Espero que os sean de utilidad.
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
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.
<!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>
CONTINUAR LEYENDO “Rotar texto Html con CSS” »
