byman - css

css

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

Snippets CSS Cross Browser

Some CSS Snippets specific for the each browser.

css