Some CSS Snippets specific for the each browser.
Some CSS Snippets specific for the each browser.
Transform Scale
TRANSFORM
-moz-transform: scale(1.04); -webkit-transform: scale(1.04); -o-transform: scale(1.04); -ms-transform: scale(1.04);
Box-Sizing
BOX-SIZING
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */
Border-Radius
BORDER-RADIUS
-moz-border-radius:5px 5px 5px 5px; -khtml-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px;
Background Gradient
GRADIENT
/* NORMAL */
.navigation .nav-pills > li > a {
color: rgba(0, 0, 0, 0.95);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.91);
background-color: #FFFFFF;
background-image: -moz-linear-gradient(top,#FFFFFF,#f0f0f0);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#FFFFFF),to(#f0f0f0));
background-image: -webkit-linear-gradient(top,#FFFFFF,#f0f0f0);
background-image: -o-linear-gradient(top,#FFFFFF,#f0f0f0);
background-image: linear-gradient(to bottom,#FFFFFF,#f0f0f0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#f0f0f0', GradientType=0);
/* background-repeat: repeat-x; */
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33);
box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
}
/* HOVER */
.navigation .nav-pills >li> a:hover
{
background-color: #e0e0e0;
background-image: -moz-linear-gradient(top,#FFFFFF,#e0e0e0);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#FFFFFF),to(#e0e0e0));
background-image: -webkit-linear-gradient(top,#FFFFFF,#e0e0e0);
background-image: -o-linear-gradient(top,#FFFFFF,#e0e0e0);
background-image: linear-gradient(to bottom,#FFFFFF,#e0e0e0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#e0e0e0', GradientType=0);
/* background-repeat: repeat-x; */
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.66);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33);
}
/* ACTIVE AND FOCUS */
.navigation .nav-pills >li> a:active,
.navigation .nav-pills >li> a:focus
{
background-color: #c0c0c0;
background-image: -moz-linear-gradient(top,#f0f0f0,#c0c0c0);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#f0f0f0),to(#c0c0c0));
background-image: -webkit-linear-gradient(top,#f0f0f0,#c0c0c0);
background-image: -o-linear-gradient(top,#f0f0f0,#c0c0c0);
background-image: linear-gradient(to bottom,#f0f0f0,#c0c0c0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#c0c0c0', GradientType=0);
/* background-repeat: repeat-x; */
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.66);
}
To Be continued
To Be Continued...
Stay tuned, I will add more snippets soon...
