Tag Archives: CSS

Reusable Transparent CSS Rounded Corners

In retrospective, there are definitely some areas where I could have improved on my Karate Corners design. I decided to take a second look and write a quick post that details how I create corners today, after almost a year … Continue reading

A Very Simple CSS Chat Bubble

Each time you implement a new design element into your site, there are a vast array of approaches you can take to achieve the same outcome. Often times, I feel that the most simple of solutions is the best one. … Continue reading

The Wisdom of Simplicity

Web designers would be wise to approach every situation with one thing in mind: simplicity. Simplicity is the cornerstone of designing a well-structured and highly flexible HTML/CSS design. I’ve found that all too often, many designers approach a website with … Continue reading

A Whole New Web?

Should we abandon rounded corner techniques that require additional HTML markup in favor of emerging CSS techniques that are not yet supported on all browsers? Apparently, the answer is an overwhelming YES.

CSS Absolute Positioning

Absolute positioning is a very powerful CSS technique when used properly. Traditionally, when you use <div/> tags and the like, everything in your page design is generally stacked from top to bottom. Using absolute positioning gives you the freedom to … Continue reading

CSS in Print Media

Most of the time, web designers will optimize a site to display on screen media (any type of screen, such as a computer monitor or a mobile device screen). If your site has a lot of information that could potentially … Continue reading

Rounded Corners in Mozilla and Safari

The W3C’s CSS3 specification includes an oft-requested CSS attribute called border-radius. Using this attribute, you can create rounded-corner boxes that use no images, script, or other fancy DHTML tricks (pure CSS). This will make your site flexible, faster, and more … Continue reading

Pure CSS Image Hover

Many site designs will feature varying types of image “hover” states, where an image or background image changes when you move your mouse cursor into that area of the page. Traditionally, this change in image is handled via JavaScript. It’s … Continue reading

Create a DHTML Tab Strip

Tab strips are commonplace throughout the web, and they’re utilized in a wide variety of ways, such as in site navigation or form wizards. Organizing links in a tabbed format can add quite a bit of style and functionality to … Continue reading

Five Elegant Rounded Corner Boxes

I wanted to really take the concept of my “Karate Corners” design to new levels, so I created this simple demo to show you how visual elegance can work in tandem with technical simplicity.