CSS Resource – CSS3 Goodies that all web designers need to know

25 Jan

This article consists of a number of different articles revolving around HTML 5 & CSS 3 rules, learn css, w3c css code, css font-family.  Provide Great Benefits in Future Web Design. If you are new to this topic or would like a brief intro of the subject it is advised to go through the introduction that accompanies this collection of items.
HTML 5 and CSS 3 have introduced many new features that will enhance our online experience; they will also improve the productivity and efficiency of web developers and designers.This piece will first focus on some Visual Effects, new table styles and the introduction of custom fonts.

  • Drop Shadows

This design style is very common within 21st Century web design. But they can be accomplish with simple image putting around the main center image. The general method designers will acquire this effect is either by using a predefined image with the shadow effect added in a program such as Photoshop. So, they were never be dynamic like the css3 is having the possibility. Programmers will tend to use the technique of using a wrapper that is slightly offset from the subject object. This requires massive coding and design time. But now a days with present CSS 3 has built in shadow support which can be applied to any online element with a small and simple bit of coding.

Let’s see some of the Drop shadow examples

 

  • Rounded Corners

Another common design style; the rounded corner effect can often be a source of hassle for programmers trying to achieve the effect. As it stands it can only be achieved by placing 1px lines on top of each other gradually reducing in length to create the impression of a round corner. This requires lots of pointless code. CSS 3 designs css3 styles will allow the feature of applying round corners to border any element with no extra code needed.

Let’s see some of the Rounded Corners examples

 

  • Table Format & Style


Tables with attributes/titles such as an alternate shading effects or an additional appearance to the header and footer regions are made significantly simpler with CSS 3. Currently to build a striped table each different colour or zibra color would have to have a different class code, this results in a complicated build.

An ‘nth child’ selector (CSS 3) allows you to specify a role to effect odd or even table rows or even every 3rd, 4th row etc. Even if a row is removed the browser will automatically update without anymore code input. A similar feature will also give the programmer much more options when applying certain rules to say the header and footer. Elements can easily be added and removed without any worry over the overall style changing.

Let’s see some of the Table Format & styles examples

 

  • Custom Fonts


The web of old has always been restricted by a limited set of fonts. This fact is slowly changing with the introduction of tools such as Google Fonts. In the past if a designer wanted a specific font he would have to create it as an image they can not use them directly as a native font rendering on webpage. This technique is bad practice for SEO as the text will not get crawled by the search engines and can not be utilized for getting higher rank for the website. HTML 5 sees the introduction of a much wider selection of fonts available and importantly, all these fonts will be able to be crawled by search engines.

But now the time has changed for embeding the fonts. We can use @font-face css3 Technique/Rule to embed fonts into the webpage that can be natively rendered by web browsers itself. With this rule browsers get the fonts available from the web server directory.  They are not rely on client browsers font installed on the computer.

 

My Tutorial about @font-face Custom Fonts

I have written a simple practical steps tutorial for embeding @font-face with css3 styles.  You can have a closer look at this.  Hope this would help to all website designers/developers.

 

Any Quesitons?

Let me ping on comments section if you have any queries related to above  article.

 

 

About these ads

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: