Home About Affies Afiliame Tutorials
8.4.14

Tutorial: Blockquote Con mesajeto :3

Acaso no es violable? *-* 

Hooola muffins!! Cómo están, espero que bien :D 

Hace un ratisho estuve viendo un blockquote de Lunna, me ha encantado c:, entonces copié el código y me puse a hacer modificaciones, después me di cuenta de que le podía poner un mensajeto :DD. Si quieren ver el Preview, púchenle al enlace: 


P·R·E·V·I·E·W


El efecto está DI-VI-NO jejeje :B

Para obtenerlo deben... bueno, ya saben xD

Código guapo: 

blockquote {
font-family: century gothic;
margin-top: 9px;
background-color: #F1CFFF;/*Color de fondo*/
padding: 8px;
font-size: 11px;/*Tamaño de la Letra*/
color: #fff;/*Color de la letra*/
text-align: center;
outline-style: dashed;/*Tipo de la linea de adentro*/
outline-width: 1px;
outline-color: #fff;/*Color de la linea de adentro*/
outline-offset: -3px;
-webkit-transition-duration: .50s;
}
blockquote:before {
content: "Aquí tu mensajeto :3";
position: absolute;
font-family: century gothic;
font-size: 10px;
margin-top: -5px;
right: 40px;
color: transparent;
width: 120px;
padding: 0px;
text-shadow: 0px 10px 0px transparent;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
blockquote:hover:before {
background: transparent;
color: transparent;
text-shadow: 0px 0px 0px #FF83BD;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}


A editar! 

#F1CFFF: Color de fondo 
font-size: 11px;: Tamaño de letra
color: #fff;: Color de la letra 
outline-style: dashed;: Tipo de la linea de adentro
outline-color: #fff;: Color de la linea de adentro
Aquí tu mensajeto :3: Ahí tu mensajeto (?)
font-family: century gothic;: Tipo de
font-size: 10px;: Tamaño de letra del mensajito
#FF83BD: Color del texto del mensaje
margin-top: -5px;: Altura del texto de mensaje
right: 40px;: Posición a la derecha 

Eso es todo c:

¿Les gusta la firma?, está hermooosa *-*

Los leo pronto!

4 comentarios:

  1. muy chulo el tutorial, gracias ^^

    ResponderEliminar
  2. está precioso *^* gracias por el tuto :D
    saluditos! ^^

    ResponderEliminar
  3. Me encantó el efecto ^^
    Gracias por el tuto :3
    Beijinhos♥

    ResponderEliminar

Escribe tu comentario pequeño friki :3
Recuerda que me haces muy feliz si no haces:
·Spam
·Insultos
·Anónimos ofensivos
·etc.
·Y por favor escribe algo que se pueda entender