Cómo Estilo un Blockquote con CSS

Admin Agosto 24, 2015 Internet 54 0
FONT SIZE:
fontsize_dec
fontsize_inc

Realiza tus páginas web blockquotes destacar y ser diferente. Su estilo con CSS para hacer diferente impresionante.

Utilice un fondo de la imagen, una libra, y un borde

Escriba una blockquote en tu página web como lo haría normalmente, con las etiquetas blockquote formatearlo.

Una imagen de fondo no es esencial, pero hay uno en este ejemplo. Y 'lo suficientemente grande para crear un fondo para un blockquote que es más largo que en el ejemplo de la apertura del artículo. Tenga en cuenta que una larga blockquote requiere una imagen diferente para lucir bien.


Comience por agregar la imagen de fondo para selector blockquote en CSS. He aquí un ejemplo:

blockquote {
Imagen de fondo: url (tack.jpg);
background-repeat: no-repeat;
background-position: centro izquierda;
}

Algunas imágenes pueden verse bien repetida, pero esto funciona mejor con el valor no-repeat para la propiedad de la repetición. La colocación de la vuelta horizontalmente a la izquierda y el centro verticalmente, mantenga el giro a la izquierda y dejar un poco de espacio para la expansión en la vertical de arriba a abajo para un poco más largo blockquote.

Ofrece un ancho blockquote si quieres. Blockquote tienen sangría a la izquierda ya la derecha por defecto: Se puede considerar suficiente contención, o es posible que desee una anchura menor.

Con esta imagen en particular, necesita un poco de relleno para mover el texto hacia el lado izquierdo de la blockquote de una manera que no se sienta en la parte superior de la curva. Por último añadir una frontera de algunos o todos los lados.

La regla de ejemplo es ahora:

blockquote {
Imagen de fondo: url (tack.jpg);
background-repeat: no-repeat;
background-position: centro izquierda;
width: 400px;
padding-left: 110px;
padding-right: 5px;
border: 2px discontinua # FC8A42;
}

Puede cambiar este ejemplo la regla de muchas maneras, dependiendo de la imagen, el relleno o borde que se utiliza para personalizar un blockquote. Crear un blockquote personalizado que funciona bien en tu página web.

  Like 0   Dislike 0
Comentarios (0)
Sin comentarios

Añadir un comentario

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caracteres a la izquierda: 3000
captcha