por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Background Image
Cada vez son más numerosas las webs y blogs que flotan sobre una impresionante imagen. Este fondo puede ser una imagen única o una más pequeña que se repite horizontalmente, verticalmente o ambas.
Los fondos consiguen dar mayor peso gráfico a la web, y sobre todo, captar la atención del usuario.
A continuación vamos a ver unos ejemplos de web con backgrounds, cómo insertar el código en la CSS y un par de sitios en los que poder descargar buenos backgrounds.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Ver imágenes png en Internet Explorer 6
No lo puedo ocultar, detesto Internet Explorer. Siempre existen problemas entre la interpretación de código html por parte de los distintos navegadores, pero lo que es peor, también existen diferencias a la hora de usar un formato u otro. Esto ocurre con los archivos png. Internet Explorer 6 no los renderiza bien y las transparencias dejan de serlo para convertirse en «pegotes». Ciertamente no es culpa suya, ya que salió antes que la puesta de largo de los png’s pero eso no quita para que siga sin gustarme el explorer ;).
Para solucionar este problema existen varios métodos que paso a describir a continuación:
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Enlaces visitados con CSS
Buenísimo código CSS para que todos aquellos enlaces que hayan sido visitados aparezcan marcados con una imagen (por ejemplo).
Me parece una utilidad genial, sobre todo para hacer más usable el menú de una web o blog. El usuario siempre sabrá si ya ha pasado por ese enlace o no. El código es el que aquí os apunto, si queréis ir a la página original y ver el código funcionando pulsad los enlaces de la columna derecha de http://www.colly.com/index.php
#sidebar ul { list-style-type:none; padding:3px; }
#sidebar li a { display:block; line-height:150%; width:239px; background:url(ticks_grey.gif); text-decoration:none; }
#sidebar li a:link, a:active { color:#666; }
#sidebar li a:hover { color:#F33; background-position: 0 -20px; }
#sidebar li a:visited { background-position: 0 -40px; }
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Trucos CSS: pie de página fijo
En este caso se trata de hacer un pie de página que siempre está visible, de tal modo que el diseño siempre ocupa el 100% de la altura del monitor.
De todos los ejemplos que circulan por ahí, creo que el mejor es este que os apunto en este post.
Se trata de una práctica no muy aprovechada debido a la altura excesiva que normalmente tienen los sitios, pero para casos en los que se trate de una web no muy grande, como un porfolio o una web de una empresa, se trata de una práctica que puede ser muy útil y visual.
Para todos aquellos que queráis ver el tutorial en inglés este es el enlace. Para el resto, esto es lo que hay que hacer:
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Hacks CSS
Los hacks son «condiciones» que se colocan en la CSS para que cada navegador interprete de modo diferente las órdenes del estilo que nos esté dando problemas, de tal manera que al final consigamos que nuestros diseños no difieran en función del navegador usado por el usuario.
(más…)
por Omar Benyakhlef | Trucos CSS
Transparencias de imágenes y textos con CSS
Voy a iniciar una categoría de trucos con CSS. En este primer post os voy a explicar cómo hacer transparencias tanto de imágenes como de textos.
La orden que tenemos que usar es opacity, y vamos a ver cómo de fácil es jugar con ella para conseguir efectos muy vistosos. Pero como no podría ser de otra forma, veremos que hay órdenes que valen para Explorer, otras que valen para Mozilla, otras que sólo funcionan en Frefox, otras que no…. (más…)
