Font combos

Text field interactions

Page Preloading Effect

Dialog Effects

Button effects

Modal Effects

On scroll sliding boxes

Radio button effect

Animated svg icons

Shape hover effects with SVG

Misc UI effects (and slide out menu)

Color tint on bg image = box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4); rather than edit the actual bg image in photoshop

Science icons

Image card hover effects

Cool card tilt effects

/*Filter styles on background image*/
.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}

/ partial colored rules applied to /

headings h1:before, h2:before, .h1:before, .h2:before {
   content: ‘’;
   width: 10%;
   height: 5px;
   display: block;
   margin: 0 0 10px 1px;
   background: red;

h2:before {
    border-top: 1px solid #d9d9d9;
    content: "";
    display: block;
    height: 1px;
    margin: 30px 0 10px;
    width: 80px;

something-great83 KB
Name of file as seen by your site's visitors.1.13 MB