Voces Múltiples: Blockquotes estilo y tire de citas en Diseño Web: Consejos y ejemplos

Blockquotes estilo y tire de citas en Diseño Web: Consejos y ejemplos:
Hay un montón de ejemplos en la tipografía web donde citas de texto se adaptan perfectamente a su diseño. Cuando tenga que expresar diálogo o repetir una cita de otra fuente es el estilo HTML perfecto. Pero extrañamente no hay tantos ejemplos de profesionales en línea donde usted puede mirar en busca de inspiración.
Quiero dedicar el post de hoy para ver cómo se puede crear blockquotes elegantes y tire comillas.
Modern CSS3 blockquote efectos de estilo

Modern CSS3 blockquote efectos de estilo

Como diseñador web, usted tiene que considerar el contenido de página web como un factor crucial en la venta de su dominio. Creación de un aspecto elegante a sus entradas de blog y páginas tendrán a los lectores enganchados durante más tiempo. Hay un puñado de diferencias entre estos estilos de cotización y debemos examinar más de cerca a fin de comprender plenamente las tendencias de diseño moderno.
No es necesario entender mucho acerca de HTML5 o CSS3 , pero tener un conocimiento básico en el diseño web hará este proceso mucho más fácil. Y no dude en emular muchos de estos estilos en sus propios diseños!
Lectura recomendada: Diseño de interfaz de usuario Killer Presentaciones Web Con Freebies - Ultimate Guide

Buceo en la semántica

Antes de ver a los estilos CSS primero debemos repasar las diferencias entre blockquotes y citas de extracción. Hay una pequeña colección de etiquetas diferentes que puede utilizar en su margen de beneficio para denotar estos elementos de la página.

Blockquotes

Cuando se utiliza la etiqueta HTML5 blockquote esto debería representar un bloque de texto completa - un párrafo o, posiblemente, un par de párrafos. Estos por lo general abarcan toda la anchura de su texto y aparecerá mucho más grande de lo normal. Blockquotes contener texto de la cita de cualquier referencia externa, más común en otros sitios web o blogs. Pero se puede citar el texto de medios impresos o digitales, incluso, como una película o programa de TV.

Tire de citas

Tire de citas están alineados a un lado de la página en el medio secciones de contenido. No hay ninguna etiqueta pullquote específico en HTML5, por lo que la semántica no son exactamente formal. Sin embargo, el uso más típico de cotizaciones de tracción es copiar texto que ya se encuentra en algún lugar en el documento. Esto ayuda a resaltar frases importantes y rompe el flujo de la página normal.

Nueva HTML5 Blockquote Reglas

Con todas las normas anteriores, el elemento HTML blockquote era un elemento raíz que contiene etiquetas de marcado sólo semánticas. Estos pueden ser <p> , <ul> , <div> , u otros elementos de la línea de bloque. Esto normalmente significa que blockquotes sólo se podía utilizar para grandes citas de texto.
Sin embargo, las nuevas características HTML5 blockquote específicamente que "uno no tiene que utilizar elementos p dentro de los elementos blockquote". Esto hace que la construcción de su HTML mucho más fácil ya que no es necesario contar con mayores estándares de codificación, más confusas. Sólo tienes que arrastrar el texto en el <blockquote> etiqueta y ya está bueno para ir.
Otra adición es el atributo típico citar en blockquotes. Puede establecer un valor de URL única, que contiene el texto que estamos citando. Esto no es una mala opción para agregar en el código, pero hay alternativas que pueden ser más fácil de usar.
Por ejemplo, puede añadir un poco de texto directamente debajo del blockquote y enlace al artículo en texto. En este escenario, los lectores también tienen la oportunidad de rastrear la cita de nuevo a su fuente original.

Primer ejemplo blockquote en CSS / JSFiddle

Citas Inline

Tire citas podrían considerarse cotizaciones en línea, ya que se encuentran comúnmente flotante a la izquierda oa la derecha de la página de contenido. Artículos utilizar estas citas tracción en línea (o levante-out comillas) para mostrar contenido relacionado del artículo.
Una pequeña etiqueta HTML5 <q> se puede utilizar para envolver estas citas de extracción, aunque este elemento es de uso frecuente para las citas dentro de sus párrafos. Yo rara vez visto alguna vez a los desarrolladores web utilizando el <q> etiqueta porque es muy torpe en el marcado.
Sinceramente, recomendaría la creación de estilos personalizados para su cita de tracción y envolviéndolos en un div, span, o incluso elementos blockquote.

Pull-Citar flotando a la derecha JSFiddle

Mi ejemplo anterior ilustra una muy simple pull-cita. Podemos estilo a. Tirar clase en cualquier elemento blockquote típico que luego flotó hacia la derecha. Usted puede arreglar los estilos más uso de las comillas y el texto en cursiva.

Aplicar estilos CSS completa blockquotes

Echemos un vistazo a algunos ejemplos básicos que he creado utilizando las propiedades CSS. Blockquotes son muy interesantes porque hay docenas de estilos a seguir. La cita en línea típico es un poco más sutil, ya que se puede combinar este texto en el contenido de la página principal.

Blockquote fuente de visualización con referencia

El ejemplo anterior utiliza un bloque por defecto de estilo cita con la atribución a la parte superior. Puede colocar una referencia de carácter o enlace web que conecta a su texto citado. He añadido un efecto de sombra de texto para mejorar la visión un poco más.
Este estilo blockquote es mucho diferente de propiedades predeterminadas típicas. Usted tiene la libertad para copiar mis códigos y modificar los estilos que se adaptan a sus necesidades. La atribución de origen también puede ser movido por debajo de la cotización, si usted piensa que se ve mejor. La fluidez es un aspecto clave para crear blockquotes viables que también se ven bien en un monitor.

Utilizando Cotizaciones BG imagen

Una tendencia popular para otro blockquotes es agregar sus propias imágenes de fondo CSS para comillas. Puesto que usted no puede predecir la altura de las citas por lo general, vamos a crear dos imágenes diferentes y girar una de las comillas al revés.

Blockquote estilos CSS con iconos de películas y series

En mi ejemplo que estamos usando otro blockquote con una clase especial .bq3 . Estoy usando un elemento de párrafo que contiene el texto completo citado para que nuestro comillas fondo se expandirá verticalmente.
La premisa es utilizar una imagen de fondo que no se repite en el elemento blockquote en la esquina superior izquierda. Luego, en el interior del elemento párrafo, añadir otra imagen de fondo que no se repite en la esquina inferior derecha. Espolvorear con un poco de acolchado adicional y tenemos un blockquote realmente bonito estilo para cualquier diseño de página!

Pull-citas que se destacan

Por mi último pedazo de código que puede crear un conjunto totalmente nuevo de la línea de color pull-comillas. Este elemento blockquote interna está flotando sobre el lado izquierdo, y he creado un esquema de caja de color más oscuro que contrasta el texto de párrafo. Esto se destacan como estás hojeando contenido de la página.

de código abierto pull-citas con CSS3 en violín de JS

Lo ideal puede utilizar cualquier combinación de colores a juego que sigue a su disposición. Pull-citas son los únicos que pueden caer en cualquier punto de la copia de la página y lucir realmente elegantes. Pero al agregar estos efectos de fondo extra con las esquinas redondeadas, usted encontrará que los visitantes son mucho más receptivos a la lectura en lugar de artículos skimming.
Usted puede crear algo muy similar para sus propios diseños e incluso añadir imágenes de fondo, si lo desea. Las posibilidades son infinitas y requieren una consideración cuidadosa antes de tomar cualquier iniciativa. Pero tomar estos ejemplos CSS como punto de partida y continuar entrando y codificando sus propias piezas!

Para leer más

Showcase Gallery

Lo que el artículo podría ser completa sin mostrar algo de talento de todo el Web? En la siguiente galería he reunido más de 40 ejemplos de blockquotes y pull-citas en diseños de página web.
Diseñadores de todo el mundo encontrará un montón de inspiración para trabajar fuera. Pero si usted tiene alguna pregunta o sugerencia para los estilos que puede haber perdido, no dude en dejar un comentario en el área de discusión puesto inferior.
Survs