Interactions

Spinner http://tobiasahlin.com/spinkit/

Font combos http://tobiasahlin.com/typesource/

Text field interactions http://tympanus.net/Development/TextInputEffects/index2.html

Page Preloading Effect http://tympanus.net/codrops/2014/08/05/page-preloading-effect/

Dialog Effects http://tympanus.net/Development/DialogEffects/laura.html

Button effects http://tympanus.net/Development/ButtonStylesInspiration/

Modal Effects http://tympanus.net/Development/ModalWindowEffects/

On scroll sliding boxes http://tympanus.net/Blueprints/OnScrollEffectLayout/

Radio button effect http://allrecipes.com/recipe/229248/slow-cooker-ground-beef-stew/

Animated svg icons http://tympanus.net/Development/AnimatedSVGIcons/

Shape hover effects with SVG http://tympanus.net/Tutorials/ShapeHoverEffectSVG/index.html

Misc UI effects (and slide out menu) http://www.unheap.com/

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 http://tympanus.net/Development/HoverEffectIdeas/index2.html

Cool card tilt effects

https://tympanus.net/Development/StackMotionHoverEffects/#

/*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