Fancy CSS Content Box

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.

Houston Web Design Sample ImageHere’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.

12 Responses to “Fancy CSS Content Box”

  1. Makhan Butt

    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/

  2. Fabio Neves de Brito

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

    But I like the approach and simplicity!

  3. Neil Milton Keynes

    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.

  4. fareed

    great i will try to do it on my site

  5. Abdul Wakel

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

  6. sajan kota

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

  7. Lou Storiale

    Very cool css styles on your site – great customization

  8. Ram

    Looks good in Safari too.

  9. Flug

    Good work. Can I get good use.

  10. uGuX SEO

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

  11. Ehab

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

  12. tommaso

    good job, I like it! 🙂

Leave a Reply

*