Poner lineas a textos
hola a todos estoy intentando llevar a cabo un texto con una linea como el de esta imagen que quede al lado del mismo. el estilo n se cual es exactamente puesto que border se me posiciona espero puedan ayudarme
0
Puntos
Puntos
1383
Visitas
Visitas
7
Resp
Resp
Por graficaslucero hace 126 meses
Principiante
Respuesta #1
Bueno, la línea se hace con <hr> la cual personalizas por medio de CSS y la pones bonita. Creo que si le pones un <hr class="linea"> y le colocas margin-top: x px; en css la ajustas a un buen tamaño, siendo x cualquier número.
Saludos.
Saludos.
Respuesta #2
perdona si pones un ejemplo te lo agradeceria muchisimo con esto no quiero decir que no te expliques bien tan solo lo llevaria asi mejor a cabo.
muchisimas gracias por toda tu ayuda.
muchisimas gracias por toda tu ayuda.
0
Puntos
Puntos
Por graficaslucero hace 126 meses
Principiante
Respuesta #3
taringa lo hace con un pequeño punto mediante una imagen de 1px por 1px y mediante css hace que se repita solo en x es decir hacia los lados y no hacia arriba y abajo, con esto se consigue la linea de 1 px del color que gustes eso si tienes que asignarle una posición para que quede en el centro de la div verticalmente
Respuesta #4
a te entiendo perfectamente zeus asi si se como se lleva a cabo muchisimas gracias pero creo que ahi un estilo que lo hace directamente no estoy muy seguro de todas formas lo desarrollare tal como me dijistes.
0
Puntos
Puntos
Por graficaslucero hace 126 meses
Principiante
Respuesta #5
jose muchisimas gracias por tu ayuda la verdad que ambos consejos me han sido muy utiles tanto el tuyo como el de zeus.. Muchisimas gracias
0
Puntos
Puntos
Por graficaslucero hace 126 meses
Principiante
Respuesta #6
¿Algo así es lo que deseas? Ésto fue lo que hice como te decía.. Te dejo el script para que revises. Recuerda siempre probar, inventar, crear. Así se va aprendiendo :P
CSS
CSS
#div { margin: auto; width: 800px; height: 100px; border: 1px solid #d7d7d7; padding: 8px; } .texto_grande{ float: left; font-family: impact; color: #4d022a; position: relative; font-size: 28pt; margin-top: 20px; } hr.linea { width: 500px; float: left; height: 1px; border:0px; background: #d5d5d5; margin-top: 28px; margin-left: 5px; box-shadow: 0px 2px 10px #b1b1b1; } .texto_pequeno { position: relative; color: #531837; top: 8px; left:-685px; width: auto; height: auto; }INDEX
<div id="div"> <span class="texto_pequeno">Get in touch</span> <span class="texto_grande">CONTACT ME</span> <hr class="linea"> </div>