Front-end: Títulos multi linea con padding por cada una de las lineas
Así es como vemos un titulo cuando tiene aplicado un padding sin mas
Y asi es como queremos que se vea
No voy a explicar toda la lógica que hay detrás de esto. Vayamos a la solución.
Este es el html. en div.titulo tenemos el background y en .highlight el background del texto, el padding que queremos que tenga y el hack mediante la propiedad box-shadow que es la que nos termina agregando los pedacitos de padding que nos falta entre lineas.
|
1 2 3 |
<div class="titulo"> <span class="highlight">Títulos multi linea con padding por cada linea</span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.titulo { padding-top: 32px; width: 700px; height: 200px; text-align: center; font-family: arial, helvetica, sans-serif; background: url('fondo.jpg') no-repeat 50% 50%; } .highlight { font-size: 50px; text-transform: uppercase; text-align: center; color: #fff; /*Esto es lo importante*/ display: inline; /* Aseguramos que el elemento sea inline */ background: black; /* Color de fondo del texto */ line-height: 1.6em; /* Espaciado entre lineas */ padding: 7px 0; /* padding deseado */ box-shadow: 14px 0 0 black, -14px 0 0 black; } |
Del CSS que puse solo hagan caso a las lineas que tienen “/*Esto es lo importante*/“. El resto es decoración.
No comenté el box-shadow porque prefiero hacerlo aquí: La magia se da en box-shadow. Solo tienes que tocar dos parámetros. El color cámbialo de black al que hayas puesto en la propiedad background, y los valores 14px y -14px ajustalos para arriba o para abajo hasta que te guste el padding lateral que hay en cada una de las lineas.
Listo!
Artículo original: css-tricks.com
Muy práctico!
Único detalle interesante que se podría agregar, es que el contenedor debería tener tanto padding a los costados como px tiene el box-shadow. Tambien es recomendable agregarle al contenedor un overflow hidden.