Gracias al CSS podemos personalizar prácticamente cualquier elemento de una página web, ya sean imágenes, textos o incluso zonas multimedia con vídeos. En este caso vamos a echar un vistazo a una serie de trucos que te vendrán bien en tus diseños, la recopilación abarca tanto listas como estilos básicos para texto, formularios, líneas de separación hr, etc. etc … échale un vistazo a todos y convierte un formato web simple en una obra de arte:
CSS para listas
Igualmente, se pueden personalizar las listas ‘ol’.
[su_button url=”http://webdesignerwall.com/tutorials/style-your-ordered-list” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Crea un bloque con una lista de enlaces con efecto Hover
[su_button url=”http://www.smileycat.com/miaow/archives/000230.php” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Convierte una lista en un calendario con CSS
[su_button url=”http://veerle-v2.duoh.com/blog/comments/a_css_styled_calendar/” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Cómo utilizar imágenes como marcadores y viñetas de listas. Aplica este código y cambia ‘url-a-tu-imagen’ por la URL a la imagen que quieras utilizar.
[su_box title=”Código” box_color=”#ffc030″]ul {list-style: none}
ul li {
background-image: url(“url-a-tu-imagen”);
background-repeat: none;
background-position: 0 0.5em;
}[/su_box]
Personaliza el aspecto de las listas ‘li’ con este tutorial.
[su_button url=”” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Personalizar formularios con CSS
Cómo personalizar el INPUT FILE en un formulario.
[su_button url=”http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Un sistema para autocompletar campos de formulario con sugerencias según se vaya escribiendo (con Ajax)
[su_button url=”http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Personalizar el campo de un formulario que tiene el focus, de esta forma te aseguras de que el usuario sepa dónde va a comenzar a escribir si teclea.
[su_box title=”Código” box_color=”#ffc030″]ul {list-style: none}
input:focus { border: 1px dotted #ff0000; }
[/su_box]
Mejorar un formulario y hacerlo más accesible con CSS
[su_button url=”http://alistapart.com/article/prettyaccessibleforms” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
CSS para pie de página
Un pie de página ‘pegajoso’ que se queda fijo aunque se haga scroll.
[su_button url=”http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Otro método para colocar el pie de página al final de la ventana de forma fija.
[su_button url=”http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Imágenes con CSS
Reemplazo de imágenes con CSS
[su_button url=”http://www.mezzoblue.com/tests/revised-image-replacement/” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Mapa de imágenes con CSS
[su_button url=”http://www.frankmanno.com/ideas/css-imagemap/” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Galería de imágenes con CSS
[su_button url=”http://www.cssplay.co.uk/menu/photo_not_so_simple” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Un icono animado de carga al estilo flash o ajax mientras se cargan las imágenes más grandes
[su_button url=”http://www.dynamixlabs.com/2008/01/17/a-quick-look-add-a-loading-icon-to-your-larger-images/” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Precargar imágenes con CSS
[su_button url=”http://snipplr.com/view/2122/css-image-preloader/” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Lupa para imágenes, a medida que pasas el ratón sobre una fotografía, la zona aparece ampliada
[su_button url=”http://eatyourgreens.org.uk/archives/2007/08/adding_a_magnif.html” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Imágenes redimensionables con CSS
[su_button url=”http://www.smileycat.com/miaow/archives/000648.php” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Efectos de texto y enlaces
Marca de verificación para enlaces ya visitados con CSS
[su_button url=”http://css-tricks.com/put-checkmarks-next-to-visted-links-with-pure-css/” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Formatea bloques de texto con formas irregulares, no hace falta añadir texto en bloques rectangulares.
[su_button url=”http://www.csstextwrap.com/index.php” style=”bubbles” background=”#f8be2d”]Ver[/su_button]
Capitulares en párrafos con CSS, solo utiliza este código aprovechando el pseudo-elemento first-leter:
p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}
