HTML5 Example

Pure CSS3 Box shadow page curl effect This is sick check it out by Matt Hamm Update Great page curl effect http The Sexy Curls jQuery Plugin is an open-source jQuery plugin by Elliott Kember which lets you share in the beauty of the page fold You want a demo page You looking at it Go drag the fold → The source code

Buttons Redux 11 Super Awesome Buttons 12 Your own Google buttons using CSS3 13 CSS3 button generator 14 CSS3 Button Maker 15 CSS3 Menu and buttons 16 CSS3 Button Generator 17 Simple CSS3 Buttons with Icons 18 CSS3 Sandbox 19 CSS Corners 20 CSS3 Generate CSS3 Boxes 21 CSS3 Gradient

are currently supported in which browsers Rounded Corner Boxes the CSS3 Way A tutorial for creating rounded corners with a new CSS3 method CSS3 Selectors Explained An overview of some of CSS3 selectors including selector syntax CSS3 Borders Preview An article that covers some new border types including rounded corner borders and gradient borders Box Shadow Create a drop shadow

4px text-shadow 1px 1px white text-transform nav ul li a text-decoration background-color nav article nav ul li a / Applying CSS3 rounded corners -moz-border-radius -webkit-border-radius border-radius We basically need to set the display value of the new tags to block as you can see from the first couple of lines After this we can

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements without the need for corner images or the use of multiple div tags and is perhaps one of the most talked about aspects of CSS3 Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support with some discrepancies and with relative

Dropdown Menu see a Mac-like multi-level dropdown menu that I created using border-radius box-shadow and text-shadow It renders perfect on Firefox Safari and Chrome The dropdown also works on non-CSS3 compitable browsers such as IE7 but the rounded corners and shadow will not be rendered 7 Create a Stylish Contact Form with HTML5 CSS3 Follow this step by step process

http WebKit transformations Currently part of WebKit is this way of applying simple visual effects to HTML elements Theres an example here At the current time these effects are WebKit based and Safari and they appear to work best in Chrome CSS Box shadow CSS3 now sports the box-shadow property which makes adding drop shadows to your elements very easy

for Browser CSS Deficiencies Can wait for CSS3 support and want to add rounded corners gradients or opacity without creating lots of images Projects like jqcanvas add canvas tags behind standard HTML elements to add design to your web page Browser Support The latest versions of Firefox Safari Chrome and Opera all enjoy reasonable to good support for Canvas What about Internet Explorer