Foros Programación Cliente

Ayuda con efecto de texto en CSS

6 6 Respuestas Domingo 11 de abril, 2010
Aprendiendo a programar en CSS me voy topando con más interrogantes cada vez que intento hacer algo nuevo, pero vaya que es interesante y divertido! :D

Ahora necesito hacer algo en particular, quiero que las lineas del bloque de texto de mi sitio, tengan una fondo. Así como en el ejemplo... pero que además, sobresalga 2 o 3 px desde el borde de cada linea, para que no quede tan ajustado a la altura de la tipografía.

Algo asi como en el ejemplo siguiente.


Cómo hago esto con CSS(2)?
we love gravity
Registrado desde 25/11/02
Número de posts: 1211
  • Avatar de pantalaimon pantalaimon Registrado desde 25/11/02 / Número de posts: 1211
    Encontré esto:

    <div class="p" id="que_cont">
    <span style="background-color:#000000">HOLA, lo que hacemos lo hacemos por diversión </span>
    </div>

    Donde class ="p" - contiene tipografía, tamaño color, etc..

    Pero usé el SPAN para darle un background solo al texto... queda bién, pero hay que hacerlo por cada texto que ponga? ... no hay manera de hacerlo en el archivo CSS para que TODOS los textos tengan este estilo?

    we love gravity
    Publicado hace 2 años
  • Avatar de Ferdev Ferdev Registrado desde 30/09/09 / Número de posts: 11
    Buenas!

    Con este html:

    <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>


    Y con este css:

    p.lorem {
    background-color: #000000;
    padding: 5px;
    }


    Deberías conseguir lo que quieres hacer :) Saludos!
    Ferdev
    ----------
    http://www.ferdev.com/
    http://www.loovrs.com/
    Publicado hace 2 años
  • Avatar de Esteban Esteban Registrado desde 17/10/08 / Número de posts: 27
    La solución que te da Ferdev es la mas correcta y la que deberias usar, pero si quieres utilizar el span podrias hacerlo desde CSS poniendo:
    .p span { background-color:#000000; }
    Esto te afectaria a todos los span que esten dentro de un div con la clase p
    Publicado hace 2 años
  • Avatar de luisaspacial luisaspacial Registrado desde 16/02/06 / Número de posts: 99
    Sip, lo que tienes que hacer es tratar el <p></p> como un elemento de bloque y
    ya le puedes meter todas las propiedades que quieras... ^^
    por tutatis!!!
    Publicado hace 2 años
  • Avatar de Trazo Trazo Registrado desde 28/11/05 / Número de posts: 58
    Colocar un span dentro de un párrafo que albergue todo el texto contenido en el mismo no me parece muy lógico ya que estoy utilizando dos etiquetas pudiéndo utilizar únicamente una.
    Creo que lo más correcto es primero plantearse si esa etiqueta será un párrafo teniendo en cuenta la semántica de ese texto y su función dentro de los contenidos de la página. Lo planteo porque el ejemplo que pones (No todo lo que brilla es oro) no me parece a priori semánticamente un párrafo. Habría que ver el contexto pero yo me inclinaría más, en ese caso, por un encabezado o incluso podría ser una cita.
    Como hablas de "las lineas del bloque de texto de mi sitio" interpreto que será un párrafo.

    Los párrafos son elementos en bloque así que, para conseguir el efecto que buscas, debemos hacer que el navegador los cargue como elementos en linea modificando la propiedad display. Los elementos en línea, por defecto, se autoajustan tanto en anchura como en altura a su contenido así que, para agrandar el área que ocupa le añadimos un padding.
    En el siguiente ejemplo asigno una clase a los párrafos que quiero que tengan este efecto por si hubiera en la página otros p que quiero que no tengan ese formato aplicado. SI fuesen todos los de la página web, simplemente citaría a p en el selector css (todos los p de la página).

    HTML:
    <p class="resaltado">Lorem ipsum dolor sit amet, consectetur adisciplit elit...</p>
    CSS:
    p.resaltado {
    color: white ;
    background-color: black ;
    display: inline ;
    padding: 4px
    }


       ...o todo lo contrario.
    Publicado hace 2 años
  • Avatar de pantalaimon pantalaimon Registrado desde 25/11/02 / Número de posts: 1211
    ha quedado perfecto! Probé con todas pero la que más se ajusta fue la opción que me diste Trazo.

    Gracias a todos!
    we love gravity
    Publicado hace 2 años