I have to admit that when I like the design of a website I check its CSS and HTML to see the code hoping to learn something new. I’m horrible at design and I cannot make a box even if I have it in front of me for 24 hours non stop but I love all kinds of tricks to make the content more appealing: rounded boxes, sexy quote marks, bubbles, everything.

What is really weird is that all these fancy design elements are usually cut as images and put as background-image for some DIV while the vast majority of them can be recreated with CSS. I admit, not all of them are simple but some do and today I’ll show you my latest experiment. I love a certain kind of box and I’m trying to make it using CSS3 only. After a little prayer to the CSS3 God let’s start.

If you’re not a patient person skip all this and go directly to the test page.

Tweet Shadows are a graphical improvements for design or the website’s usability. We may want to create a design with shadows under images or boxes, but shadows also can improve usability and accesibility for the text positioned over the images. Text shadows In this post we’ll try to present some css techniques for text shadows [...]

Tweet Javascript resources for rounded corners: Corner.js ShadedBorder – JavaScript Round Corners with Drop Shadow Anti-aliased Rounded corners with JQuery jQuery Corner Demo – more effects, not only rounded CurvyCorners Building Rounded Corners With CSS and JavaScript – more like a tutorial Rounded corners MochiKit Rounded corners -  editsite.net Let us know if you know [...]