User interfaces and interactive elements with only CSS3

Web sites have generally been designed with three separate elements – HTML for content, CSS for design, and javaScript for user interfaces and interactive elements. However, with CSS3 becoming much more widely supported lately, there has been a preference in some areas to lean towards pure HTML and CSS for website designs, including interactive elements, and only using javaScript for essential parts of the site such as validating forms or performing search filters that require communication with the servers. Some reports claim that there are still users that do not enable javaScript and/or browsers without javaScript support, and because mobile browsing is becoming so widespread, it saves the data required to send javaScript code and the processing required to run them. I’ve been experimenting with this method of site design for my website, and I’d like to share some tutorials I found that show what CSS3 is capable of doing.

http://dsigninspire.com/2011/04/14-3d-effects-using-css3-transformation-webkit-animation-and-javascript/

3D effects does require some understanding to how 3D graphics are put together and how they are manipulated, but otherwise it is possible to put together most user interface elements with nice animations and transitions that may be key to attracting and maintaining the interest of visitors to your site. In the set of tutorials in the link above, there are excellent examples of Flash-like interactive applications. Depending on the site you are designing, not everything may come in useful and CSS3 performance still varies greatly between browsers, but otherwise it is something fun to experiment with.

 

Advertisements

Lots of Meat on These Bones

For my website design analysis I’ll be taking a look at a site I just discovered recently. It’s a one-off product promo page at http://themble.com/bones/ for a bare bones HTML5 WordPress theme called “Bones”. The promo site was created by¬†Eddie Machado and features illustrations by Melanie Matthews. It’s a great showcase for HTML5 and CSS3.

Read the rest of this entry »