Monthly Archives: April 2008

CSS Pullquotes

Pullquotes are used in most magazines, and many websites have adopted the use of them. They are named thus because they are short excerpts pulled from the article, and highlighted to draw your attention. This technique it great for long, wordy articles, since you can break-up the flow of the text a little, and highlight a noteworthy part of the text.

They are named thus because they are short excerpts pulled from the article, and highlighted to draw your attention.

Pullquotes on websites are generally blockquotes with a specific class assigned. Some CSS magic is applied to the class, and you have your pullquotes set-up.

I don’t use pullquotes too often, but I have classes defined nevertheless. (See my example pullquote above? It will look like a plain, unstyled blockquote if you’re reading this in an RSS reader. Visit the permalink page for the full effect.)

Here is my CSS:

.rpullquote, .lpullquote {
padding: 5px;
width: 202px;
margin-top: 8px;
margin-bottom: 8px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #990100;
border-bottom-color: #990100;
font-size: 15px;
text-align: center;
line-height: 1.1em;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: normal;
background-image:none;
}

.rpullquote {
float: right;
margin-left: 10px;
}

.lpullquote {
float: left;
margin-right: 10px;
}

As you can see, the first rule controls the visual aspect of the pullquotes, and the following two are used to float the pullquotes to either the left or the right. Feel free to tweak the styles to fit your stylesheet better.

Now, whenever you want to create a pullquote, just follow these steps:

  1. Copy the text you want to quote.
  2. Paste it into a new blockquote tag.
  3. Add class="rpullquote" or class="lpullquote" (right and left, respectfully) to the tag.

Guest Post Opportunity

Outlaw Design’s blog was recently sabotaged by unknown vandals. Their database was destroyed, and they didn’t have a backup (sadly, I know what that’s like). If you want to help them out, they’re offering an opportunity for guest writers.

Matt Mullenweg’s New Design

Matt Mullenweg has just redesigned his blog. First impression: “My eyes!” The oranges, greens, and blues are really shocking if you were expecting the old, more tame design.

Want a Short Domain? Misspell it

Digg, Flickr, Google. What so they have in common? They’re all misspelled. Digg obviously comes from “dig” and Flickr is obviously just “flicker” without the e. Then we have the story of Google. As the legend goes, Larry Page and Sergey Brin were going…

An Interesting Idea: 125×125 Ad + RSS Icon

I just thought of an interesting idea. The standard RSS icon is available in a 128×128 pixel size. Using Photoshop, you could reduce it to 125×125 easily, and add a legend to it. Put the name of your blog, or something describing your blog…

BlogBuzz April 19, 2008

Sidebar Spring Cleaning

Is your sidebar getting out of hand? It’s good idea to go through it a few times every year, and clear out the clutter. First, rank everything in the sidebar by order of importance. See what your users need to see, and what you…

What’s Your Blogging Workstation?

Do you prefer to blog with a desktop, or a laptop? Are you a Mac or a PC? What software do you just have to have to get your blogging done? What’s your preferred browser? Everyone has a unique setup that they use for…

CSS Blockquote Styling

The (x)html tag blockquote is generally used for, surprise, block-level quotes. For such a useful tag, it’s kind of plain looking, don’t you think? Why not spice it up a bit with some CSS? This is an example blockquote, after applying some styling. Make…

The Advantage of Web Applications

Web applications, or web apps, have, in my opinion, one huge advantage over “normal” programs. I’m sure you can guess what it is before you finish reading this. I just got a new Apple MacBook, as I’ve Twittered about, told everyone I know on…

Page 2 of 41234