Google Translate

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva

Some CSS Snippets specific for the each browser.

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva

The alternate table row color allows a better read. You can obtain it using difrente ways. for example using css or javascript.

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva

This contains some great css snippets found on internet or  just created/changed by myself. 


Box with glass border
.box {
    background: #f0edcc;
    background-clip: padding-box;          /* Background stops at border */
    border: 4px solid rgba(255,255,255,.2);
    border-radius: 3px;
    box-shadow:
       0    0   1px  rgba(255,255,255,.8), /* Bright outer highlight */
       0    0   3px  rgba(0,0,0,.8),       /* Outer shadow */
       1px  1px 0    rgba(0,0,0,.8) inset, /* Inner shadow (top + left) */
      -1px -1px 0    rgba(0,0,0,.8) inset; /* Inner shadow (bottom + right) */
    padding: 10px;
}

thanks to Jordan Gray for his post on stackoverflow


Break word for word wrap
.acapo{
word-break
:break-all
}

 


Apply to classes starting with ...

...ie: to select all classes starting with leading like "leading-[n]". The [n] is 1, 2, 3 ...n

[class*="leading"] {
  margin: 0 0 20px 0;
}

 


Apply to First and Last element
.nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
.nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

  


Text Gradient 
.mytextgradient {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  color: #234EFA;
  background: -webkit-linear-gradient(#234EFA 50%, #040A22);
}

 


PNG-Shadow 

Shadow for transparent image

my-Transparent-img {
   -webkit-filter: drop-shadow(5px 5px 5px #222); 
   filter: drop-shadow(5px 5px 5px #222); 
}

 Thanks to Stackoverflow for the discussion

 


Image auto resize 
/* image auto size when resize the browser */
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto\9; /* ie8 */

 

 


 

Select Next Element
p:nth-child(2) {
    background: #ff0000;
}
p:nth-child(4) {
    background: #00000;
}

p:nth-child(odd) {
    background: #ff0000;
}

p:nth-child(even) {
    background: #0000ff;
}

p:nth-child(3n+0) {
    background: #ff0000;
}

 

CSS Reflection
/* chrome and safari */
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

 HongKiat Blog

 

 CSS hover can display hidden element

/* will show the element with class tooltiptext */
.tooltip:hover .tooltiptext {
	display: block;
	opacity: 1;
}

 


To Be Continued... 

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

 

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva

Affiancare due immagini con due <div> usando lo stile stile float:left