por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
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>
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
CSS3
En este blog de diseño web, hemos visto en numerosas ocasiones los problemas que origina la «batalla entre navegadores», la cantidad de puertas traseras que tenemos que buscar para que el resultado se visualice igual en uno que en otro.
Con la llegada del CSS3, tendremos muchas más posibilidades de controlar el diseño del blog o de la web que estemos construyendo. CSS3 tiene un mayor control sobre la maquetación, permitiéndonos diseñar sin pensar en las dificultades que nos van a originar los distintos navegadores.
Este es uno de los problemas de ser diseñador y además maquetador, ya que a menudo te condiciona el ser conocedor de los problemas que luego te vas a encontrar en la maquetación, aunque habrá quien lo vea como beneficioso…
CSS3 incorpora muchas novedades, vamos a destacar algunas de las que me parecen más impactantes, por su resultado visual y sobre todo por lo difícil que ha sido conseguir ese mismo resultado hasta la fecha.
(más…)
por Omar Benyakhlef | Diseño de páginas web, SEO
Keywords con Google AdWords
En este blog de diseño web ya vimos una lista de sitios útiles para poder buscar las palabras más adecuadas para nuestro SEO. Seguramente la mayoría ya conozca Google AdWords para buscar palabras clave o keywords, pero pienso que puede ser útil para quien está empezando.
(más…)
por Omar Benyakhlef | Diseño de páginas web
Gloobs, diseño web profesional.
Gloobs.com es mi página personal, en la que ofrezco mis servicios como diseñador web freelance. Con esta será posiblemente la 6ª vez que la rediseño y seguro que no es la última.
En este post de diseño web, voy a intentar destripar la nueva web para contar cómo está hecha, tanto estructural como funcionalmente. Espero vuestros comentarios y críticas. Gracias.
(más…)
por Omar Benyakhlef | Diseño de páginas web
Fuentes gratuitas
Design Crave nos trae una muestra de 40 buenas fuentes para descargarte gratis !!.
Es un catálogo además de bueno, muy variado. Ver y descargar 40 fuentes gratis en Designcrave.
Si además queréis más fuentes os dejo este enlace del blog con todos los post relacionados:
Blog de diseño web – fuentes para descargar y demás post relacionados.
por Omar Benyakhlef | Diseño de páginas web, Tutoriales
Tutoriales Illustrator
En el diseño web, el saber utilizar un programa como Ilustrator o Freehand es un valor añadido muy importante. En el blog noupe.com, he encontrado unos tutoriales muy interesantes para realizar iconos con Illustrator.
Además de ser buenos, nos permiten aprender trucos que luego podremos aplicar a todo tipo de diseños. Desde los ya «machacados» iconos 2.0 hasta elaborados diseños como es el objetivo de una cámara reflex.
Espero que os sirvan.
