Ever came across an alert message on a webpage that has some nice CSS styling to it? Personally I modified this one to create an quote-box, to use it on this website. Here's an example:

Lorem ipsum dolor sit amet

There is a small valid CSS code behind this one, but it is very nice to use on your website.

.quote {
   background: #92A4AE url(images/icon/quote.png) center no-repeat;
   background-position: 15px 50%;
   text-align: left;
   color: #ffffff;
   font-weight: bold;
   font-size: 16px;
   padding: 5px 20px 5px 60px;
   border-top: 2px solid #091626;
   border-bottom: 2px solid #091626;
 }

With the background-position you see that the background image will be indented by 15 pixels and positioned vertically half way in the quote box. To actually input your quote box in your webpage, simply insert a paragraph with the class "quote".

<p class="quote">Lorem ipsum dolor sit amet</p>

And that's about it, easy as that. Works as expected in Firefox, Internet Explorer and Safari.

Source: Bioneural  

Interested in this topic? You might enjoy another article I've written called

• Experimenting with the element() CSS function
• Why you want to use the :any() CSS selector
• Webkit Bug: Hover and Sibling Selector
• New CSS3 properties added to Firefox 3.6
• Best of the Best: 2009

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: