HTML CSS Tutorials

Best Web Templates

Preview

Download

Download

CSS Tutorial pdfs

Click on below links to download free css tutorial pdfs

CSS Pdf download

CSS Tutorial pdf book

HTML Tutorials pdfs

Click on below links to download html tutorial pdfs

Download HTML Tutorial

Download XHTML Tutorial

Another HTML Tutorial Pdf

CSS3 allows for multiple column without explicitly having to code for it.Just by using the tags directly the multiple column division could be formed easily.

CSS3 provides 3 attributes for multiple column property as
column-count,column-gap and column-rule.

column-count
Specifies the number of columns an element should be divided into

column-fill
Specifies how to fill columns

column-gap
Specifies the gap between the columns

column-rule
A shorthand property for setting all the column-rule-* properties

column-rule-color
Specifies the color of the rule between columns

column-rule-style
Specifies the style of the rule between columns

column-rule-width
Specifies the width of the rule between columns

column-span
Specifies how many columns an element should span across

column-width
Specifies the width of the columns

columns
A shorthand property for setting column-width and column-count

Example

<div style="-moz-column-count:3;-webkit-column-count:3; column-count:3;<br />-moz-column-gap:60px; -webkit-column-gap:60px; column-gap:60px;-moz-column-rule:4px outset yellow;-webkit-column-rule:4px outset yellow;column-rule:4px outset yellow;"><br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.<br /></div>

Which will result as follows

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

CSS3 Transitions

CSS3 Transition is a fantastic feature of CSS3 which allows a animated effect to a division.This is achieved using the transition tag.

Copy and paste the below piece of code to know the effect

<head>
<br /><style type="text/css"> div{width:100px;
<br />height:100px;
<br />background:yellow;
<br />transition:width 2s, height 2s;
<br />-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
<br />-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
<br />-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
<br />}
<br />div:hover
<br />{
<br />width:200px;
<br />height:200px;
<br />transform:rotate(180deg);
<br />-moz-transform:rotate(180deg); /* Firefox 4 */
<br />-webkit-transform:rotate(180deg); /* Safari and Chrome */
<br />-o-transform:rotate(180deg); /* Opera */
<br />}</style></head><p><b>Note:</b> This example does not work in Internet Explorer.</p>
<br />
<br /><div>Hover over this to see the transition effect</div>

transition-property
Specifies the name of the CSS property to which the transition is applied

transition-duration
Defines the length of time that a transition takes. Default 0

transition-timing-function
Describes how the speed during a transition will be calculated. Default "ease"

transition-delay
Defines when the transition will start. Default 0

CSS3 2D/3D Transforms

CSS3 allows for 2d/3d Transforms which helps in giving the best look to any document.
This is performed using the transform tag.

CSS3 Transform Rotate
Example

<div style="background:yellow;height:100px;width:100px;-moz-transform:rotate(45deg);color:red;">hello from rotated div</div>

hello from rotated div

CSS3 Transform Translate

<div style="background:yellow;height:100px;width:100px;-moz-transform:translate(20px,70px);color:red;">hello from rotated div</div>

Which results as follows

hello from rotated div

CSS3 Transform Scale

<div style="background:yellow;height:100px;width:100px;-moz-transform:scale(1,1);color:red;">hello from scaled div</div>

hello from scaled div

CSS3 Transform Skew

<div style="background:yellow;height:100px;width:100px;-moz-transform:skew(30deg,20deg);color:red;">hello from skewed div</div>

Which results as follows

hello from skewed div

CSS3 Shadow Effects

CSS3 allows for shadow effect on text as well as on division.
Text effect is formed by using text-shadow.Word-wrap is used to fit the content in defined division.

Example

<div style="text-shadow:5px 5px 5px yellow;">CSS3 Text Shadow Effects</div>

which results as folows,

CSS3 Text Shadow Effects

CSS3 Border Shadow
Border Shadow can be implemented to any border using -moz-box-shadow

<div style="border:5px solid blue;-moz-border-radius:5px;height:100px;width:200px;background:yellow;color:red;-moz-box-shadow:10px 15px 20px #ccc;">hello from shadow division</div>

Which results as follows

hello from shadow division

HTML CSS Tutorials

Pages

Wednesday, August 3, 2011

Best Web Templates

CSS Tutorial pdfs

HTML Tutorials pdfs

CSS3 Multicolumns

CSS3 Transitions

CSS3 2D/3D Transforms

CSS3 Shadow Effects

Followers

About Me