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

• Your own CSS parallax illusion 3d image
• A parallax illusion with CSS: The Horse in Motion
• 22 signs you're NOT addicted to design
• Expanding a HTML form using JavaScript
• Happy 1st anniversary Marcofolio.net

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

Spread the word and submit to:

Comments

Add New Search RSS

Friso   | 62.195.134.xxx | 2007-08-22 20:44:33 I just implemented it for my site, thanks! Reply | Quote 1   2

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge
	Please input the anti-spam code that you can read in the image.

Unsubscribe from e-mail notifications.