Creating Pullquotes with CSS
Like photos, pullquotes can accomplish a number of things to draw a visitor into your web page. Pullquotes:
- visually draw the reader's eye
- break up long sections of text, making it more legible and reader-friendly
An interesting quote can pull a reader into a story as effectively as a good photo. If a quote is particularly newsworthy, or made by a prominent academic or newsmaker, the reader will be more interested in spending more time with the story -- rather than browsing past it, and many visitors do.
Create pullquotes in much the same manner you created a photo and caption in the previous lesson. Here, we will think of a pullquote as a component with two internal elements -- the quote, and the attribute.
You would create a set of nested <div> tags like this:
A <div class="pullquote-right">
B <div class="pullquote-quote">"One of the most important objectives for the University is to increase the diversity of our students and faculty and to improve the inclusiveness of our community for all its members."</div> /B
C <div class="pullquote-attribution">-- Boston University President Robert Brown</div> /C
</div> /A
- Insert an overall <div> to contain our pullquote component
- Insert a <div> to contain the quoted text
- After the quote <div> but still within our overall <div> container, insert a <div> for the attribution.
|
