CSS Snippets

style.md

CSS Transitions & Gradients

Via An HTML5/CSS3 Case study – CV/Résumé

.transition-gradient {
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background:    -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background:         linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background-color: #17a09e;
     -moz-transition-property: background-color;
  -webkit-transition-property: background-color;
          transition-property: background-color;
     -moz-transition-duration: 800ms;
  -webkit-transition-duration: 800ms;
          transition-duration: 800ms;
}
.transition-gradient:hover {
  background-color: #b20101;
}

CSS Background Transparency Without Affecting Child Elements, Through RGBa And Filters

Via http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

For Modern Browser:

.rgba{
  background: rgba(0, 0, 0, 0.3);
}

For IE8 -:

• Color format: #AARRGGBB

• AA = Math.floor(alpha * 255).toString(16);

  Math.floor(0.3 * 255).toString(16) = 4c

.oldie .rgba {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c000000', EndColorStr='#4c000000');
}

Word wrapping/hyphenation using CSS

via http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

.word-break {
    -ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word; // Non standard for webkit
   -webkit-hyphens: auto;
      -moz-hyphens: auto;
           hyphens: auto;
}

hover to show

.sub {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.26s ease-out;
     -moz-transition: all 0.26s ease-out;
          transition: all 0.26s ease-out;
}

div:hover .sub {
  opacity: 1;
  visibility: visible;
}