Dettagli

Categoria: css

Pubblicato: 23 Agosto 2014

Ultima modifica: 02 Gennaio 2015

Visite: 10789

• snippets
• css

Some CSS Snippets specific for the each browser.

Leggi tutto...

Dettagli

Categoria: css

Pubblicato: 03 Agosto 2014

Ultima modifica: 03 Agosto 2014

Visite: 7967

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

Leggi tutto...

Dettagli

Categoria: css

Pubblicato: 07 Novembre 2013

Ultima modifica: 06 Agosto 2017

Visite: 11361

• snippets
• css

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

•  w3school for more details

---

 

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

 

Dettagli

Categoria: css

Pubblicato: 05 Novembre 2010

Ultima modifica: 06 Aprile 2014

Visite: 33376

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

Leggi tutto...