Do you like the pull quotes I used in the “How to Write an E-book” entry? They do help engage the reader, don’t you agree? How about drop caps? Both tricks I learned at Mandarin Design.
Let’s have a look at the code, shall we? For drop caps, it’s relatively simple.
We’re looking to set the properties of the first letter in a paragraph to much larger, they need to span about three lines of the paragraph’s regular text, and the font and background can be changed to make it stand out in any cool way you might imagine.
The “L” at the beginning of this paragraph is achieved like this:
<!-- Drop Caps Styling -->
<span style="float: left; color: silver; font-size: 100px; line-height: 70px; padding-top: 2px; font-family: times;">L</span>
That’s not to say that that is the only way to achieve this effect, but it works pretty well across browsers. Now suppose you wanted to have a little more decoration such as putting a border around it and coloring the box that it’s in? Let’s give that a try. Let’s put a big white letter in a light blue box using pretty much the same styling otherwise as in the previous example:
<!-- Drop Caps in Bordered, Colored Background Box -->
<span style="margin-right: 6px;
margin-top: 5px;
float:left;
color:white;
background: lightblue;
border:1px solid blue;
font-size: 80px;
line-height: 60px;
padding-top: 2px;
padding-right: 5px;
font-family: times;">
Notice we can put each attribute on its own line for easier readability if we like. You just want to make sure that if you’re composing in a text editor that inserts its own line breaks, that you take that into account if your code doesn’t work. You need a good text editor like TextPad. You can create “boilerplate” text, or “macros”, that contain these little snippets of code, then whenever you want to use them, you just select and play the macro to insert them into your document.
The purpose
of pull quotes is to get the
reader’s
attention…
So now, how about those colorful “pull quotes” that lend interest to, and draw your reader into your article? One of the first considerations is in choosing the text from the main article which will draw the most interest. The purpose of pull quotes is to get the reader’s attention. I’ll choose this last sentence for these purposes here. One of the other things is to be sure you have a long enough paragraph to set the effect off from the page.
Spanning two paragraphs will work just fine as well. The pull quote is a box that floats to one side or the other of the content. In fact, everything in CSS is a box. One of the most difficult things to learn is the placement of these elements and getting the surrounding elements to “clear” properly.
Here’s the code used above:
<div style="float: right;
width: 150px;
margin-top: 1px;
margin-bottom: 15px;
margin-left: 5px;
padding-bottom: 5px;
font-family: Arial,Helvetica,Georgia;
font-size: 30px;
line-height: 24px;
color: #cc66ff;
text-align: right">
<span style="color: #660099">The purpose</span><br /> of pull quotes is <strong>to get the</strong><br /> reader's<br /><span style="color: orange">attention...</span></div>
SocialVibe