Exploring HTML5 & CSS3

CSS3 Opacity

Syntax :

E { opacity:number;}

Number : Is in decimal fraction. That is a number between 0.0 and 1.0.

0.0 0.0 is fully transparent and 1.0 is fully opaque.

Example:

CSS :

#opacity {

background-color:black;

height:100px;

width:100px;

opacity:.5;

}

HTML

<div id="opacity"></div>

Output:

Before Opacity :

After Opacity :

How To Create a Circles With CSS3

Thanks to CSS3. You can use a circle using CSS3 with out using any images.

The code goes here...

CSS :

<style>
div {
background-color:rgb(120,250,20);
border:3px solid #333;
height:150px;
width:150px; Out Put

Circle using CSS3

-webkit-border-radius:75px;
-moz-border-radius:75px;
border-radius:75px;
box-shadow:inset 0 25px 35px #535353;
}
</style>

HTML :
<div></div>

NOte :
I used the box-shadow property just to look attractive.

Simple Horizontal Nav Bar - CSS3

This makes semantic sense, a navigation bar is really nothing but a list of links leading into your site.
Here is the HTML code :

<nav>
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Connect with US</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Download</a></li>
</ul>
</nav>

And The CSS Code Goes here...

@font-face Browser support

	IE	Opera	Opera Mobile	Firefox	Chrome	Safari	Safari on IOS
EOT	4 and above	Not supported	Not Supported	Not supported	Not supported	Not supported	Not supported
SVG	Not supported	10 and above	10 and above	9.7 and above	0.3 and above	3.1 and above	3.1 and above
TTF	9 and above	10 and above	10 and above	9.7 and above	4 and above	3.1 and above	Not supported
OTF	Not supported	10 and above	10 and above	9.7 and above	4 and above	3.1 and above	Not supported
WOFF	9 and above	Not supported	Not supported	Not supported	6 and above	Not supported	Not supported

EOT =	Embedded Open Type.
SVG =	Scalable Vector Graphics
TTF =	True Type Font
OTF =	Open Type Font
WOFF =	Web Open Font Format

Fore more info about @font-face Click here
http://www.w3.org/TR/css3-fonts/

CSS3 Multiple Backgrounds

Another useful feature in CSS3 is the ability to creat multiple backgrounds on a single box element.

In CSS2, you could only create one background image per element. So having multiple backgrounds required you to create many elements and apply an extra <div> for each extra image. This resulted
in heavy markup text and increased the page file size. If you wanted to add more images later, you would need to change both the HTML and the CSS structure.

There are many situations where you can use multiple background images:
Using several images to cover the full width or height of a box element.
creating a jigsaw image that is made up of multiple images.
Creating a parallax effect that lets the images shift disproportionately when the web page is resize or a mouse is rolled over an object.
Creating irregular or rough-edged box effects that need images on both sides.
Using a combination of background images, textures, and solid colors.

Browser support of multiple background

	Browser	Versions	Supported or Not
	IE	9	Yes
	Firefox	3.6	Yes
	Chrome	7	Yes
	Opera	10.5	Yes
	Safari	3	Yes


Example:


/* support for multiple backgrounds */

div#container {
	background:url(images/lily.jpg) no-repeat top left,
	url(images/sunflower.jpg) no-repeat top right;
	}

In the above example,
	You can apply multiple background images by adding a new background declaration. Then you specify a comma-separated list of values in the background or background-image property,
	The first value in the list represents the top layered image, with subsequent image rendered behind successively. You can resize, repeat or reposition independent images using properties like background-repeat:no-repeat, repeat-x, repeat-y etc…

New Tags in HTML5

<!DOCTYPE> = Defines the document type.
<article> = Defines and article.
<aside> = Defines content aside from the page content.
<header> = Defines a header for a document or section.
<hgroup> = Groups heading( <h1> to <h6> ) elements.
<section> = Defines a section in a document.
<nav>= Defines navigation links.
<footer> = Defines a footer for a document or section.
<audio> = Defines sound content.
<video> = Defines a video or movie.
<bdi> = Isolates a part of text that might be formatted in a different direction from other text outside.

<canvas> = Used to draw graphics, on the fly via scripting (usually

Javascript).

<command> = Defines a command button that a user can invoke.
<details> = Defines additional details that the user can view or hide.
<summary> = Defines a visible heading for a <details> element.
<embed> = Defines a container for an external (non-HTML) application.
<figure> = Specifies self-contained content.
<figcaption> = Defines a caption for a <figure> element.
<keygen> = Defines a key-pair generator field (for forms).
<mark> = Defines marked/highlighted text.
<meter> = Defines a scalar measurement within a known range (a gauge).
<output> = Defines the result of calculation.
<progress> = Represents the progress of a tast.
<rp> = Defines what to show in browsers that do not support ruby annotations.
<rt> = Defines an explanation/pronunciation of characters ( for East Asian typography).
<ruby> = Defines a ruby annotation (for East Asian typography).
<source> = Defines multiple media resources for media elements (<video> and <audio> ).
<time> = Defines a date/time.
<track> =Defines text tracks for media elements ( <video> & <audio> ).

Style Sheet Types in CSS

A CSS style sheet can be linked to an HTML document in 3 ways.

1) Internal Style Sheet

2) External Style Sheet

3) In-line style

1) Internal Style Sheet :-

The Internal style sheet is written within the HEAD element of the HTML document. This style applied only to the documents in which it is defined and not referenced by any other web document.

Syntax :- <style type="text/css">

selector { property: value;}

</style>

The above syntax contains : -

Starting and ending tags of the Style element.

The style element contains a type attribute with value text/css.

The declaration consists of a selector followed by curly braces.

The curly braces hold a property followed by a colon, which is further followed by a value and followed by a semicolon.

Example :

<head>

p {

font-family:candara;

color:cyan;

}

</style>

</head>

Advantages of using Internal style sheets :

· Affects only the page in which they are placed. If you are working on a large site and need to test styles before loading them on the site as a whole, then internal style sheets can be great tool as they allow you to test the styles on a single page.
· Allows you to test the styles on a single page.

Disadvantages of using Internal style sheets :-

· Affects only the page to which they applied. If you want to use same styles in several documents, you need to repeat them for every page.
· Increases the page load time because the entire CSS file needs to be implemented first to apply CSS.

2) External Style Sheet

Here CSS file is written outside the HTML document and the reference of the CSS file is placed in the HTML document. In external style sheet, the style sheet rules are saved into a text file with the .css extension. Once you have a style sheet document, you can link it with your web pages in the following two ways

i) Linking : Refers to the HTML link element, which is used to link a style sheet.

Here…

rel attribute specifies what you are linking.

type attribute specifies the MIME type for the browser

href attribute specifies the path of the .css file.

In the above code, the value of the rel attribute is set to style sheet, value of the type attribute is set to text/css and that of the href attribute is set to test.css.

ii) Importing : Here the @import keyword is used followed by the Uniform Resource Identifier(URI) of the style sheet to which you want to import the style rules.

@import url(‘demostyle.css”)

H1 {color:blue;}

</style>

In the above code @import keyword followed by the URI of the style sheet named demostyle.css is used.

Advantages of External Style Sheets :-

Allows you to control the look and feel of several documents in one go and do not need to define a specific style for every element.

Allows you to easily group your styles in a more efficient way.

Disadvantages of External Style Sheets :-

Increases the download time as the entire CSS file has to be downloaded to apply the style to the HTML document.

Displays the web page only after the entire style sheet is loaded.

3) Inline style:-

These styles are written in a single line separated by semicolons. These properties are placed inside the style attribute of the HTML element, on which you want to apply the style.

In the above code the <p> is styled.

Advantages of inline style :-

Provides highest precedence over internal and external style sheets.

Provides and easy and quick approach to add a style sheet in a web page. You don’t need to create a whole new document or edit a new element in the head of your document to add an inline style.

Disadvantages of inline style :-

Makes a document difficult to maintain and increases the download time. Inline style must be applied to every element on which you want to apply a style.

Doesn’t allow to style pseudo-elements, which are used to add special effects to the selectors.

Pages

CSS3 Opacity

How To Create a Circles With CSS3

Simple Horizontal Nav Bar - CSS3

<nav>
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Connect with US</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Download</a></li>
</ul>
</nav>

@font-face Browser support

CSS3 Multiple Backgrounds

New Tags in HTML5

Style Sheet Types in CSS

Total Pageviews

Pages

CSS3 Opacity

How To Create a Circles With CSS3

Simple Horizontal Nav Bar - CSS3

<nav><ul > <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Connect with US</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Download</a></li></ul></nav>

@font-face Browser support

CSS3 Multiple Backgrounds

New Tags in HTML5

Style Sheet Types in CSS

Total Pageviews

<nav>
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Connect with US</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Download</a></li>
</ul>
</nav>