4 de diciembre de 2016

Tutorial: Personalizar el texto en negritas

 Buscando nuevas formas de personalización para mis plantillas estaba visitando el blog de DayFanAnimes y me di cuenta que sus textos en negritas,(de los post) son muy diferentes, a como es originalmente un texto en negritas. O sea simples negritas...
   DayFanAnimes esta en hiatus desde hace tiempo, así que no tenia oportunidad de que me respondieran por lo que me puse a revisar el código HTML de un post y ver que hace que un texto se interprete como negritas. Una simple etiqueta - b
   Una rápida prueba después decidí enseñarles este truco el cual me parece fascinante ya que le da un nuevo look a tus post.
Así que si quieres que tus negritas tengan un nuevo estilo sigue los siguientes pasos..

Dirígete a:
  1. PlantillaPersonalizar → Avanzado → CSS

Sin efecto Hover

Una vez ahí, añadirás los estilos que tú quieras.
b{
ESTILOS QUE QUIERAS
}
Dentro de la etiquetas y antes del cierre ( } ) añade tu nueva personalización

Ejemplo: Utilizando 
b{
color: #357ae8;
padding: 1px 1px 1px 1px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
Te dará como resultado que el texto en negritas te aparezca de esta manera: 
Entendiendo los cambios:
  • color: color del texto en negritas
  • padding: separación alrededor del texto
  • text-transform: trasformación del texto
  • font-weight: negritas
  • text-decoration: decoración del texto
text-transform - text-decoration


Añadiendo más cambios:
Si quieres un tamaño y un tipo de letra diferentes puedes utilizar: 
  • font: normal normal 14px Arial;
Cambia 14 por un número mayor o menor y Arial por el tipo de letra que quieras. Si es una letra externa a las disponibles en blogger asegúrate de que las puedas utilizar en tu blog. (Tutorial: Añadir y utilizar fuentes de Google Front en tu blog)

Si quieres un fondo para resaltar aún más las negritas utiliza: 
  • background: #000;
Cambia 000 por el color que desees. (Colores HTML) y si al agregar fondo quieres que los bordes no sean tan "cuadrados" personalizar el borde con: 

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;

Si quieres sombra en el texto, utiliza: 
  • text-shadow: 1px 1px 1px #fff;
Cambia fff por el color de sombras que desees. (Colores HTML).

Si quieres separar aún más las letras, utiliza:
  • letter-spacing: 1px;
Cambia 1 por un número mayor si quieres que las letras estén más separadas. Si quieres que estén aún más juntas utiliza -1.

Ejemplo: Utilizando
b{
color: #f4abaa;
padding: 1px 1px 1px 1px;
text-decoration: none;
font: normal normal 16px cambria;
font-weight: bold;
text-transform: uppercase;
background: #eee;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-shadow: 1px 0px 1px #fff;
letter-spacing: 2px;
}
Obtienes algo así:

Con efecto Hover

Cuando se pase el cursor sobre el texto en negritas el estilo puede cambiar.
Debajo de la etiqueta b{}  agrega:
b:hover {
color: #DF8685;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
Ejemplo: Utilizando
b{
color: #f4abaa;
padding: 1px 1px 1px 1px;
text-decoration: none;
font: normal normal 40px cambria;
font-weight: bold;
text-transform: uppercase;
background: #eee;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-shadow: 1px 0px 1px #fff;
letter-spacing: 2px;
}
b:hover {
color: #DF8685;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
Obtienes ESTE RESULTADO implementado un blog de pruebas para la vista completa del efecto.

¿Qué les parece? a mi me he encantado y lo utilizare de ahora en adelante para mis plantillas pre-made. 

Muchos besos y abrazos, hasta la próxima

No hay comentarios:

Publicar un comentario