Create nice looking blockquote with jquery and css

EDIT: you can now do the same with just css, here is a demo

If you want to create nice looking blockquotes on your web page here is simple plugin.

nice looking blockquote

First basic css

.quote {
    font-size: 2em;
    font-family: Times New Roman, times, serif;
    position: relative;
.quote p {
    margin: auto;
    text-align: justify;
.quote span {
    font-size: 4em;
.quote {
.quote span.close {
    bottom: -0.8em;
    right: 0;

code for the plugin

$.fn.quote = function(params) {
    var width = params && params.width ? params.width : 400;
    $(this).css('width', width);
    $(this).html('<p>' + $(this).html() + '</p>');
    $(this).find('p').css('width', width - 120);
    $(this).append('<span class="close">&rdquo;</span>');
    $(this).prepend('<span class="open">&ldquo;</span>');

create basic html

<blockquote>Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Nulla sed dolor nisl, in suscipit justo. 
Donec a enim et est porttitor semper at vitae augue.

And run the plugin

$(document).ready(function() {
    $('blockquote').quote({'width': 500});

The default width is 400 px



, ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: