HTML 5 and CSS 3 Elements: Visual Effects, Table Styles and Custom Fonts (Part 1)

This article compresses of a number of different articles revolving around HTML 5 & CSS 3. This is the second in the series. The previous piece of writing was the introduction and was titled: 'HTML 5 & CSS 3: Provide Great Benefits in Future Web Design. HTML 5 spells an Online Revolution 'If you are new to this topic or would like a brief overview of the subject it is advised to skim through the introduction that companies this collection.

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. 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. Programmers will tend to use the technique of using a wrapper that is slightly offset from the subject object. This requires excessive coding or design time. CSS 3 has built in shadow support which can be applied to any online element with a small and simple bit of coding.

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 specifically reducing in length to create the impression of a round corner. This requires lots of pointless code. CSS 3 will allow the feature of applying round corners to border any element with no extra code needed.

Table Format & Style

Tables with attributes such as an alternate shading effects or an additional appearance to the header and footer regions are made significantly easier with CSS 3. Currently to build a striped table each different color would have to have a different class code, these 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.

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. This technique is bad practice for SEO as the text will not get crawled by the search engines. 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.


Source by Robert Playford

Leave a Reply

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

Save & Share Cart
Your Shopping Cart will be saved and you'll be given a link. You, or anyone with the link, can use it to retrieve your Cart at any time.
Back Save & Share Cart
Your Shopping Cart will be saved with Product pictures and information, and Cart Totals. Then send it to yourself, or a friend, with a link to retrieve it at any time.
Your cart email sent successfully :)