Stampa
Categoria: css
Visite: 4740
Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 

Some CSS Snippets specific for the each browser.

 

 


 

TRANSFORM

-moz-transform: scale(1.04);
-webkit-transform: scale(1.04);
-o-transform: scale(1.04);
-ms-transform: scale(1.04); 

 

 


 

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

-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;

 


 

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... 

Stay tuned, I will add more snippets soon...

 

 


REFERENCES