Como estilizo reglas horizontales sin imágenes?

Css | Escrito por Ezequiel M. | Febrero - 25 - 2009

Eliminar subrayado de links

Muchos olvidaron que en Xhtml hay un elemento que se llama HR exclusivo para la creación de reglas horizontales. A través de CSS podemos darle el aspecto deseado y dejar de usar imágenes para simular divisiones.


Atacamos directamente a la etiqueta HR desde la hoja de estilo asignando los atributos necesarios. Podemos definir el grosor y largo de la regla con width y height, usar bordes, colores y mas. Hay que tener en cuenta que los navegadores Opera y Firefox renderizan diferente a IE7, esto se puede comprobar al usar el atributo color, ya que Firefox y Opera lo toman como color de borde e IE7 como color de relleno.


Otra cosa a tener en cuenta es si vamos a usar bordes definir su tamaño porque este varia según el modelo de caja de cada navegador.


Código Xhtml

Código CSS

hr{
width:100px;
height:2px;
border:1px solid #FFCC00;
color:#FFCC00;
background-color:#FFCC00;
}


Las propiedades “Color” y “Background-color” tienen que tener el mismo valor para mantener una correcta visualizacion del color en todos los navegadores.


Resultado:


Articulos relacionados:

    • Como hacer transparencias con Opacity en CSS3 CSS3 promete solucionar muchos de los problemas y necesidades de los maquetadores web. Todavía hay incompatibilidades con CSS2.1 en algunos navegadores, pero esto no desmerece estudiar y practicar sobre esta nueva promesa. La propiedad Opacity permite hacer transparencias con valores Alpha que van del 0.0 al 1.0, esto equivale a 0% y 100%. Muy facil de
    • Como pongo color de fondo a un elemento? Definir el color de fondo para un elemento es sencillo pero hay que tener en cuenta algunos aspectos. El resultado es diferente según la propiedad Display del mismo, si el elemento es de Linea (Inline) el color solo ocupara el espacio que ocupe el mismo y si es de Bloque (Block) el color ocupara todo
    • Como agrego sombra a un texto con CSS3? Text-Shadow es una de las nuevas propiedades en CSS3 que permite estilizar las fuentes. Esta propiedad es la solución a muchos trucos que se idearon para simular sombras en las fuentes de los sitios web. Esta propiedad actúa a modo gráfico sin duplicar el texto y sin generar una imagen. Los valores para la propiedad Text-shadow

Comentarios:

Deja tu opinion