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.