Como personalizar textos con CSS y HTML

julio 10, 2013

Como personalizar textos con CSS y HTML


















Hoy os quiero hablar de diferentes estilos que podemos aplicar al texto de las entradas, son muy sencillos y puede que algunos de vosotros ya los conozcáis, aún así, como he recibido correos preguntando por el efecto de tachado y las tablas, he querido preparar una entrada para hablaros de ello.

Quiero empezar resumiendo la diferencia entre HTML y CSS:

El html es la estructura de nuestro blog/web, mientras que el CSS es el estilo personalizado de los diferentes elementos que la componen. Está muy resumido para que quienes no saben nada al respecto, no se líen, los que ya sepáis usarlo seguro que me echáis la bronca por esquematizarlo tanto.


Pasamos a algunos efectos básicos que podéis aplicar directamente a las entradas.

Efecto Tachado


HTML: las etiquetas usadas son <strike></strike>. Entre ellas situaremos las palabras que queramos que aparezca tachada, siempre en vista HTML.

Ejemplo: 

<strike> efecto texto tachado </strike>

En vista de redacción se vería así:

efecto texto tachado





CSS: son un conjunto de instrucciones de estilo que complementan al HTML de nuestra plantilla y nos dan muchas más posibilidades de personalización.

Las etiquetas usadas para crear un texto tachado son: <span style="text-decoration:line-through;"> </span>. Entre ellas situaremos las palabras que queramos tachar, siempre en vista HTML.

Ejemplo:

<span style="text-decoration:line-through;"> efecto texto tachado con CSS </span>

En vista de redacción se vería así:

efecto texto tachado con CSS


Efecto Subrayado


Blogger nos da la posibilidad de usar el subrayado normal desde el escritorio cuando creamos una nueva entrada. Pero con CSS podemos personalizar aún más nuestros subrayados.

Subrayado Superior (Overline):

Las etiquetas usadas son: <span style="text-decoration:overline;"> </span>.

Ejemplo:

Vista HTML: <span style="text-decoration:overline;"> Ejemplo de texto con subrayado superior </span>

En vista redacción se vería así:


Ejemplo de texto con subrayado superior


Subrayado Superior e Inferior:

Las etiquetas usadas son: <span style="text-decoration: underline overline;"></span>

Ejemplo:

Vista HTML: <span style="text-decoration: underline overline;"> Ejemplo de texto con doble subrayado </span>

En vista redacción se vería así:



Ejemplo de texto con doble subrayado




Subrayado Inferior punteado:

Las etiquetas usadas son: <span style="border-bottom: 2px dotted black;"></span>

Ejemplo: 

Vista HTML: <span style="border-bottom: 2px dotted black;"> Ejemplo de texto con subrayado inferior punteado</span>

En vista redacción se vería así:

Ejemplo texto con subrayado inferior punteado



-> Para modificar el color del subrayado, sólo tenemos que sustituir el "black" final por otros colores:

Rosa: pink

Ejemplo texto con subrayado inferior punteado rosa


Azul: blue

Ejemplo texto con subrayado inferior punteado azul


Amarillo: yellow


Ejemplo texto con subrayado inferior punteado amarillo


Verde: green


Ejemplo texto con subrayado inferior punteado verde


Rojo: red


Ejemplo texto con subrayado inferior punteado rojo


Violeta


Ejemplo texto con subrayado inferior punteado violeta


Sombras

CSS: podemos añadir sombras a nuestros textos y darles un efecto de relieve usando las siguientes etiquetas:
<span style="color: black; text-shadow: black 0.1em 0.1em 0.2em;"></span>

Ejemplo:

Vista HTML: <span style="color: black; text-shadow: black 0.1em 0.1em 0.2em;">Prueba</span>

En vista redacción se vería así:

Prueba

--> Podemos cambiar el color de la letra sustituyendo el "color: black" por "color: " + el color que queramos:

Rosa: color: pink

Prueba Rosa


Azul: color: blue


Prueba Azul


Verde: color: green


Prueba Verde


Y así con todos los colores que vimos en el apartado de subrayado punteado.


--> Podemos cambiar el color de la sombra sustituyendo el "black" que va después de "text-shadow" (sombra del texto) por cualquier otro color:

Naranja: orange


Prueba Sombra Naranja

Además, podemos cambiar ambos valores, por ejemplo la letra a color blanco y la sombra a color negro, con la siguiente etiqueta <span style="color: white; text-shadow: black 0.1em 0.1em 0.2em;">Prueba letra blanca y sombra negra</span>

En vista redacción se vería así:

Prueba letra blanca y sombra negra

Y con sombra rosa: <span style="color: white; text-shadow: pink 0.1em 0.1em 0.2em;">Prueba letra blanca y sombra rosa</span>

Prueba letra blanca y sombra rosa

Podemos aumentar el tamaño de la letra:


Prueba letra blanca y sombra rosa


Texto Móvil

HTML: Las etiquetas usadas son: <marquee>Texto móvil</marquee> en vista HTML.

Vista Redacción:

Prueba texto móvil




En la próxima entrada sobre programación básica para Bloggers hablaremos de como hacer tablas sencillas y áreas de texto. Espero que el tema de hoy os haya sido útil, ya me contáis. ¿de acuerdo? Si no quieres perderte mi próxima entrada, puedes suscribirte a mis actualizaciones por email para recibir todas las novedades en tu correo.

Un fuerte abrazo,

Celia ♥






Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

21 pensamientos ¡falta el tuyo! ;)

  1. Mira qué bien, me gustan un montón las rayitas punteadas de colores bajo el texto, seguro que lo uso. Mil gracias :)

    ResponderEliminar
    Respuestas
    1. Hola guapa, ¡me alegra que te gusten! :D

      Feliz jueves ;)

      Eliminar
  2. Muy buen post. Esto me habría venido de perlas cuando comencé ^o^

    Bss
    Cosas molonas (y gratis ^o^ ) para tu blog
    .

    ResponderEliminar
    Respuestas
    1. jajajaja ¡¡y a miiii!! los inicios son difíciles ;)

      ¡¡Besos!!

      Eliminar
  3. Muchas gracias Celia!!! Acabo de aplicar el subrayado punteada en la entrada que estoy preparando para hoy! Por cierto, me encanta el nuevo diseño de tu blog, está super currado!!! Yo también he cambiado el mío...¡¡otra vez!!!... jejeje, es un vicio, verdad? Me apetecía usar colores más veraniegos!

    Un besazo guapísima, gracias por este post!

    ResponderEliminar
    Respuestas
    1. ¡¡Pues te ha quedado muy chulo!! :D

      La combinación de colores me gusta mucho :)

      ¡¡Besos!!

      Eliminar
  4. Por cierto!!! Te he dejado una triple sorpresa en mi blog! :-)

    ResponderEliminar
    Respuestas
    1. jejeje ¡¡acabo de pasarme!! muchas gracias, sol

      Eliminar
  5. Hola Celia! Un post muy práctico que seguro que utilizo pronto, ya me he descargado el pdf. Un beso y gracias!

    ResponderEliminar
    Respuestas
    1. El pdf está resumidito, pero va lo mas importante, si tienes alguna duda, me dices ;)

      ¡¡Besos, guapa!!

      Eliminar
  6. Qué guay! Muy útil esta entrada, Celia!

    Me ha encantado el texto móvil! =)

    Gracias también por el archivo .pdf

    Besazos guapa!

    ResponderEliminar
    Respuestas
    1. ¡¡Pues cuando le das formato queda más chulo todavía!! :D

      Me encantan estas chorraditas jejeje

      ¡¡Besos!!

      Eliminar
  7. Ostras, genial, me lo guardo en favoritos, que seguro seguro que lo utilizo. Besos y muchas gracias. Yolanda.

    ResponderEliminar
    Respuestas
    1. Genia, guapa, ¡cualquier duda me dices!

      Feliz jueves ;)

      Eliminar
  8. Está genial Celia, espero algún día poder aplicar todas estas cositas a mi blog... madre mía, hay que ver que soy "negá". Besos.

    ResponderEliminar
    Respuestas
    1. ¡¡con práctica y paciencia todo es posible!!

      Te lo digo por experiencia ;)

      ¡¡Besos!!

      Eliminar
  9. Se me habia pasado esta entrada, muy útil ;)
    Gracias!

    ResponderEliminar
  10. Muchas gracias pro la información, muy útil, besos.

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.