Use arrow keys to navigate

Although it’s not fully supported by all web browsers yet, CSS3 has already managed to help web designers save time. It has also taken some websites to a much more complex level with relative ease. One of the most popular new trends in website design is the box shadow. This might be down to the fact that CSS3 makes it so much easier to include it on a website.

A great showcase of what can be accomplished with this CSS3 property.

Shadows are excellent additions to a page if you want to make it look more engaging. Allowing boarders and navigational tools to appear three-dimensional, they are clearly a great step forward and make the way we display online information more visually pleasing. If your website is your business, it can also make it appear more up to date with the latest innovations thus increasing customer confidence in the brand.

CSS3 uses a comma with a separated list of shadows, each one having defined length values between 2 and 4. This makes it possible to apply multiple shadows to a page using a lot less code. Another excellent feature of CSS3, and one which might make your website more interesting, is the opacity setting. This controls how transparent a box is on a web site and can make the function of it clearer to users.

One example of this, and one we see regularly on pages, is the use of opacity in modal pop up boxes. If a box is less solid we can see that the information it is presenting is more of an annotation and not a part of the main focus of the page.  Allowing designers to choose how transparent a box is using a simple piece of code, this method is also a lot less time-consuming than traditional methods, making it ideal for those who want to know how to create a website that is likely to be successful.

Instead of the old RGB (red, green, blue) colours in code, CSS3 uses RGBA, adding ‘alpha’ or opacity. This allows designers to allocate how opaque something is simply by adding a number. Although this sounds quite simple, it is only now that it has been included in CSS. The additional functions allow website designers to manage huge amounts of information on a website quickly and easily by using only a few lines of code.

This is ideal for a designer wishing to present text in a newspaper-style format and means whether you want to make a website appear more high-tech or want to order your text more easily, CSS3 could be the perfect tool for you.

Some Handy CSS3 Resources:

  • CSS3.info – A massive collection of CSS3-related tutorials and information.
  • CSS3.com – A reference guide for CSS3 properties.
  • Quirksmode – See the latest browser support for CSS3 properties.
  • CSS3 Generator – Need to generate some CSS3 code and tired of writing out all the browser prefixes? Use this generator for almost every CSS3 property.
  • CSS3 W3C Working Group – See the official current snapshot of CSS3.
  • Ultimate CSS Gradient Generator – This is the best tool to create CSS3 gradients no matter if it’s simple or complex!
  • HEX to RGBA Converter – Let’s you convert color value in HEX to RGBA and RGB, prepared for inclusion in css styles.

Website Inspiration:

Here is a short but sweet collection of beautifully designed websites that take full advantages of HTML5 and CSS3.

Squarefactor

Squarefactor is an Orlando, FL based interactive studio, specializing in design and development for web, mobile and experiential.

Toyota.comcamryeffect

Camry Owners across the United States were asked to share their stories, their experiences, and their special moments which happened behind the wheel. These collective moments created a greater whole, the ‘Camry Effect’ which could be shared with others building advocacy, momentum, and community.

Psychnpsych

To make psychology digestible for the mass audience, we pop key symptoms of mental conditions that are normally confused with daily obstacles as question of interest. We then bundled the Q&A in lighthearted info graphics illustrated from long write-ups and local statistics.

Drumlet

The Drumlet is the latest experiment from Epic.net mixing Javascript, Canvas, Web Audio and Social sharing to bring you the very first Drum Machine using these technologies.

Create

The art & science of app creation.

Capitan Dash

Shake up the Marketing world. CaptainDash produces dashboards in real time for marketers. Smart Data, Beautiful Infographics and Cool Interface are part of the new business intelligence.

Scandalous Dirt

Scandalous Dirt is an interactive political aggregator designed for Starz new original series Boss starring Kelsey Grammer. The show investigates the inner workings of Chicago’s politics, centering on the Machiavellian machinations of Tom Kane, a fictional Chicago mayor (Grammer) with a dark secret. …

Green Campus Guide

Macquarie University strives to be ecologically sound, socially just, and economically viable in all its undertakings. Green Campus Guide is a site that guides you to explore what is being done on the campus, and discover ways that you can contribute to the sustainability of the community.

Blind Barber

The Blind Barber is a return to the “Roaring Twenties”. Defined by the explosion of culture and its break from tradition, the “Roaring Twenties” was a movement in creativity.

Art4web

We are creative digital agency based in Slovakia.

Vlog

An HTML5 video collections powered by SVG masks and animations.

Tommy

For the design & production of all manner of digital creative

Gallery of Mo

For every £1 you donate our Skilled team of Designers will spend 1 minute creating a portrait of you with one minor addition, a Mo of our choice.

Yoke

A small design studio doing great things for good people.

Vin and Societe

French wine think tank

We hope you will find this article useful, do let me know what you think about this by commenting below. Please don’t forget to subscribe to our RSS-feed or follow Inspirationfeed on TwitterGoogle+ and Facebook! If you enjoyed the following article we humbly ask you to comment, and help us spread the word!

Use arrow keys to navigate

Posted by Paul Simmons

Paul Simmons is a regular blogger with experience in web design. Paul regularly reviews new systems for web design to advise fellow designers looking to understand how to create a website . Once fully implemented, CSS3 promises to make life a lot easier for website designers such as Paul while also making websites look more attractive.

One Comment

  1. Hi Paul,
    Some fantastic sites in your selection of designs. The camry website was really engaging and nice to explore. Also really liked the yoke website and the concept for the vlog site. It is good to see the exploration of designers which is ever improving the quality of what can be found on the web. Reallygood blog. Look forward to more. Thanks

Leave a reply

Your email address will not be published. Required fields are marked *