What is CSS3?

0 comments

CSS3
Cascading style sheet 3 the latest standard for CSS.

The development of the Cascading style sheet was to make the markup language impressive. It was discovered in 1980s in the beginning of the SGML.

The first draft of Cascading style sheet 3 (CSS3) came in 19-01-2001. And From now the first introduction still it is under construction.

It is a cascading piece of paper that specifies concerning the data with a joined HTML document display.

It is basically backwards-compatible with the earlier versions of Cascading style sheet(CSS). so you don’t have to change the existing design. Browsers will always support the Cascading style sheet 2 . Cascading style sheet 3(CSS3) is split up into new “modules”. The old specification has been split into the smaller pieces, and the new ones also have been added.

Animation in CSS3
Animation is one of the property of CSS3 which is basically used to animate the object, without using any flash or any of the other animation application. With this new animation feature of CSS3 ,You can change the object into one style to another style in a animated way.

Basically all the major browsers support Animation feature only Internet Explorer is one of them which doesn’t support this feature .

It changes the object style to another style,all the complete Animation basically depends upon the declaring the Keyframes with the css3.

<!DOCTYPE html> <html> <head> <title>Title Name will go here</title> </head> <style> #animated_div { text-align:center; width:60px; height:40px; background:#6699FF; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s infinite; -moz-animation:animated_div 5s infinite; -webkit-animation:animated_div 5s infinite; border-radius:5px; -webkit-border-radius:5px; } @keyframes animated_div { 0%{left:0px;} 20%{left:50px; background-color: green;} 40%{left:140px; background-color: red;} 60%{left:280px; background-color: yellow;} 80%{left:425px; background-color: blue;} 100%{left:0px; background-color: pink;} } @-webkit-keyframes animated_div { 0%{left:0px;} 20%{left:50px; background-color: green; margin-top: 50px;} 40%{left:140px; background-color: red;margin-top: 0px;} 60%{left:280px; background-color: yellow;margin-top: 50px;} 80%{left:425px; background-color: blue;margin-top: 0px;} 100%{left:0px; background-color: pink;} } @-moz-keyframes animated_div { 0%{left:0px;} 20%{left:50px; background-color: green;} 40%{left:140px; background-color: red;} 60%{left:280px; background-color: yellow;} 80%{left:425px; background-color: blue;} 100%{left:0px; background-color: pink;} } </style> <body> <div id="animated_div"> CSS3 <span style="font-size:10px;">Tutorial</span> </div> </body> </html>

Download Demo
Borders in CSS3
Borders property in CSS3 is such an affords of the style sheet which reduces the efforts of Photoshop and the other graphical applications. In Css3 an individual create the rounded borders, imaged based border and border shadow etc. with the help of CSS3 Border.
We use basically three main features to create the border:

✔ border-radius
✔ box-shadow
✔ border-image

Border-radius Property Border-radius is a property which is basically used to create rounded borders.

Box-shadow Property Box-shadow is a property which is basically used to create shadow of the borders.

Border-image Property
Border-image is a property which is basically used to create customized border we can put our own image as a border..


<!DOCTYPE html>

<html>

<head>
<title>Title Name will go here</title>
</head>

<style>
#border_radius
{
border:2px solid;
font-size: 14px;
color: #ffffff;
font-weight: bold;
padding: 10px;
background: #6AAFCF;
border-radius:25px;
-moz-border-radius:25px; /* For Firefox Browser */
-webkit-border-radius: 25px; /* For Safari and Google Chrome Browser */
-o-border-radius: 25px /* For Opera Browser */
}

#box_shadow
{
font-size: 14px;
color: #ffffff;
font-weight: bold;
padding: 10px;
background: #6AAFCF;
-moz-box-shadow: 15px 15px 5px #888245; /* For Firefox/Mozilla */
-webkit-box-shadow: 15px 15px 5px #888245; /* For Google Chrome and Safari */
-o-box-shadow: 15px 15px 5px #888245; /* For Opera */
box-shadow: 15px 15px 5px #888245;
}

#border_image
{
border-width: 15px;
-moz-border-image:url(media/border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(media/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(media/border.png) 30 30 round; /* Opera */
border-image:url(media/border.png) 30 30 round;
}

</style>

<body>

<div id="border_radius">
With the help of border-radius properties, we can make the rounded corners border.
</div>

<div id="box_shadow">
With the help of box-shadow properties, we can create the shadow for a box.
</div>

<div id="border_image">
You can see the customized border. This could be either *.png or *.jpg format.
</div>

</body>

</html>


Download Demo

Backgrounds in CSS3
A CSS3 backgrounds property is basically used to resizing the background properties . This property is also used fro multiple background implementation .before CSS3 it was unable to resize the background but now with the help of CSS3 we can implements these affords.

Basically there are two main properties of background, which is used for background fixing, multiple background,background size,image and etc.

The two properties which are used for background properties:

✔ background-size
✔ background-origin
✔ background-origin:border-box
✔ background-origin:content-box

background-size property is a property which is used to fix the size of a background.

<!DOCTYPE html>

<html>

<head>
<title>Title Name will go here</title>
</head>

<style>

#background_size
{
background:url(media/flower.png);
background-size:100px 40px;
-moz-background-size:100px 40px; /* Firefox 3.6 */
-webkit-background-size:100px 40px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>

<body>

<div id="background_size"> </div>

<div>
Here is the original image
<img src="media/flower.png" alt="image" title="original image"/>
</div>

</body>

</html>


Download Demo
background-origin property is a property which is used to define the position of the background. this property is used to specify the area of the background

<!DOCTYPE html> <html> <head> <title>Title Name will go here</title> </head> <style> #backgroundorigin { border:1px dotted green; padding:25px; background-image:url('media/cborder.png'); background-repeat:no-repeat; background-position:left; background-origin:border-box; } #backgroundorigin1 { border:1px dotted green; padding:25px; background-image:url('media/cborder.png'); background-repeat:no-repeat; background-position:left; background-origin:content-box; } </style> <body> <div id="backgroundorigin"> This div containing the image with border-box property. This div containing the image with border-box property. This div containing the image with border-box property. This div containing the image with border-box property. </div> <div id="backgroundorigin1"> This div containing the image with content box property. This div containing the image with content box property. This div containing the image with content box property. This div containing the image with content box property. </div> </body> </html>

Download Demo

Fonts In CSS3

Fonts in CSS3 is one of the advance feature,to improve the web page designing,with the help of CSS3 Fonts you can create different types of font style

 
<!DOCTYPE html> <html> <head> <title>Title Name will go here</title> <link href='http://fonts.googleapis.com/css?family=Cherry+Cream+Soda|Ropa+Sans|Butcherman|Rochester|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/> <style> .font1 { font-family: 'Cherry Cream Soda', cursive; font-size: 14px; color: yellow; line-height: 1.3em; } .font2 { font-family: 'Ropa Sans', sans-serif; font-size: 14px; color: green; line-height: 1.3em; } .font3 { font-family: 'Butcherman', cursive; font-size: 14px; color: red; line-height: 1.3em; } .font4 { font-family: 'Rochester', cursive; font-size: 14px; color: blue; line-height: 1.3em; } .font5 { font-family: 'Open Sans Condensed', sans-serif; font-size: 14px; color: pink; line-height: 1.3em; } </style> </head> <body> <p class="font1">THIS LINE IS CONTAINING THE DIFFERENT FONT</p> <p class="font2">THIS LINE IS CONTAINING THE DIFFERENT FONT</p> <p class="font3">THIS LINE IS CONTAINING THE DIFFERENT FONT</p> <p class="font4">THIS LINE IS CONTAINING THE DIFFERENT FONT</p> <p class="font5">THIS LINE IS CONTAINING THE DIFFERENT FONT</p> </body> </html>

Download Demo

Multiple Columns In CSS3

The most advance feature of CSS3 is Multiple Columns which is mainy used for creating layout,we can create articles to multiple columns ,if it is in 1 paragraph

The three main properties of CSS3 Multiple Columns as follows:

✔ column-count
✔ column-rule
✔ column-gap

<!DOCTYPE html> <html> <head> <title>Title Name will go here</title> <style> #multiple_columns { text-align:justify; column-count:3; -webkit-column-count: 3; -moz-column-count: 3; column-rule: 2px solid #6AAFCF; -webkit-column-rule: 2px solid #6AAFCF; -moz-column-rule: 2px solid #6AAFCF; column-gap: 40px; -webkit-column-gap: 40px; -moz-column-gap: 40px; } </style> </head> <body> <div id="multiple_columns"> The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. The quick brown fox jumps over a right lazy dog. </div> </body> </html>

Download Demo

Text Effects In CSS3
CSS3 text effect is used to add some extra features on normal text. CSS3 text effects is used to extend text features for viewing purpose and layout purpose.

The two main properties are as follows:

✔ text-shadow: Text-shadow is used for the shadow around the text.
✔ word-wrap: Word-wrap is used to break the continued text in a another line.


<!DOCTYPE html> <html> <head> <title>Title Name will go here</title> <style> #text_shadow { text-shadow: 20px 20px 10px #6AAFCF; } #word_wrap { word-wrap:break-word; width:150px; border:1px solid #ff0000; } #no_wrap { width:150px; border:1px solid #ff0000; } </style> </head> <body> <div id="text_shadow"><h1>Text Shadow</h1></div> <div id="word_wrap">you can't break the line hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.</div> <p>Without using word-wrap text will go like this.</p> <div id="no_wrap">you can't break the line hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.</div> </body> </html>

Download Demo

Categories: Css, Designs, Main

Leave A Comment

Loading...