Editando negrita, cursiva y subrayado


¡Hey, hola! En el post corto de hoy les voy a enseñar cómo personalizar un poco el contenido de sus entradas, con esta pequeña guía de códigos.

Estas opciones son usadas para diversas cosas, algo que hay que tener claro es que TODO blogger usa al menos una de estas, así que es bueno saber como editarlas para darles un toque personalizado.
Vamos a Plantilla>>Html
Debemos pegar estos códigos debajo de:
/* Posts
----------------------------------------------- */

Negrita:
b {
color: #ff8ea0; /* Color de letra */
text-decoration: none;
text-shadow: 1px 1px 0px #000000; /* Sombra */
}

Cursiva:
u {
color: #ffffff; /* Color de letra */
text-shadow: 1px 1px 0px #000000; /* Sombra */
text-decoration: none;
}

Subrayado:

i {
color: #2dbab4; /* Color de letra */
text-shadow: 1px 1px 0px #000000; /* Sombra */
 text-decoration: underline #ffffff; /* Línea */
}

Tachado:
strike {
color: #bebebe; /* Color de letra */
text-shadow: 1px 1px 0px #ffffff; /* Sombra */
 text-decoration: line-through #ffd2d9; /* Línea */
}

Les dejo algunos otros códigos para que puedan personalizar un poco más todo:

Sombra:
text-shadow: 0px 1px 0px #000000, 0px -1px 0px #000000, 1px 0px 0px #000000, -1px 0px 0px #000000;

Fondo:
background: #d7d7d7; /* Fondo */
margin:9px;
letter-spacing: .1em;
padding: 6px 8px 4px 6px;
box-shadow: inset 0 0 6px #ffffff; /* Color de sombra de fondo */
border: #ffd2d9 1px solid; /* Borde de caja */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;


Transición:
Con transición me refiero al cambio que tiene el texto al pasar el cursor en él.

Para este último debemos añadir; 
-webkit-transition: all 0.5s ease-in-out;
en el primer código (b, u, i, strike) en el cual queramos la transición si queremos que tenga una transición suave y no cambie de golpe.


Pegamos esto debajo del código principal de la opción que queremos editar.
Nombre:hover { /* Nombre b;negrita, u;cursiva, i;subrayado, strike;tachado */
Aquí ponemos lo que queremos modificar
-webkit-transition: all 0.5s ease-in-out; /* Transición */
}
1. Deben sustituir "Nombre" por el código que quieran editar (b, u, i, strike)
2. Deben sustituir "Aquí ponemos lo que queremos modificar" por los códigos que quieren que cambien al pasar el cursor, puede ser el color de la letra, sombra, fondo ¡Lo que deseen!

Eso ha sido todo, un post bastante corto, ¡Nos leemos!

3 件のコメント:

  1. ¡Hola!

    Te he nominado en el tag "30 cosas sobre mi", pasaba a avisarte. Excelente tuto por cierto ^^

    返信削除
    返信
    1. ¡Graciaaaaaaaaaaaaas por la nominación!

      削除
  2. (。◕ ‿ ◕。)/ Holaaa!!!
    MUy buen tutorial, hace tiempo que no veía uno de estos, gracias por compartirlo :D

    Espero puedas pasarte por mi humilde espacio ♥

    穛 S4Ku SEK4i®

    返信削除