Tips para CSS

Aquí unos 8 tips vistos en CSS Globe, muy útiles y sin mucha complicación, soluciones rápidas y sencillas...

1. Centrar de forma vertical utilizando line-height

line-height:24px;

2. Provenir que el contenido de gran tamaño (div o cualquier contenedor) rompa el ancho fijo de diseños flotantes (propiedad float)

#main{ overflow:hidden; }

3. Prevenir saltos de línea en enlaces (links con espacios en blanco)

a{ white-space:nowrap; }

4. Mostrar siempre en firefox la barra de desplazamiento (scrollbar, la barra con flechas a mano derecha)

html{ overflow:-moz-scrollbars-vertical; }

5. Centrar elementos de un bloque o contenedor de forma horizaontal

margin:0 auto;

6. Ocultar la scrollbar de los TextArea en IE

textarea{ overflow:auto; }

7. Forzar un salto de página al imprimir

h2{ page-break-before:always; }

8. Quitar bordes en los enlaces activos

a:active, a:focus{ outline:none; }

   Y otros añadidos, si conocen de algún otro tip rápido dejen su comentario =)

9. Otra forma de quitar bordes en los enlaces activos

a:active, a:focus { background:#ccc; outline:none; }

10. Eliminar los bordes de las imágenes

img { border: 0; }

11. Centrar contenedor en IE (un div por ejemplo)

body{ text-align: center; }

12. Cambiar el color del texto seleccionado

::selection{ background:#c3effd; color:#000; } /* Safari y Opera */
::-moz-selection { background:#c3effd; color:#000; } /* Firefox */

13. Prevenir saltos dinámicos al ocultar la scrollbar en firefox

html { overflow-y:scroll; }

14. Esquinas redondeadas (solo CSS3)

input{ -moz-border-radius:10px; -webkit-border-radius:10px; }

15. Cambiar puntero por icono de la mano en los enlaces y botones

input[type=submit],label,select,.pointer{ cursor:pointer; }

16. Hacer que toda el área de una lista sea seleccionable

#navigation li a{ display:block; }

Recibe notificaciones por correo