In CSS 3 and not in CSS2

Cascading Style Sheets, commonly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. Put simply, CSS handles the look and feel part of a web page or a whole website. With CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variery of other effects and styles explained here.

The term cascading in Cascading Style Sheets refers to a specific way in which browsers determine which styles to apply to a specific part of the page. This method is called “the cascade”, and it’s from the cascade that CSS takes its name.

CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification. The CSS Working Group intends that the new CSS modules will not contradict the CSS2.1 specification: only that they will add functionality and refine definitions. As each module is completed, it will be plugged in to the existing system of CSS2.1 plus previously-completed modules.

From this level on modules are levelled independently: for example Selectors Level 4 may well be defined before CSS Line

Module Level 3.

CSS 3 Example

div

{
transform:rotate(30deg);
}

CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added.

Some of the most important CSS3 modules are:

Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

CSS3 Borders

With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.

On border we will learn:

border-radius
box-shadow
border-image

Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.

In CSS3, creating rounded corners is easy.

In CSS3, the border-radius property is used to create rounded corners:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

Box Shadow

In CSS3, the box-shadow property is used to add shadow to boxes:

div
{
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
}

Border Image

With the CSS3 border-image property you can use an image to create a border:

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
}

**Where the border image is border.png

CSS3 Backgrounds

CSS3 contains several new background properties,
which allow greater control of the background element.

On background we will learn

background-size
background-origin

You will also learn how to use multiple background images.

Firefox 3.6 and earlier does not support the background-origin property, and requires the prefix -moz- to support the background-size property.

Safari 4 requires the prefix -webkit- to support the new background properties.

Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support the new background properties.

The background-size Property

The background-size property specifies the size of the background image.

Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts.

You can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element.

Resize a background image:

div
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}

Stretch the background image to completely fill the content area:

div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}

The background-origin Property

The background-origin property specifies the positioning area of the background images.

The background image can be placed within the content-box, padding-box, or border-box area.

Position the background image within the content-box:

div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

Multiple Background Images
CSS3 allows you to use several background images for an element.

Set two background images for the body element:

body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

** img_flwr.gif, img_tree.gif are the images you are using

CSS3 Text Effects

CSS3 contains several new text features.

On text we will learn

text-shadow
word-wrap

Internet Explorer does not yet support the text-shadow property.

Firefox, Chrome, Safari, and Opera support the text-shadow property.

All major browsers support the word-wrap property.

Text Shadow Effect

Add a shadow to a header:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Word Wrapping

If a word is too long to fit within an area, it expands outside:

In CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:

Allow long words to be able to brake and wrap onto the next line:

p {word-wrap:break-word;}

CSS3 2D Transforms

Transforms

With CSS3 transform, we can move, scale, turn, spin, and stretch elements.

A transform is an effect that lets an element change shape, size and position.

You can transform your elements using 2D or 3D transformation

Internet Explorer 9 requires the prefix -ms-.

Firefox requires the prefix -moz-.

Chrome and Safari requires the prefix -webkit-.

Opera requires the prefix -o-.

2D Transforms

2d transform methods:

translate()
rotate()
scale()
skew()
matrix()

· Example

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

The translate() Method

With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:

Example

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

The value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top.

The rotate() Method

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.

Example

The value rotate(30deg) rotates the element clockwise 30 degrees.

The scale() Method

With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):

Example

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

3D Transforms

CSS3 allows you to format your elements using 3D transforms.

3D transform methods:

rotateX()
rotateY()

Internet Explorer, Firefox, and Opera does not yet support the 3D transform methods.

Chrome and Safari requires the prefix -webkit-.

Click below to see the difference between 2d and 3d

http://www.w3schools.com/css3/css3_3dtransforms.asp

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

http://www.w3schools.com/css3/css3_transitions.asp

Internet Explorer does not yet support the transition property.

Firefox 4 requires the prefix -moz-.

Chrome and Safari requires the prefix -webkit-.

Opera requires the prefix -o-.

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

Specify the CSS property you want to add an effect to
Specify the duration of the effect.

· Transition effect on the width property, duration: 2 seconds:

div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

Note: If the duration is not specified, the transition will have no effect, because default value is 0.

The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

Specify :hover for <div> elements:

div:hover
{
width:300px;
}

To add a transitional effect for more than one style, add more properties, separated by commas:

Add effects on the width, height, and the transformation:

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Use all transition properties in one example:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

The same transition effects as above, using the shorthand transition property:

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition-transition:width 1s linear 2s;
}

CSS3 Animations

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.

@keyframes Rule

To create animations in CSS3, you will have to learn about the @keyframes rule.

The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

Internet Explorer and Opera do not yet support the @keyframes rule or the animation property.

Firefox requires the prefix -moz-, while Chrome and Safari require the prefix -webkit-.

Example

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

CSS3 animation

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

Specify the name of the animation
Specify the duration of the animation

· Binding the "myfirst" animation to a div element, duration: 5 seconds:

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

An animation is an effect that lets an element gradually change from one style to another.

You can change as many styles you want, as many times you want.

Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.

0% is the beginning of the animation, 100% is when the animation is complete.

For best browser support, you should always define both the 0% and the 100% selectors.

Example

Change the background color when the animation is 25%, 50%, and again when the animation is 100% complete:

@keyframes myfirst
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

Note: This example does not work in Internet Explorer and Opera.

Note: When an animation is finished, it changes back to its original style.

Example

Change the background color and position:

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Run an animation called myfirst, with all the animation properties set:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Note: This example does not work in Internet Explorer and Opera

Useful Links

http://css3generator.com/

http://www.1stwebdesigner.com/css/must-read-css3-tips-tricks-tutorial-sites/

http://www.webdesignish.com/css3-techniques-and-tutorials.html

Create An Apple Style Menu Purely In CSS3 – No Images Required

The advantage of doing all this is CSS3 is that it significantly reduces the load amount for the page, the lower the better. It not only helps the load time but reduces the cost of bandwidth used. And of course cause it’s really cool!

For Next Week tutorials

HTML 5

Tutorial

HTML 5 Document Structure

HTTP Headers for HTML

The HTTP headers which control how an HTML 5 document is displayed might look like this:

Content-Type: application/xhtml+xml; charset=UTF-8

Cache-Control: max-age=120

X-UA-Compatible: IE=8

It is highly recommended that the charset attribute specifying the character encoding of the HTML page be included

in the Content-Type header for non-XML user agents in addition to the xml declaration.

How to set the Content-Type for the HTML 5 MIME Type

If the web documents are being created by a program, the programming language probably has an API to send the

proper HTTP headers.

For static web pages, it may be necessary to add the MIME Type for HTML 5 Polyglot Documents to the HTTP web

server configuration to send the appropriate Content-Type header. With the Apache HTTP Server, for example, the

HTML 5 MIME Type can be added to the .htaccess file(s):

DirectoryIndex index.html

ErrorDocument 404 /error.html

AddType application/xhtml+xml;charset=UTF-8 html

The typical code for a simple HTML version 5 page would look something like the following (this is the HTML

equivalent of a "Hello World" program):

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>

<head>

<title>Example Only</title>

</head>

<body>

<p>This is only an example. For more information, see

</p>

</body>

</html>

HTML 5 Style Sheets

Style sheets can make HTML coding simpler and improve the performance of a web site. A style sheet can be

applied to a web page by including a link tag with rel="stylesheet".

Various types of style sheets that can be used in HTML 5 documents. Two common ones are:

XSLT Style Sheets

XSLT style sheets can be used as a template for the "look and feel" of a web site. This provides a consistent

look to all of the pages using the same template and makes it easy to change the way a site looks by simply

changing the style sheet.

CSS Style Sheets

CSS style sheets can be used to separate the styles applied to various elements of web pages or templates

from the layout of those elements or the content in general.

Different style sheets can applied to web pages based on the type of device, such as a monitor, cell phone or printer,

that is being used to display the documents. They can be used regardless of whether the web pages are static or

generated dynamically.

XSLT Style Sheets (AKA Templates) in HTML

An XSLT style sheet provides a template that can be reused for multiple pages of a site. Using XSLT style sheets for

the common elements (the "look and feel") of a web site can improve web page load times, since the templates can

be cached by most browsers.

An XSLT style sheet can be applied to a web page by including a link tag with a MIME type specification of

"application/xslt+xml". For backward compatibility with older browsers, it's probably a good idea to include a

reference to the primary style sheet in a stylesheet processing instruction with the MIME type text/xsl.

Here is an example of an HTML page using both an XSLT style sheet and CSS:

<?xml version="1.0" encoding="UTF-8"?>

HTML 5 Tutorial

Page 1 of 6 1

<?xml-stylesheet type="text/xsl" href="/site-template.xsl"?>

<!DOCTYPE html>

<head>

<title>Example Only</title>

</head>

<body>

<h1>Sample HTML 5 Web Page with Style Sheets</h1>

<p>This is the content of the page. The appropriate CSS styles will be applied</p>

The styles from the appropriate .css file will be applied to various elements on the page and

the "look and feel" in the templates in the appropriate .xsl file will be wrapped around it.

</p>

</body>

</html>

The style sheets are ordered from lowest priority to highest (print, handheld, screen) just in case the browser ignores

the media attribute of the link tag.

Cascading Style Sheets

In addition to providing different styles based on the type of device being used to display a web page, CSS style

sheets can provide alternate user-selectable views of the page. For example, an alternative style sheet could be used

to show the user what the web page would look like if it was to be printed:

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/xsl" href="/site-template.xsl"?>

<!DOCTYPE html>

<head>

<title>Example Only</title>

</head>

<body>

<h1>Sample HTML 5 Web Page with Style Sheets</h1>

<p>This is the content of the page. The appropriate CSS styles will be applied</p>

The styles from the appropriate .css file will be applied to various elements on the page and

the "look and feel" in the templates in the appropriate .xsl file will be wrapped around it.

</p>

</body>

</html>

The user can select one the alternate style sheets from the menu bar of their browser, for example, with the options

View, then Page Style and, in this case, Printer-Friendly in Firefox.

HTML 5 Namespaces

Namespaces that are commonly used for HTML include:

http://www.w3.org/XML/1998/namespace

the XML namespace; implicitly declared

http://www.w3.org/2000/xmlns/

the namespace for XML namespaces; also implicitly declared

http://www.w3.org/1999/xhtml

the HTML namespace, the same one already being used for XHTML

http://www.w3.org/1998/Math/MathML

the MathML namespace

HTML 5 Tutorial

2 Page 2 of 6

http://www.w3.org/2000/svg

the SVG namespace

http://www.w3.org/1999/xlink

the XLink namespace

http://www.w3.org/2001/XMLSchema-instance

the namespace for XML Schema instance documents, which can be used to specify whether the data for a

field is binary (possibly encrypted) or plain text:

<span id="encrypted-credit-card-number"

xsi:type="xsd:base64Binary">BAM0NComFzC2TOsmRzW0NTueQU==</span>

Namespace Declarations in <html> Tag

The easiest way to declare namespaces is by putting the xmlns attributes in the top element of the XML document,

which in this case is the <html> tag:

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:mathml="http://www.w3.org/1998/Math/MathML"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

In HTML 5, all elements (tags) are automatically considered to be qualified with the HTML 5 namespace, which

makes the declaration of the HTML namespace optional, but this only works when the HTML parser supports HTML

5 and is actually looking at the page as an HTML version 5 document. It's best to continue coding the

xmlns="http://www.w3.org/1999/xhtml" explicitly to provide backward compatibility with non-HTML5-aware browsers

and other types of programs that may be parsing the HTML, such as RSS feed readers - otherwise all of the HTML

tags will appear to be in the unnamespaced partition.

Sections in an HTML Document

For an HTML 5 processor to tell the difference between site-wide headings and page headings, the child elements of

the body tag may include only a specific subset of the valid tags that a >body< can contain:

1optional <hn > heading tags

2an optional <nav> tag

3a single <article> tag

4an optional <aisde> tag

This is an example of the structure of a page with a site-wide heading:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My Example Site</h1>

<nav>

...

</nav>

<h2>Page Heading</h2>

<nav>

...

</nav>

</header>

<p>This is the introduction to the article.

</p>

<h3>Section Heading</h3>

<h4>Subheading for this section</h4>

</hgroup>

<p>This is the content of the section.

</p>

Pages

Thursday, June 30, 2011

NEW in CSS3

Rounded Corners

Box Shadow

Border Image

The background-size Property

The background-origin Property

Word Wrapping

CSS3 2D Transforms

Transforms

The translate() Method

The rotate() Method

The scale() Method

CSS3 Transitions

CSS3 Animations

@keyframes Rule

Create An Apple Style Menu Purely In CSS3 – No Images Required