Getting Acquainted with HTML5 and CSS3

Brian Flores — Thu, 12 May 2011 07:24:32 +0000

CSS3 and HTML5 have been highly anticipated by web developers and designers for several years. Although both languages are currently considered “works in progress,” some of their key features have recently been made available for demonstrational use on the most popular browsers. For anybody familiar with traditional CSS and HTML, the new techniques should be fairly easy to implement.

CSS3 Improvements

CSS3 is simply an evolution of the well-known styles and cascade of traditional CSS. It introduces several new features, including new properties, selectors, and pseudo-classes. This facilitates setting up layouts quickly and efficiently. Most of the basic rules concern typography, background colors, etc.

The @font-face feature will let you easily add custom fonts. You can do this by uploading the font file to your server, linking to a CSS file, or creating a font family.
Use the Multiple Columns feature to divide your text into columns. You have the option to choose the number of columns, column width, column spacing, and column separators.
The Multiple Backgrounds feature allows you to place multiple backgrounds on any element.
With the Border Image feature, you can replace any element’s border with a specified image.
The Box-Shadow feature provides for easy creation of inner and outer drop shadows on any element. You can specify values for color, offset, and blur.

HTML5 Improvements

HTML5 is the next generation of HTML. It has been designed to facilitate the search engines’ navigation and categorization of a website. The main attraction of HTML5 is its simplified, built-in video element. It also introduces offline storage capability for offline use of web applications and new design tools that allow easier creation of websites. HTML5 generally looks like old-fashioned HTML. However, there are a few key changes to be aware of.

Including a doctype in HTML5 is not necessary, but some older browsers may need to have it included. Only one doctype is needed: . This simply notifies the browser of the existence of an HTML document.
The Canvas tag allows developers to create two-dimensional images and graphics directly within the element. This eliminates the need to use separate software for image creation.
The Content Editable tag is a new element that will let your users edit any text that you place within the tag. This tag can be written as (ul contenteditable=true).
The Application Cache element supports caching of web pages and apps for use offline.
HTML5, once it is fully supported, will allow you to embed and playback audio and video without the use of any plugin. This will be extremely useful in relation to mobile devices, which are currently unable to access Flash or similar media content.

HTML5 and CSS3 can be used in conjunction with technologies such as JavaScript to improve the speed, format, and style of any web page. Due to their advanced features and improved elements, these two languages are poised to transform the way we create and use the Internet.

1. Tattoos By Neal

2. Woody Wide Web

3. Delostrelecke Tvrze Adam

4. One-Nyne Design

5. Lab (1.0) – HTML5 Theme

6. CatCubed

jQuery Cycle Plugin

Richard Havelock — Thu, 15 Oct 2009 21:36:28 +0000

jQuery Cycle Plugin is a lightweight jQuery plugin which offers an easy way to create a slideshow of images for your website.

The plugin provides a bunch of different effects for cycling between each slide, from a simple fade to the more elaborate ‘shuffle effect’, you can choose to cycle through each slide on a time delay or for it to be initiated by the user through a click.

The jquery Cycle Plugin does not only cycle through images but it can also cycle through which can contain text and images, allowing for more freedom of what goes into each slide of the slideshow.

I prefer the fading option and use it for small advertisements on a number of domains or sometimes as the main focus of a website (such as small accommodation sites). The effect is not as clean or visually sharp as a flash movie but it takes a lot less time to implement and does not require flash, therefore it will display in android devices and on the iPhone with no problems.

Implementing the code is easy, list the images inside a

and then specify the plugin to cycle through that

by using the small piece of code provided on the jQuery Cycle Plugin website.

jQuery Cycle is easy to set up, run and configure, while the end result can help give a website that extra feel of professionalism. I am a big fan of the jQuery Cyle plugin and have used it in quite a few websites to great effect.

Download jQuery Cycle Plugin at:

jQueryCycle

Web Development Blog » Web Design

Getting Acquainted with HTML5 and CSS3

CSS3 Improvements

HTML5 Improvements

jQuery Cycle Plugin