CSS3 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.
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;
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.
border: 2px solid #434343;
With this, you can manage the settings quite conveniently without much hassle. Rounded corners make great components for design with their aesthetic value.
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.
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:
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:
This code will connect any paragraph that has an h2 as a sibling.
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:
Check it out in Safari and witness how dynamic CSS3 makes your design!
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:
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:
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.
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-rule: solid 1px black;
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.
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:
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.
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.
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.
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.