flexi money back advantage plan

********************************
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></scrip
t>
<![endif]-->
CSS3 Styles
*************
border-radius - rounds the corner of the element with a defined radius
e.g border-radius:10px If this does not work, use brows
er specific
-webkit-border-radius:10px; For webkit
-moz-border-radius:10px; For Mozilla
border-radius:10px; Standard Property
text-shadow - Adds a vertical & horizontal offset shadwo to text (ability to
control direction,
blur and color of shadow)
p{text-shadow:0px -1px 1px #000;}
1 2 3 4 (1. x-offset, 2. y-offset, 3. Bl
ur, 4. Color)
box-shadow - Adds a shadow to a non-text element (identical syntax to text-
shadow)
image {box-shadow: 4px 4px 5px #282545;} -> This
is for outside shadow
image {box-shadow: inset 4px 4px 5px #282545;} -> This
is for inside shadow
RGBa - A new model for defining color in your stylesheet
object {color: rgba(209, 226, 360, .5);} ->(Red, Green, B
lue, Opacity)
HSLa - Helps in changing color values on fly if you do not have RGBa
object{color: hsla(75, 58, 80, 1);}
1. Hue - Values between 1 and 360 degree
2. Saturation - Values between 0 and 100%
3. Light - Values between 0 and 100%
4. Alpha - Transparency Value
opcatiy - Defines how opaque an image or an object can be.
object {opacity: 0.5;}
transform - It allows elements rendered by CSS to be transformend in 2-dim
ensional space.
ul.colors li a{float: left; width: 540px;}
ul.colors li a:hover{
float: left; width: 540px;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5); //for opera
transform: scale(1.5);
}
scale(1.5) => Scale an image by 50%
rotate(-10deg) =>
skew(-10deg, 15deg) =>
translat (25px, 50px) => Moves an image on x & y axis
transition - allow property changes in css values to mccur smoothly over a
specified duration of time.
(without using JavaScript)
gradients - It creates a transition from one color to another without usin
g images.
Tool - http://www.westciv.com/tools/gradients
multiple-backgrounds - It adds mulitple background images to our page or withing
our page.
Example:
body{
min-width: 1116px;
background-color: #d7d4c3;
background:url(../img/bg.jpg) no-repeat center top;
background:url(../img/bg.jpg) no-repeat center top, url(
../img/title.jpg) repeat center top;
}
fonts -
Include Font=>
@font-face{
font-family:"League Gothic";
src: url("fonts/LeagueGothic.ttf");
format("truetype");
}
Using Font =>
h1{font-family: "League Gothic", Arial, sans-serif;}
Free Font Website - Font Squirrel (100% Free For Commercia
l Use)
Google Web Fonts
Typekit
fonts.com