Blockquote con imagenes de fondo y CSS
Julio 1st, 2008 por alwaisonHoy en el trabajo, necesitaba dar formato a una cita de texto y hacerlo de una manera bastante visual y atractiva. Buscando en Google (como siempre), he encontrado una forma fácil, bonita y que valida al 100%.
La idea, es hace algo similar a esto:
El CSS necesario es el siguiente:
-
blockquote {
-
text-indent: 25px;
-
background: url(quotes1.png);
-
background-position: 0 2px;
-
background-repeat: no-repeat;
-
}
-
-
blockquote p {
-
display: inline;
-
margin: 0;
-
padding-right: 24px;
-
background: url(quotes2.png);
-
background-position: bottom right;
-
background-repeat: no-repeat;
-
}
Sencillo, ¿verdad? La etiqueta blockquote lleva una imagen de fondo (las comillas que abren), y indenta el texto para que no tape el texto.
Dentro del blockquote, pondremos el texto dentro de un párrafo (<p>), que también llevará una imagen de fondo (en este caso, las comillas que cierran).
Y poco más… valida tanto el HTML como el CSS, y cumple con su función.
El post original, es este: Inline image quotes (en inglés), y podeis ver una demo aquí.
Más de 50 técnicas CSS muy creativas
Abril 22nd, 2008 por alwaisonEs un artículo bastante interesante, donde se agrupan técnicas para dar formato a listas, formularios, pies de página (cada día con más importancia en el diseño web), reemplazar imágenes, efectos de texto, galerías de fotos, esquinas redondeadas, etc… es decir, un articulo muy completo donde encontraremos las técnicas que tan de moda están últimamente y que a todos nos gusta tanto usar.
El artículo completo, lo podeis encontrar aquí: Using CSS to do anything: 50+ Creative Examples and Tutorials
Compresores de archivos CSS online
Abril 21st, 2008 por alwaisonAl finalizar la maquetación de una web, es frecuente que nos demos cuenta que se nos ha ido la mano con las hojas de estilo, y pesan más de lo que deberían.
Para rebajar el peso de estos documentos y hacer la carga de las páginas más ligera, podemos recurrir a los típicos compresores de hojas de estilos que encontramos en internet.
Algunos de ellos son CSS Drive, Robson CSS Compressor y CSS Clean.
Para decidir cual es el mejor, he realizado unas pruebas con un archivo css cualquiera. He seleccionado uno de la tienda virtual Magento, de 26,4 KB (concretamente, el archivo boxes.css).
Utilizando siempre el nivel de compresión máximo para cada uno, los resultados son esclarecedores:
