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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s