How To Get The Most Out Of CSS3

March 2, 2011 · 7 comments

by brianf

imageCSS3 is a diverse language that unlocks many more possibilities in design, especially if you wish to obtain that sleek design component without the use of heavy graphics or even too much server-side coding. CSS3 is currently still in development, but you can still use it for your website provided that you know what browsers it functions in. Some browsers that allow CSS3 compatibility would be: Firefox 3.6 and up, Internet Explorer 8 and up, Opera, Google Chrome and Safari.

Now, here are some of the cool things that you can do to get the most out of CSS3.


ElegantThemes
ThemeForest

Advertisement

Drop Shadows
Drop shadows are great for emphasis of content and general aesthetic value. You would have probably used a graphics program in establishing the drop shadows, calling these images through the code to achieve that drop shadow effect. With CSS3, it becomes fairly easy to do without much image hassle. The following code does it all:

moz-box-shadow: #000 5px 5px 5px;
webkit-box-shadow: #000 5px 5px 5px;
box-shadow: #000 5px 5px 5px;

image

The screenshot shows the Drop Shadow in action. I have used Chrome Inspect Element to change the stylesheet on the fly to show you different settings.

Rounded Corners
For those who desire that sleek design of rounded corners, in which previous versions of CSS used separate images or even JavaScript to code the rounded corners in, with CSS3, you have the whole process narrowed down to the following pieces of code:

div {
border: 2px solid #434343;
padding: 12px;
background: #e3e3e3;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
width: 600px;
}

With this, you can manage the settings quite conveniently without much hassle. Rounded corners make great components for design with their aesthetic value.

madebyelephant

To illustrate different settings of the border radius I have used Chome Inspect Element to e.g. alter the “border-top-left-radius:” to 30px 30px making the corner much more rounded then the 10px 10px used on the site when you load it.

Multiple Backgrounds
With the complexity of CSS in applying multiple backgrounds, CSS3 allows you to insert two or more backgrounds in an element to create that overlay effect or whatever design creativity you desire. The syntax is fairly simple, within the element of your choosing; just insert multiple image syntax as follows:

body {
background:
url(/image1.jpg) top right fixed no-repeat,
url(/image2.jpg) top left fixed no-repeat;
url(/image3.jpg) bottom right no-repeat;
url(/image3.jpg) bottom right fixed no-repeat;
}

If you wish to have many backgrounds appear together without the hassle of complex coding, this innovation can save you a lot of time. It also helps you achieve the design you wish with simplicity.

General Sibling Selector
In design hierarchy, you may want to associate elements with levels that CSS has included. For instance:

h2~p {
font-weight: bold;
}

This code will connect any paragraph that has an h2 as a sibling.

Resizing Elements
With the convenience of CSS3 available, you can resize your elements through the browser itself by providing a tiny triangle found at the bottom right corner of your element in order to allow the user to resize it. The only problem is that it only works with Safari as of the moment. If you want to know how it works:

div {
resize: both;
}

Check it out in Safari and witness how dynamic CSS3 makes your design!

Opacity Levels
Opacity is a design technique that can allow emphasis of certain elements in your website. With older versions of CSS, you could only achieve this through PNG graphics or CSS filters for Internet Explorer. However, with CSS3, a simple command will do the job just well enough for you:
opacity: 0.34;
You can use this in many ways to highlight special portions of text or hide them away when not needed. With this design tip in command, there’s a lot of potential to be achieved by opacity modification.

Breaking the Font Barrier
Previously, you were only allowed to use fonts that are pre-installed in most computers, limiting you to: Arial, Helvetica, Georgia and Verdana. CSS3 breaks away this font barrier and allows you to use any font you want with the specialized code:

@font-face {
font-family: TrebuchetMS;
src: url(‘http://example.com/trebuchetms.ttf’)
}
body {
font-family: TrebuchetMS;
}

The previous example allows you to grab the font file from an online source, allowing you to use any font you desire for your website. Just make sure that the file stays online in order for this feature to work.

Multi-Column Layout
Ever wanted your website to have that organized look where you can have everything arranged in that newspaper layout? Fussing with tables in previous versions, CSS3 unlocks the potential by introducing multiple columns to your design. The code you can use would go like this:

-moz-column-count:5;
-moz-column-rule: solid 1px black;
-moz-column-gap: 15px;

The first line indicates how many columns you want, the second identifies the rule that separates the columns and the third line identifies the wideness of the gap you wish.

Text Shadow
In previous versions of CSS, to add to that little depth you want in your text, you could only do so with complicated CSS coding with z-index and dual element offsetting. With CSS3, the code is simplified to the following:

h1 {
text-shadow: 1px 1px 5px #000;
}

The parameters provide you the nature of the shadow you want and the color you wish. This can give your content some depth and design creativity.

Mothereffingtextshadow.com Screencap

Gradients
Professional designers look for gradient designs to get that corporate and sleek look. Traditionally, you would use graphics programs and whip up that gradient. The only issue here is that it may take a while for servers to load images at times, and this can delay loading time. CSS3 takes this into a whole new level and introduces gradients into the system, saving you the time from creating them in other programs:

background: -moz-linear-gradient(100% 100% 90deg, #FFFFFF, #000000)
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#000000));

This allows you to achieve that professional design you wish for your site.

Scale Transform
Have you ever wanted to emphasize a certain element when hovered? CSS3 introduces the transform style, which allows you to do just that. It makes a great navigation addition to help you grab your visitors’ attention. The following code does it conveniently:

-moz-transform: scale (2);
-webkit-transform: scale (2);

Once you hover of your desired element, it will appear twice the size as the original, providing you with the needed emphasis that will key in your design creativity.

playground css3 polaroids

These are just some of the many CSS3 design tips in order to enhance your website’s design. Explore into the world of CSS3 with its many innovations and design components for your website. With ease in achieving the look you wish, CSS3 makes your life easier by giving you the opportunity in simpler code. This also allows advanced coders to play around with this innovation and come up with some complex and beautiful designs.

With CSS3 slowly hitting mainstream, you should know how it works in order to benefit from its power and effectiveness as a browser language for your website’s design. With this in mind, you can surely obtain an effectively designed website.

Author : Brian Flores

Brian Flores is a SEO and copywriter for InMotion Hosting, one of the top dedicated server providers in the country. He works with a team of awesome writers to post useful tutorials on WebHostingHelpGuy. You can follow him on Twitter @WHHG_InMotion or @BrianAFlores.

{ 6 comments… read them below or add one }

scott June 16, 2011 at 5:55 am

Regarding the multi-column layout, I think it’s great and I’m using it to implement a magazine style layout. I’m trying to understand how I can style each column that is created… right now, you can only add a column-rule (a vertical line) and a column-gap that adds a spacer between columns. I really want to just style (like add a special background or border to each column or all columns).

Anyone have any idea how to do this? If each column had a consistent class or id, that would ideal. Any help would be awesome.

cavalleydude

Reply

Rachel March 20, 2011 at 10:20 pm

Really useful tips – I knew the majority of these anyway but it’s good to see lots of different “real” examples in practice :) I agree that the text shadow example was a tad scary though!

Reply

wendelle March 20, 2011 at 6:09 pm

thanks for sharing this brian, By the way, you don;t have to worry about the font you’ll use in your website, you can upload it within your domain so it will be available anytime just like “fonts/trebuchetms.ttf”

Reply

John March 14, 2011 at 11:36 am

Very great information about advanced css3 information. But fixing cross browser issues is really pain.

Reply

Filipe Valente March 2, 2011 at 3:16 pm

cool stuff the text shadow was kind of disturbing lol

Reply

Lars March 3, 2011 at 12:06 am

Yes I agree, really need to use it carefully ;)

Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 1 trackback }

Previous post:

Next post:


Web Analytics