Hey babies! ¿Sabéis lo que echo de menos? Hacer tutoriales y tengo unos cuantos pendientes, así que voy a empezar con tres modelos de blockquote, que, para quién no sepa, es esto:
Hola, me llamo Blockquote :)
Aquí dejo una vista previa de cómo se ven.
Ahora es solo elegir el que más te guste, copiar el código y pégalo ANTES de ]]></b:skin>:
Modelo 1
.post blockquote {
border-radius: 3px; /*borde de la caja*/
color: #ffffff; /*color*/
text-shadow: 1px 1px 0 #B4B2D0; /*color de la sombra*/
margin-left: -0px; margin-right: -0px;
padding: 5px;
background: #d3d4df; /*color del fondo*/
-webkit-transition-duration: 1s;
-moz-box-shadow: inset 0 0 0 0px #bbbacd;
-webkit-box-shadow: inset 0 0 0 0px #bbbacd;
box-shadow: inset 0 0 0 0px #bbbacd;
-webkit-transition-duration: 1s;
}
.post blockquote:hover {
background: #bbbacd; /*color del fondo al pasar el ratón*/
-moz-box-shadow: inset 0 0 0 50px #bbbacd;
-webkit-box-shadow: inset 0 0 0 50px #bbbacd;
box-shadow: inset 0 0 0 50px #bbbacd;
text-shadow: 1px 1px 0 #A8A6D1; /*color de la sombra al pasar el ratón*/
}
Modelo 2
.post blockquote {
border-radius: 3px; /*borde de la caja*/
color: #ffffff; /*color*/
text-shadow: 1px 1px 0 #B4B2D0; /*color de la sombra*/
margin-left: -0px; margin-right: -0px;
padding: 5px;
background: #d3d4df; /*color del fondo*/
-moz-box-shadow: inset 0 0 0 0px #bbbacd;
-webkit-box-shadow: inset 0 0 0 0px #bbbacd;
box-shadow: inset 0 0 0 0px #bbbacd;
-webkit-transition-duration: 1s;
}
.post blockquote:hover {
background: #bbbacd; /*color del fondo al pasar el ratón*/
-moz-box-shadow: inset 300px 0 0 0 #bbbacd, inset -300px 0 0 0 #bbbacd;
-webkit-box-shadow: inseet 300px 0 0 0 #bbbacd, inset -300px 0 0 0 #bbbacd;
box-shadow: inset 300px 0 0 0 #bbbacd, inset -300px 0 0 0 #bbbacd;
text-shadow: 1px 1px 0 #A8A6D1; /*color de la sombra al pasar el ratón*/
}
Modelo 3
.post blockquote {
border-radius: 3px; /*borde de la caja*/
color: #ffffff; /*color*/
text-shadow: 1px 1px 0 #B4B2D0; /*color de la sombra*/
margin-left: -0px; margin-right: -0px;
padding: 5px;
background: #d3d4df; /*color del fondo*/
-webkit-transition-duration: 1s;
-moz-box-shadow: inset 0 0 0 0px #bbbacd;
-webkit-box-shadow: inset 0 0 0 0px #bbbacd;
box-shadow: inset 0 0 0 0px #bbbacd;
-webkit-transition-duration: 1s;
}
.post blockquote:hover {
background: #bbbacd; /*color del fondo al pasar el ratón*/
-moz-box-shadow: inset 0 10px 0 0 #bbbacd, inset0 -10px 0 0 #bbbacd;
-webkit-box-shadow: inset 0 10px 0 0 #bbbacd, inset 0 -10px 0 0 #bbbacd;
box-shadow: iinset 0 10px 0 0 #bbbacd, inset 0 -10px 0 0 #bbbacd;
text-shadow: 1px 1px 0 #A8A6D1; /*color de la sombra al pasar el ratón*/
}
No hay comentarios:
Publicar un comentario
Hey! Si has llegado hasta aquí es porque has leído todo el post y si no, intenta hacerlo, tal vez haya escrito algo sobre mí, el blog o cualquier tema que a mi me parezca importante.
Aquí dejo algunos puntos a tener en cuenta a la hora de comentar:
★ Por favor, sé respetuoso/a.
★ Si tienes cualquier duda que no se pueda resolver por comentarios o cualquier pedido, hazlo en Contacto.
★ ¿Quieres afiliarte? Puedes dejar el link en la sección Afiliate.
★ ¡Gracias por visitar el blog!
Aquí dejo algunos Kaomojis por si quieres usarlos:
(* ^ ω ^) ☆ *:… o (≧ ▽ ≦) o…: * ☆ (o ^ ▽ ^ o) (‘. • ω •.`) (o · ω · o) (@ ^ – ^) ヽ (* · ω ·) ノヽ (o ^ – ^ o) ノ (^ 人 ^) (^ ▽ ^) (¯ ▽ ¯) (‘. • ᵕ •.`) (≧ ▽ ≦) / (♡ ˙)˙ ♡) (* ¯ ³ *) ♡ (* ♡ ∀ ♡) ♡ (¯ ▽ ¯) / ♡ (> ﹏ <) (; ⌣_⌣) (–_–) (╯_╰) (T_T) (╥ω╥) (O_O;) (⊙_⊙) (⌒ ▽ ⌒) (^ – ^ *) / (o’ω`o) ノ (✧∀✧) / (~ ▽ ¯) ~ (^ _ ^ ♪) (~ ˘ ▽ ˘) ~ (˘ ▽ ˘) っ (͡ ° ͜ʖ ͡ °)
O si estás usando Windows, usa la combinación de teclas Windows + . (punto) para otros símbolos y/o emojis.