This article comprises 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 entitled: ‘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 accompanies 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 gradually 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 colour 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.
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 which is good news for all your SEO Services.
