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
Ejemplo:
En vista de redacción se vería así:
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: . Entre ellas situaremos las palabras que queramos tachar, siempre en vista HTML.
Ejemplo:
efecto texto tachado con CSS
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: .
Ejemplo:
Vista HTML: Ejemplo de texto con subrayado superior
En vista redacción se vería así:
Ejemplo de texto con subrayado superior
Subrayado Superior e Inferior:
Las etiquetas usadas son:
Ejemplo:
Vista HTML: Ejemplo de texto con doble subrayado
En vista redacción se vería así:
Ejemplo de texto con doble subrayado
Subrayado Inferior punteado:
Las etiquetas usadas son:
Ejemplo:
Vista HTML: Ejemplo de texto con subrayado inferior punteado
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:Ejemplo:
Vista HTML: Prueba
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 Prueba letra blanca y sombra negra
En vista redacción se vería así:
Prueba letra blanca y sombra negra
Y con sombra rosa: Prueba letra blanca y sombra rosa
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: Texto móvil en vista HTML.
Vista Redacción:
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 ♥
He dejado Feedburner ante la posibilidad de que termine desapareciendo como Google Reader, ahora mis actualizaciones se reciben semanalmente a través de MailChimp.
Si aún no te has apuntado para recibir mis novedades en tu correo electrónico, puedes hacerlo desde aquí:
Quiero recibir un correo semanal con las actualizaciones de El Perro de Papel
¿Todavía no te has suscrito a mi Super Boletín Mensual?
Recibirás información privada y tendrás acceso a nuestro Blog Privado para siempre.
¿Te ha gustado esta entrada? ¿Por qué no la compartes en tus Redes Sociales?
Puede que a alguno de tus contactos también le resulte interesante.
Muchas gracias ♥
Mira qué bien, me gustan un montón las rayitas punteadas de colores bajo el texto, seguro que lo uso. Mil gracias :)
ResponderEliminarHola guapa, ¡me alegra que te gusten! :D
EliminarFeliz jueves ;)
Muy buen post. Esto me habría venido de perlas cuando comencé ^o^
ResponderEliminarBss
Cosas molonas (y gratis ^o^ ) para tu blog
.
jajajaja ¡¡y a miiii!! los inicios son difíciles ;)
Eliminar¡¡Besos!!
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!
ResponderEliminarUn besazo guapísima, gracias por este post!
¡¡Pues te ha quedado muy chulo!! :D
EliminarLa combinación de colores me gusta mucho :)
¡¡Besos!!
Por cierto!!! Te he dejado una triple sorpresa en mi blog! :-)
ResponderEliminarjejeje ¡¡acabo de pasarme!! muchas gracias, sol
Eliminar