HTML Snippets & Tutorials

  • Published by steve on 20 January 2017.

This is a compiled list of HTML, CSS, and Javascript tricks and tutorial that I want to implement on various websites.

CSS Image Flip Card
https://davidwalsh.name/css-flip

CSS Transitions
http://callmenick.com/post/simple-css3-transitions-transforms-animations...

Building Logos with CSS
http://bradsknutson.com/blog/google-logos-created-css/

Fancy Rollover Social Buttons
http://bradsknutson.com/blog/css3-rollover-social-media-icons/

Curved Text
http://bradsknutson.com/blog/curved-text-with-css-and-jquery/

Fade and Transition Images (Using CSS or Jquery)
http://bradsknutson.com/blog/fade-one-image-into-another/

Cool Broken Sign Animation - Going to use this for a 404
https://codepen.io/lrsbck/pen/yEzmK

Simple HTML5 Keyframe animation
https://codepen.io/DanielTate/pen/tfsnH

Simple Javascript Animation
http://blocksjs.com/demos/block/

CSS Only Animation from W3 Schools
http://www.w3schools.com/css/css3_animations.asp

Image Reflections
http://bradsknutson.com/blog/css3-image-reflections/

Smoke Effect using CSS + JS
https://codepen.io/MIML/pen/iBKyC

Animation Guide
http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animat...

Fading CSS Animation Loop
http://stackoverflow.com/questions/23985018/simple-css-animation-loop-fa...

Post It Notes
https://codepen.io/bsmith/pen/cbKjr

Clouds
http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

Orbit Effect
http://codepen.io/SkidX/pen/bAeHj

Scrolling Background Color Effect
http://codepen.io/kapz/pen/hxmpb

Space Particle Effect
http://vincentgarreau.com/particles.js/

Various JS Options
http://www.jsmadeeasy.com/javascripts/Animation/test_list.asp