Css - Estilo de Linea horizontal - Hr
Códigos Css
Hay veces que al introducir una linea horizontal ( hr ) en nuestras paginas resultan un poco aburridas, con este ejemplo de damos una apariencia mas divertida.
Tutores.org
Mostrando Codigo - Css
CODIGO
/* Codigo ofrecido por Tutores.org */
- <head>
- <style type="text/css">
- hr.linea {
- height: 1px;
- border: 0;
- color: #cc0000;
- background-color: #333333;
- width: 75%;
- }
- </style>
- </head>
- <body>
- <hr class="linea">
- </body>
ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Estilo de Linea horizontal - Hr" href="http://www.tutores.org/codigo/1496/" target="_blank">Estilo de Linea horizontal - Hr</a>
<!-- Final enlace Tutores.org -->
<a title="Tutores.org - Estilo de Linea horizontal - Hr" href="http://www.tutores.org/codigo/1496/" target="_blank">Estilo de Linea horizontal - Hr</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
Carlos
01/05/2004 16.50.01
1
5
Este código me pareció excelente, pero habrá forma de aplicarle algun estilo para que la linea no fuera continua, sino punteada.
Saludos.
Saludos.
Comentario usuario
Tutores.org
19/04/2003
1
5
Hola
Prueba
espero que te sirva
Prueba
hr.linea {
height: 1px;
border: 1px dotted #ccc;
color: #cc0000;
background-color: #333333;
width: 75%;
}
height: 1px;
border: 1px dotted #ccc;
color: #cc0000;
background-color: #333333;
width: 75%;
}
espero que te sirva
Comentario usuario
Santiago
30-12-2007 20:54:16
3
5
¿Por qué no funciona igual en Firefox que en Explorer?
En Explorer la línea es roja y en Firefox gris.
En Explorer la línea es roja y en Firefox gris.
Comentario usuario
el luel lu
5
5
a mi me colorea la linea solo con los atributos del borde, asi:
hr {
width: 90%;
height: 1px;
color: red; /*es indiferente*/
background-color: green; /*tambien indiferente*/
border: 0;
border-bottom: 1px solid blue; /*este es el que importa*/
}
saludos, el lu.
http://cuantomal.blogspot.com
p.d. En el titulito donde debiera decir "comentarios" dice "cometarios" ;)
hr {
width: 90%;
height: 1px;
color: red; /*es indiferente*/
background-color: green; /*tambien indiferente*/
border: 0;
border-bottom: 1px solid blue; /*este es el que importa*/
}
saludos, el lu.
http://cuantomal.blogspot.com
p.d. En el titulito donde debiera decir "comentarios" dice "cometarios" ;)
Comentario usuario
jormaz
24-09-2007 10:13:52
4
5
Hola yo buscaba algo similar y eto me ha funcionado con IE7 Opera y FFox
hr{
width:55%;
height:0px;/*solo queremos borde*/
text-align:left;
border-top:0px;/*quita el grosor extra de Opera y FFox*/
border-bottom:#CC0000 dashed 1px;
}
hr{
width:55%;
height:0px;/*solo queremos borde*/
text-align:left;
border-top:0px;/*quita el grosor extra de Opera y FFox*/
border-bottom:#CC0000 dashed 1px;
}
Comentario usuario
ErothesErothes
1
5
El codigo es excelente pero cuando coloco la linea HR en una fila de la tabla, esta hace que la altura de la fila aumente... como puedo corregir eso¿?
Comentario usuario
jose lizanajose lizana
2
5
gracias Jormaz por tu aporte, era justo lo que necesitaba, pero le cambié el estilo del borde por dotted.
INSERTAR COMENTARIO