Tag Archives: css

CSS Pullquotes

Apr 23, 2008 by Matt | Posted in Design One Comment

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.

CSS Blockquote Styling

Apr 16, 2008 by Matt | Posted in Design 8 Comments

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 something similar, or do your own thing.

Like my blockquote styling? I’ll show you how it’s done.

Here is a CSS rule that outputs a similar result:

blockquote {
margin:22px 40px;
padding:3px;
color:#575757;
padding: 0 50px;
background: transparent url("images/blockquote.gif") no-repeat 0 0;
}

You will need a “quote-mark” image of about 32×32 pixels for this to work correctly. To make one yourself, create a new image and type a #e5e5e9 quote-mark into it.

Of course, you may want to tweak the color values and spacing so it fits into your template correctly.

The blockquote is one of the bloggers’ most-used tags. It’s a great way to quote an excerpt from a post you’re linking to, as I do frequently.

Build a Print Stylesheet

Jan 11, 2008 by Matt | Posted in Design 4 Comments

Don’t you hate it when you print a web page, only to have a bunch of extra junk that generates several pages worth of ads, RSS icons, and navigational links? What a waste of ink (it costs you $8000/gallon, you know).

Computers aren’t really suited for reading long documents, so it’s common to print overly long web pages for later reading. I do it now and then, though I mostly try to read things online (I’m not going to sit through a 40-page eBook though). Plus, if you’ve penned the ultimate guide to removing grape jelly stains (or whatever, it’s hard to think-up good examples), people will want to print it out to refer to in the future.

What you need is a print stylesheet. No website should be without one.

Continue reading →

Box-Model Lunacy

Dec 11, 2007 by Matt | Posted in Design One Comment

I’ve been doing some design work lately, and I’ve been dealing heavily with the Box Model.

If I want to create a 200px-wide box with 3px padding, I have to set the width to 194px. Why? Because otherwise the box ends-up as 206 pixels wide. Why is the box model like this? 200 pixels wide should mean 200 pixels wide. The three pixels in padding shouldn’t change the size of the box, just the textual content inside the box. It just makes more sense.

What do you think? Does the Box Model make sense to you as it is, or is my way better?