menu
Ad goes here

Sunday, 20 January 2013

How CSS3 offers a new ways to apply advance style and design on Webpage?

The CSS3 is the latest standard for Cascading Style Sheet. CSS3 offers a new ways to apply advanced style and design on webpage using style sheet. The CSS3 adds several new features, where designers/ Developers can create rounded border, Box Shadow, Stretchable background, Text Effects, Transition, Multiple columns and even Animation by simply specifying the CSS3 properties.

  1. CSS3 Rounded Border
  2. CSS3 Box Shadow
  3. Stretchable Background
  4. Text Effects
  5. Transition
  6. Multiple Columns
  7. Animation






CSS3 Rounded Border:
div.roundedbox

{

border:3px solid #c00000;

border-radius:25px;

-moz-border-radius:25px; /* Old Firefox */

}

html5
CSS3


CSS3 Box Shadow:
div.boxshadow
{
box-shadow: 10px 10px 5px #888888;
}

html5
CSS3


Stretchable Background:
Now you can use any size of image to make it tiles background or create streachable background through the CSS3. See css propery and try with your design, how it works easily!
div.stretchablebg
{
background:url(24xhtml_logo.png);
-moz-background-size:80px 60px; /* Old Firefox */
background-size:80px 60px;
background-repeat:repeat;
width:150px;
height:150px;
}  


Text Effect:
TEXT SHADOW:
h2
{
text-shadow: 5px 5px 5px #FF0000;
}

WORD WRAP:
If you are using a long line sentece or email ID [without any space] in a small div/block then you will see that the long line sentence overlapping the block. You can fix this issue with the css propery below.
p {word-wrap:break-word;width:150px;}

Youarewelcometoourwebsite

Transition
It's really very useful to give small animation on any block. Suppose you have a tab menu and you are thinking to use a smooth animation on it, so you can use css property below to make it very quickly without using any Javacsript or jQuery.
div.transition
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
 
div.transition:hover
{
width:300px;
}

Hover over the div element above, to see the transition effect.
Note: This example does not work in Internet Explorer.

Multiple Columns:
See how to devide your website content like newspaper.
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
 
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

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.

Note: Internet Explorer does not support the column-gap property.


Animation:
See here >>

No comments:

Post a Comment

Books for you (Crafted with )