Blockquotes

>> Cómo poner citas


Un blockquote es una cita, y sirve para enmarcar un texto que se quiera destacar en la entrada.

  • Ubicación: para todos los casos, en la plantilla.
  • Proceso:
Pegar los debidos códigos después de .post blockquote {


Tipo 1) Con barritas laterales

  
}blockquote {
width: 450px;
margin: 10px 0 10px 50px;
padding: 10px;
text-align: justify;
font-size:12px;
font-family: arial;
color: #050505;
background: #F0F3BF;
border-left: 2px solid #9398A2;
border-right: 2px solid #9398A2;
border.radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

Si se quiere poner un fondo, sustituir esta línea background: #F0F3BF; justo por esta otra: background:url("URL IMAGEN DE FONDO") repeat scroll 0 0 #FFFFFF;


Tipo 2) Apuntillada


margin : 0 30px; padding: 15px 35px 20px 20px; background : #F7F7F7 url() no-repeat right top; font: .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 1px dashed #A39C96; } .post blockquote p { margin: 2; padding-top:15px; }

Cambiar datos de colores y background si se desea.


Tipo 3) Con bordes laterales redondeados


}
blockquote {
border-color: #b3a158;
border-width: 0px;
border-style: dotted;
border-left: 1px solid #b3a158;
border-right: 1px solid #b3a158;
width: 500px;
heigh: 200px;
padding: 20px;
margin: 20px 40px;
background-image: url("URL IMAGEN DE FONDO");
border-radius: 10px;}
blockquote.blockquote2 {
border: 1px solid  #78b5b4;
border-left: 0px double #78b5b4;
border-right: 0px double #78b5b4;
width: 500px;
heigh: 200px;
padding: 25px 57px;
margin: 10px;
background-color: #ffffff;
}

Insertar la imagen de fondo en "URL IMAGEN DE FONDO" y cambiar a gusto personal los valores de los colores de los bordes en border-left y border-right.


Tipo 4) Con sombras


webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
-webkit-box-shadow: 0px 0px 16px #DF3A01;
-moz-box-shadow: 0px 0px 16px #DF3A01;
box-shadow: 0px 0px 16px #DF3A01;
background: #D3D3D3 url(URL DE LA IMAGEN);
padding: 19px;
opacity: 0.5;
font-size: 13px;
color: #696969;
font-family: trebuchet ms;
}

Se puede insertar una imagen de fondo si se desea. Igualmente los valores de los colores de las sombras (shadow), el tamaño y fuente de la letra del texto son editables. El 16x del shadow es la sombra. Cuanto más alto sea este valor, más evidente será la sombra de la cita.


Tipo 5) Cajón con doble borde lateral
 
}
blockquote {
border-color: #eeeeee;
border-width: 1px;
border-style: solid;
border-left: 3px double #e2d67d;
border-right: 3px double  #e2d67d;
width: 500px;
heigh: 200px;
padding: 20px;
margin: 20px 40px;
background:  #ffffff;}
blockquote.blockquote2 {
border: 1px solid #eeeeee;
border-left: 3px  double #9bbb4d;
border-right: 3px  double #9bbb4d;
width: 500px;
heigh: 200px;
padding: 25px 50px;
margin: 10px;
background-color: #ffffff;
}  

Los valores de los colores de fondo y de los bordes se pueden cambiar. 

>> ¿Cómo obtengo los colores para editar los blockquotes?


Para obtener colores en códigos hexagecimal (Hex), acompañados del símbolo #, se puede consultar esta web: Hex Color Codes o esta otra: Color Hexa. También hay disponibles unas aplicaciones (no programas descargables al disco duro) que identifican cualquier color que aparezca en pantalla, obteniendo así su código Hex. Tal es el caso de JC Picker (o Just Color Picker), Pixel Pick o el complemento para Firefox Rainbow Color Tools, ambos facilísimos de usar y muy intuitivos. Por estas vias es casi imposible quedarse sin colores.  

En la nube de: ,