JMiur [E]

En BulletProofBox hay un artículo que muestra algunas de las técnicas más comunes para manejar textos con CSS.

Aunque puede descargarse un ZIP con los ejemplos, me parece que igual vale la pena darles una mirada a cada una de ellas.

1. Para textos grandes como los títulos, lo mejor es recurrir a fuentes de tipo sans serif (Arial, Basic Sans SF o Helvetica).

Los títulos MUY grandes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



El código HTML:
<div id="big-bold">
<h1 class="big-bold">EL TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:
#big-bold {
background-color: #FFF;
color:#000;
}
h1.big-bold {
font-family: 'basic Sans sf', arial, helvetica, sans-serif;
font-size: 2.1em;
color: orange;
}
#big-bold p {
font-family: arial, helvetica, sans-serif;
font-size: 0.9em;
line-height: 1.6;
}

2. Utilizar imágenes de fondo que se superpongan con el texto a modo de transparencias (no funciona en IE).

Gradientes Sobre Títulos

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



El código HTML:
<div id="gradient">
<h1 class="gradient"><span></span>EL TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:
#gradient {
background: #000;
}
h1.gradient {
font-family: arial, helvetica, sans-serif;
font-size: 38px;
line-height: 38px;
color: #FFFF;
position: relative;
}
h1.gradient span {
background: url(URL_h1-gradient.png) top left repeat-x;
display: block;
height: 20px;
position: absolute;
width: 100%;
}
#gradient p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.8em;
color: #CCC;
line-height: 1.6;
}

3. Estos es sencillo, para transformar el texto a a mayúsculas, sólo hace falta usar la propeidad text-transform:

Poniendo todo en mayúsculas

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



El código HTML:
<div id="uppercase">
<h1 class="uppercase">EL TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:
#uppercase {
background: #000;
}
.uppercase {
font-family: georgia, "times new roman", times, serif;
font-size: 1.2em;
text-transform: uppercase;
}
#uppercase p {
font-family: georgia, "times new roman", times, serif;
font-size: 0.9em;
line-height: 1.4;
}

4. Con las propiedades letter-spacing y word-spacing podemos controlar la separción de las letras y las palabras. Es muy útil para usar en los títulos.

LetterSpacing y WordSpacing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



El código HTML:
<div id="spacing">
<h1 class="spacing">EL TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:
h1.spacing {
font-family: Tahoma;
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: 0.08em;
word-spacing: 0.1em;
color: #ccc;
}
#spacing p {
font-family: tahoma, georgia, "times new roman", times, serif;
font-size: 0.9em;
line-height: 1.4;
letter-spacing: 0.05em;
}

5. Una forma distinta de subrayar los títulos, usando imágenes de fondo.

Efecto de títulos subrayados

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



El código HTML:
<div id="underline">
<h1 class="underline">EL TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:
#underline {
background: #EEE;
}
h1.underline {
background: url(URL_h1-underline.png) bottom left no-repeat;
font-family: georgia, "times new roman", times, serif;
font-weight: lighter;
}
#underline p {
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 0.9em;
}

6. Colocar la primera letra de un párrafo con una fuente exageradamente grande, se llama drop caps y es sencillo de hacer aunque requiere ajustar muy bien los valores.

Usando la técnica de DropCap

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



El código HTML:
<div id="dropcap">
<h1 class="dropcap"><span>E</span>L TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:
h1.dropcap {
font-size: 28px;
font-family: arial, verdana, sans-serif;
line-height: 28px;
}
h1.dropcap span {
font-size: 80px;
font-weight: lighter;
position: relative;
float: left;
line-height: 50px;
color: #CCC;
}
#dropcap p {
font-family: georgia, "times new roman", times, serif;
font-size: 0.9em;
line-height: 1.4;
}

REFERENCIAS:
  • Cosas Sencillas
  • 24 comentarios:

    Pepe  

    A mí en lo particular el efecto sobre el texto que más me gusta es el que da como resultado un texto en versalitas (o small caps) irónicamente lo ocupo poco en mi blog (y no en los títulos). Aún así, el psot me acaba de dar una buena idea :) mil gracias!

    Responder
    Gem@  

    Bien, ya queda atrás el subrayado, los iconos a la izquierda y color de fondo.
    Me gustan todas veamos como queda :)

    Responder
    Admin  

    Una pregunta, es sobre los títulos, pero los de la sidebar como se hace para que no queden en mayúsculas? O sea que salgan justificados. Creo que lo sabía, lo leí en algún lado, pero no me acuerdo :(

    Responder
    Anónimo  

    Muy bueno :D

    Responder
    JMiur  

    Pepe:
    Es verdad; las fuentes tienen muchas alternativas que van más allá de los títulos así que veremos que es lo que se te ha ocurrido :)
    Por cierto, aprovecho para suscribir cada palabra de lo que has dicho en este post.

    Gem@:
    El subrayado me parecio muy original y sencillo de hacer. No se me había ocurrido algo así :D

    k_nelita, las definicione están en:
    .sidebar h2 { aquie estan las de la posición
    }
    y en:
    h2 {
    ............
    text-transform:uppercase;
    }
    Esa propeidad en negrita es la que los coloca en mayúsculas. Si la eliminas vuelven a ser "normales".

    Responder
    Aponcho  

    Alguno de estos trucos se puede aplicar a los títulos de blogger?

    Responder
    JMiur  

    Sí, Aponcho; cualquiera de ellas, sólo hay que buscar cuál es la definición que los controla. Generalmente es:
    .post h3 {......}
    o bien:
    .post h3 a {......}

    Responder
    Admin  

    Gracias JMiur, ya lo corregí, hasta le agrandé la fuente y supuestamente la puse en negrita, digo supuestamente porque no estoy muy segura de que lo haya tomado lo de bold, en el título del post se ven mas oscuras las letras que en los títulos de la sidebar, pero igual está bien... por ahora jaja
    Muchas gracias ;)

    Responder
    JMiur  

    Lo que ocurre es que si la fuente es grande, ciertos fonts no se diferencian entre negritas o normales.

    Responder
    Admin  

    Hombre... que tampoco era tan grande...jaja ja 14 pixeles nomás, dale una miradita si podés, sino igual está bien así, los títulos de los post si mal no recuerdo son de 16 px, pero ya está no te preocupes, me gusta así.
    Gracias ;)

    Responder
    JMiur  

    Jajajaja, no, es GRANDE pero eso pasa con las fuentes :D

    Responder
    j a v i e r . g m  

    Hola, disculpa que mi pregunta no tenga que ver con la entrada, pero ¿cómo elimino el mensaje "Mostrando entradas con la etiqueta comentarios. Mostrar todas las entradas" cuando hago la busqueda por etiquetas. Lo otro, ¿sabes como cambiar el mensaje de "Entradas antiguas" o "Entradas recientes" por el título de la entrada que debiera aparecer al clickear?

    Mira.. la idea es agregar eso, principalmente al menú de Comentarios del blog http://clockwork-tangerine.blogspot.com

    Ojalá me puedas ayudar..
    Saludos

    Responder
    j a v i e r . g m  

    Hola, yo de nuevo, tengo otro problema..
    En la parte de diseño, desactivé la opción de mostrar las etiquetas de entrada, sin embargo siguen apareciendo. ¿Dónde puedo sacar eso? Me imagino que en la plantilla HTML, pero no me manejo mucho en eso. Normalmente hago las intervenciones siguiendo las instrucciones que das en el blog.

    Saludos

    Responder
    JMiur  

    Para eliminar esos mensajes, busca este código y simplemente lo borras:
    <b:include data='top' name='status-message'/>

    Para cambiar los textos por un ícono, si te fijas en el blog de Gem@ hay una explicación clara de cómo hacerlo: AQUÍ

    Responder
    JMiur  

    Esa parte de desactivar las etiquetas debería estar funcionando si has desmarcado la opción editando Entradas del Blog. Fíjate si has guardado los cambios, por ejemplo y si realmente han quedado desactivadas.

    Eliminar el código, tal vez sea engorroso de explicar aquí. Una posibilidad menos drástica sería ocultarlo. Elo lo puedes hacer agregando lo siguiente antes de </b:skin> :

    .post-footer-line-2 {display:none;}

    Responder
    j a v i e r . g m  

    Si, efectivamente guardé los cambios, por eso no entiendo que sucede.. voy a probar con la solución alternativa.

    Sobre el anterior, mi pregunta era si por ejemplo en vez de "Entradas antiguas" podría decir el título de la entrada antigua. Algo así como un "data:newerPostTitle". La verdad no se si existe esa opción, porque al menos ese ejemplo que te doy, no funciona.

    Gracias por la ayuda.
    Saludos

    Responder
    JMiur  

    Hay un post donde se habla de eso, mostrar los títulos en lugar de entradas antiguas. Tiene sus dificultades, sobre todo si se usan acentos, etc. Lo usé un tiempo y luego lo descarté pero, funciona.

    Responder
    Bonzu Pipinpadaloxicopolis III  

    ¿y que significa "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."?

    Responder
    Gem@  

    Buena pregunta esta última que todos nos hicimos alguna vez :)

    Responder
    JMiur  

    Ahhhhhhhh !!!!!!!! Pués, según la Wikipedia es una copia de la obra de Cicerón De finibus bonorum et malorum (Sobre los límites del bien y del mal) XD

    Es mejor qu escribir ofhiuencaa wttyssdtitr ahahsdadgwe o algo por el estilo :D

    Responder
    Gem@  

    En pocas palabras es un texto que carece de interés para no restar importancia a lo que en realidad la tiene, un ejemplo de importancia los ejemplos de J.Miur.

    Responder
    JMiur  

    En pocas palabras es ... un relleno :D

    Responder
    Gem@  

    jajajajaja me rindo usaste menos palabras.

    Responder
    JMiur  

    :D

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR