Fancy CSS Content Box

Posted on: September 5, 2007 — 12 Comments

Tweet

Strictly for beginners only, if you are a CSS guru you probably know how to make a better css content box.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In lobortis. Nam molestie lacus sed metus lobortis rutrum. Curabitur est enim, ornare tristique, fermentum id, feugiat eget, elit. Pellentesque et metus id tellus pretium lacinia. Pellentesque lacus velit, gravida in, consectetuer quis, iaculis eget, leo. Css content box Morbi vitae eros. Phasellus magna. Proin risus odio, porttitor sit amet, tempor sit amet, viverra at, eros. Fusce ac ipsum quis sapien tincidunt dignissim. Ut aliquet tortor in augue condimentum tempus. Fusce placerat faucibus diam. Pellentesque ornare. Nunc diam.

Vivamus viverra, ante vitae hendrerit convallis, ligula nulla laoreet diam, eu rutrum massa erat nec nunc. Donec ac mi. Vestibulum magna arcu, iaculis eu, venenatis id, facilisis convallis, quam. Phasellus sagittis adipiscing est. Nunc pretium sagittis felis. Vivamus euismod lectus vel risus. Cras a libero vitae mi commodo facilisis. Praesent nibh. Ut vehicula fermentum lectus. Nunc et odio cursus sapien adipiscing pharetra. Fusce ante. Nulla facilisi. Mauris tempor. Aliquam fringilla libero rhoncus mi. Nullam congue.

This tutorial will be pretty straight forward, there isn’t any real css tricks or hacks involved. But I really like the simplicity of this css content box and I thought I’d share this with all the aspiring designers out there. What you see above is actually a div with an image of a folded corner otherwise known as dogear for obvious reasons.

Here’s what the dogear image looks like by itself, as you can probably tell this image will be sitting on the upper right corner of our content box. Let’s do some basic coding, here is the css code for our content box.

div.contentbox{
    background: #F7F7F7 url('images/dogear.jpg') no-repeat;
    background-position:100% 0%;
    border:1px dotted #ccc;
    padding:30px}

That’s basically it, we have a CSS class for our content box. I told you this was straight-forward! And now let’s take a look at the html code:

  <div class="contentbox">

    Blah blah blah the contents will be placed here...blah blah blah..
  </div>

Pretty simple right??? Of course you can place the dogear on any of the corners by playing around with the CSS class for that image.

*NOTE ~ This was tested on Firefox 3, IE6, IE8, and Opera not sure how it would look on Safari.

No related posts.

Posted in CSS Tutorials | Tags: content box, css, tutorial

12 Comments for "Fancy CSS Content Box"

1. For the methods particularly, you could assess out this web page which has CSS for many esay, many table styles:

   http://www.handycss.com/tips/fancy-tables-in-css/

   Reply To This Comment

   Makhan Butt   —   March 26, 2012

2. Hi, it´s a good article for beginners as you said.

   But I like the approach and simplicity!

   Reply To This Comment

   Fabio Neves de Brito   —   December 30, 2011

3. Nice simple example which is great for learning. You can also remove the second line of code and replace the first line at the end with top right.

   Reply To This Comment

   Neil Milton Keynes   —   November 3, 2010

4. great i will try to do it on my site

   Reply To This Comment

   fareed   —   October 25, 2010

5. I want to change the background image . i do not want to repeat the background image.

   Reply To This Comment

   Abdul Wakel   —   May 28, 2010

6. Thanks a ton for this post, this content box looks very cool.its awesome. wonderful work.

   Reply To This Comment

   sajan kota   —   May 25, 2010

7. Very cool css styles on your site – great customization

   Reply To This Comment

   Lou Storiale   —   May 16, 2010

8. Looks good in Safari too.

   Reply To This Comment

   Ram   —   July 19, 2008

9. Good work. Can I get good use.

   Reply To This Comment

   Flug   —   May 6, 2008

10. Would it be possible to also apply this to images, as well?

    Reply To This Comment

    uGuX SEO   —   March 19, 2008

11. Thanks for this nice customization. I am sure everyone would find this one useful !

    Reply To This Comment

    Ehab   —   October 24, 2007

12. good job, I like it!

    Reply To This Comment

    tommaso   —   September 18, 2007