En este bloc por ejemplo se usa un efecto en los títulos de la home que es que a los textos darles un efecto de subrayado. Pues ahora veremos cómo hacerlo para que quede perfecto con sus paddings laterales y todo.
Primero tenemos nuestro texto:
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
Si pusieramos un <span> a todo el contenido del <h1> tendríamos un bloque tal que así:
<h1><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></h1>
h1 span{ background-color: #FFB400; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Vemos que los inicios, los saltos de línea y los finales quedan con poco padding. Podríamos añadir un padding pero nos lo añadiría al inicio y al final y no en los saltos de línea. Lo que tendríamos que hacer es poner spans en todas la palabras y luego dar padding para simular el espacio:
<h1> <span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet,</span> <span>consectetur</span> <span>adipiscing</span> <span>elit</span> </h1>
h1 span{ background-color: #FFB400; display: inline-block; padding: .15em .2em; line-height: 1em; }
Loremipsumdolorsitamet,consecteturadipiscingelit
Quizá la diferencia puede parecer poca pero son los detalles al final los que hacen que un desarrollo sea de calidad.
A todo esto diréis: ¡Qué palo poner <span> a todas la palabras!, ¿no?. ¡Pues sí! Por eso es mejor utilizar una función php que reemplaza los espacios por palabras:
function get_replace_space($class=false,$string){ if($class) $class = ' class="'.$class.'"'; else $class = ''; $new_string = '<span'.$class.'>'; $new_string .= str_replace(' ','</span><span'.$class.'>',$string); $new_string .= '</span>'; return $new_string; } function the_replace_space($class,$string){ echo get_replace_space($class,$string); }
Personalmente me gusta usar dos funciones una que empieza por get_ y otra que empieza por the_. La get_ hace un return y la the_ hace un echo. También se le puede pasar una clase para poder hacer diferentes colores, tamaños, paddings… Al final nuestro <h1> quedará así:
<h1><?php the_replace_space('amarillo','Lorem ipsum dolor sit amet, consectetur adipiscing elit'); ?></h1>
Y saldría esto:
<h1> <span class="amarillo">Lorem</span> <span class="amarillo">ipsum</span> <span class="amarillo">dolor</span> <span class="amarillo">sit</span> <span class="amarillo">amet,</span> <span class="amarillo">consectetur</span> <span class="amarillo">adipiscing</span> <span class="amarillo">elit</span> </h1>