Dive Into CSS3

we will talking today about the awesome css3 features the implemented by w3 supported with many browsers on top of them safai and google chrome and of cource firefox

1- background image size:-

with css2 it was impossible to define a size to background image  but with css3 you can simply define the background image size by a few css lines
you can add something like that if we want 100% background size in css3



background:transparent url(img/simplebg.jpg) no-repeat;

background-size: 100%;

simple , isn’l , but wait
you tried it and it  didn’t work with you ??
unforunately that will face you much when you dealing with css 3 issues becasue it doesnt implemented the same way in all browsers and doesn’t implemented yet in browsers such as internet explorer



so we will add some lines to work in the most browsers

-o-background-size for opera browser
-webkit-background-size for webkit engine browsers -> safari and google chrome

unfortunately it didn’t work with firefox
so our code will be



background:transparent url(img/simplebg.jpg) no-repeat;

background-size: 100%;
-o-background-size: 100%;
-webkit-background-size: 100%

2- multi background :-

another awesome feature in css3 is multi background
you can add multi background to one container , you think its hard look at this



background:url(img/twiter.png) no-repeat top right,url(img/simplebg.jpg) no-repeat top left;

simple and easy  thats it
important note :-
the order is very important here because the first image will be above the next one etc..
we can merge the previous features together like that



background:url(img/twiter.png) no-repeat top right,url(img/simplebg.jpg) no-repeat top left;

-webkit-background-size:auto  auto, 100%;

3 - background-border :-

yes you can now define a background to be a border to a container
see the  next image


you can define the border cordinations like that



border-image:url("img/simpleborder.png") 25% 30% 12% 20%

we can use some reserved words like (stretch,repeat,round)
and we will add some extentions to work with most common browsers



-webkit-border-image:url("img/simpleborder.png") 25% 30% 12% 20%;

-moz-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;

-o-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;

-khtml-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;

4-  transparent colors:-

we was doing transparent colors by making the global container transparent via obacity features  but now you can simply make the  background colors only transparent by rgba



rgba(0,0,0,0.5)

the first 3 values is the rgb  values and the last value is the obacity value
note: there is a code from webdesignerdepot http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today