CSS: pullquote with transformations

Pull quotes are a really nice typographical effect to be added to our pages and stylized with CSS. However, traditional pull quotes obtained with CSS 2.1 have a major limit: they cannot be transformed to get the final effect of a distorted or at least slanted pull quote. Instead, CSS 3 allow for this kind of feature thanks to transformations feature. In this post I'm going to show you how to achieve this result with CSS transformations.

First, a basic markup structure:

<p><span class="pullquote">...</span>...</p>

Now we need to align our pull quote to the left, add a background image, change the font size and family, add some margins and, finally, rotate the pull quote by 5 degrees counterclockwise:

span.pullquote {
 float: left;
 width: 10em;
 margin: 0 5px 5px 0;
 padding: 0 0 0 65px;
 font: 1.5em Georgia, serif;
 color: #555;
 background: url(quotes-left.png) no-repeat 0 0;
 -moz-transform: rotate(-5deg);
 -webkit-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 transform: rotate(-5deg);

We've also added a left padding to make room to the background image. You can see the result below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.