CSS3 Only Rounded Borders, Drop Shadows and Background Gradients

Published: Tuesday, February 7th, 2012 18:53 p.m.

CSS3 provides some great new styling techniques. If you are new to web designing and want to create rounded corners, shaded borders and gradients, (CSS3 can achieve these styling techniques in minutes).

Prior to the new CSS3 standards, such styling techniques were incredibly time-consuming and cumbersome hacks and fudges. For example, you can create rounded corners using a combination of image box or image sprites and JavaScript. However, the implementation time is always increased through cross browser testing. Some of these techniques are simply too complicated for the first time web designer. However, help is at hand. CSS3 has some great new techniques which mean you can create stylish looking web pages that have a 3-D sculpted and rounded look and feel. Novice users can now quickly create professional looking web templates in minutes. Look at this website border design.

The slight drawback is the incompatibilities exist between browsers which mean CSS3 requires multiple instructions in your style sheet. In addition, IE8 or below does not recognise some css3 standards. However, those clever people at CSS3pie.com have created an easy to implement code (PIE.htc), which neutralises most cross browser issues. It helps to supplement the new native standards in Internet Explorer 9, by providing supplemental CSS code which will allow quick sculpting, radius and gradient techniques to be produced for any browser, on any device.

A CSS3 Example

Creating rounded corners using CSS3 Rounded corners are becoming increasingly popular to create more sculpted and 3-D effect. To ensure the css3 instructions work in different browsers, you will need to repeat the coding in slightly different ways. Chrome, Safari and Firefox all support rounded corners natively but require different tags. Likewise, creating a box shadow requires multiple instructions. The new stylesheet settings allows designers to create multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset. The Syntax for box shadows is: h-shadow v-shadow blur spread color inset. Putting it all together:-

.example-table{

behavior: url(PIE.htc);position:relative; z-index:1;

-webkit-box-shadow: #888 0px 0px 15px; -moz-box-shadow: #888 0px 0px 15px ;box-shadow: #888 0px 0px 15px;

-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;

background: #FFFFFF;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#C0C0C0));background: -webkit-linear-gradient(#FFFFFF, #C0C0C0);background: -moz-linear-gradient(#FFFFFF, #C0C0C0);background: -ms-linear-gradient(#FFFFFF, #C0C0C0);background: -o-linear-gradient(#FFFFFF, #C0C0C0);background: linear-gradient(#FFFFFF, #C0C0C0);-pie-background: linear-gradient(#FFFFFF, #C0C0C0);

border: 1px solid #003366; padding: 0px 0;

}

Above is the CSS code that utilises CSS3 and the PIE.htc and creates the table example you are looking at. When using css3pie, I would recommend using a plain <!DOCTYPE html> to keep Microsoft IE happy. I found some incompatibilities with Internet Explorer if the wrong doctype is used. Also, make sure you specify a Z-index layer if you are overlapping classes (such as tables within containers). You also need to make sure the PIE.htc is in the same directory of the webpage utilising it.

Simple. Easy. Quick.

Infoguides Limited