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

• Recreating the IBM Lotusphere logo in CSS3
• The Apple.com navigation menu created using only CSS3
• Experimenting with the element() CSS function
• Why you want to use the :any() CSS selector
• Rotating billboard using only CSS3

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   2007-08-22 20:44:33 I just implemented it for my site, thanks! Reply | Quote

Anonymous - re:   2009-07-23 22:56:55 Friso wrote: I just implemented it for my site, thanks! Reply | Quote

Eszfzhve - RuvwMvgPFRPITrRYkOe   2010-11-10 23:33:18 There have been seventeen expansions to the original game since release. , www.williamsnhussey.com, http://www.williamsnhussey.com, http://xuwgju.kyrigan.co.cc/www.williamsnhussey.com.html www.williamsnhussey.com, amb, Reply | Quote

overweight dosage info - overweight dosage info   2011-06-14 08:54:25 I had found lots of information from this site. Thanks a lot for the information and I had liked it very much. It is very helpful for me. Thanks a lot and hope to see more stuff. Reply | Quote

online hair weight loss pills - online hair weight loss pills   2011-06-15 05:36:59 The website has simple and easy way of explain the people through articles which are so easy to understand, I was so pleased and suggest others also to visit the site once and get useful material from them. Reply | Quote

birth control pills informatio - birth control pills information   2011-06-15 05:37:46 Once go through this site, which is very interesting and helpful. I assure you people it is one of the best site I ever had gone through that has good information about what you are looking for. Reply | Quote

livediabetes pills info - livediabetes pills info   2011-06-15 05:38:31 One of my friends suggested me about this site which she found interesting, and when I opened the site I also found it interesting and beneficial and recommended few of my family members to go through it. Reply | Quote

clinic pharmacy journal - clinic pharmacy journal   2011-06-15 05:39:28 Wow! You guys are amazing and do a good job by providing some good content in this particular website. I hope everybody will make a visit to this website and read the content as it is helpful for some extent. Reply | Quote

weight loss sideeffects - weight loss sideeffects   2011-06-15 05:41:25 This is something interesting blog to read as there are some interesting articles posted for the readers. Therefore I suggest this site as different site for the readers as there is a lot of information in it. Hope that everybody reads it. Reply | Quote

top birth control pills - top birth control pills   2011-06-15 05:42:06 This is somewhat a good idea in providing such good information through these kinds of articles. I really felt fascinated while reading the content in this blog as it is really interesting and impressive. Reply | Quote

pharmacy place - pharmacy place   2011-06-15 05:42:36 It is one of the most impressive blog that I have ever read. It is really good to see such an amazing site online. I would say that there is no other site in the internet with so much of information. Reply | Quote

birth control pills tips - birth control pills tips   2011-06-15 05:43:25 Wow! This is real good site for the readers as the content in this sites is very informative and it makes us pleasure to read the whole content. I couldn Reply | Quote

greatest birth control pills - greatest birth control pills   2011-06-15 05:44:03 I felt so fascinated while reading this site that I have passed lot of time on reading the entire content provided in this blog. This is something new that I have spent that much of time to read as the whole content is interesting. Reply | Quote

natural anti smoking pills gui - natural anti smoking pills guide   2011-06-15 05:44:28 It is really a different article posted in this blog and makes users to feel interesting while reading the content. I am happy to say that all the content that I have read from this blog really helped in many ways Reply | Quote

overweight usage guides - overweight usage guides   2011-06-15 05:44:59 It is really amazing to read such a good article form a blog like this. I would say that you guy at this site are awesome and does a great job by providing some of the important articles to the readers. Reply | Quote

hair hair loss side effects hu - hair hair loss side effects hub   2011-06-15 05:46:40 The information given in this website is very clear to understand. The information was really helped me for my project. Reply | Quote

general retail pharmacy spot - general retail pharmacy spot   2011-06-15 05:47:44 This treatment is winning; the procedures are great which really helped in maintaining the correct impulses to trigger pain impulses. Reply | Quote

secure weightloss pill - secure weightloss pill   2011-06-15 05:48:26 Wow!!! What a post it is!!! I have never been to this website ever before. Have never seen it before, thanks for the blog post guys!!! Reply | Quote

Jeremyel - X-Rumer 7.0 - best software for advertising !   2011-09-30 11:44:32 XRumer 5 free does not work , where to download X-Rumer 7.0? write a private message or ICQ 42654589 Reply | Quote

phybribeneeli - On which websites can I create websites free of ch   2011-10-11 22:06:02 I need some help. I want to make one project but I have a problem: please give me somebody some links to the websites using which I can make my website for free. I really appreciate any help. Reply | Quote

PICTSMAGTIG - raza   2012-01-29 18:35:06 ########### Reply | Quote

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.