Ribbon Wrap - CSS3 Hover Animation

Apply me and keep an eye fixed out for HTML5 video player on this taste quickly!

Ribbon Wrap – much more than a hover impact

You hover over the part, the ribbon slides out from at the back of it and wraps around. CSS ribbons in the end move.

There are endless probabilities with this CSS3 instrument. It’s super simple to enforce and has a variety of preset colors and styles (but customising is inconspicuous!).

Be Sure to view the video preview to fully know the way cool this factor is!

What am i able to use it for?

Titles & descriptions of pictures

Ribbon Wrap may also be used as a stupendous hover effect for image descriptions, photograph credits, representation titles, or no matter what else you can call to mind!

Combine it in with content

Ribbon Wrap can also be treated as in inline part to be part of the standard glide of content, or can also be situated in a way to hide content material while it’s hovered. The Usage Of Ribbon Wrap’s static mode, it may also be handled as a more “conventional” CSS ribbon without any animation.

Social strip

Have a strip of social media icons slide over your selected part whilst hovered.

Tool strip

Instrument-style icons can be used instead. There’s even a vertical environment.

Features

• Natural CSS3 animations
• 8 colour permutations – Simple to make your own!
• FIVE further types to go with colours
• 3 speed settings
• Tremendous simple markup
• Beautifully strong and flexible – will also be introduced to almost any pre-current design
• Degrades gracefully in browsers that don’t beef up CSS3 transitions
• Tiny filesize, the core CSS document is purely 13.7kb!
• Packaged with a collection of 19 icons (in both darkish and lightweight permutations) plus a clean icon
• Font sizes and fonts made up our minds basically via your personal CSS
• CSS files break up into “core” (13.7kb) and “colours” (48.5kb) bearing in mind easier filesize optimisation
• Works mechanically with any width – easiest for responsive and fluid layouts!
• Fantastic documentation which includes 6 other absolutely commented example files (each containing a couple of examples).

Browser Beef Up

• Chrome: Full Animation
• Safari: Complete Animation
• Firefox: Full Animation
• Opera: Complete Animation
• IE8 , IE9: No Animation, ribbons seem in an instant whilst hovered

Appropriate with Ribbon Player

This item is suitable with Ribbon Participant, an HTML5 video participant that uses the same ribbon animation. Details on the right way to mix are integrated in the documentation of Ribbon Player.

BigFat – Unmarried Web Page Filterable Portfolio HTML5

Make Sure to check out BigFat, my HTML template which uses components similar to Ribbon Wrap. Please note that these two pieces cannot be blended.

Credits

Preview Credit

• Harry Tennant* – Illustrations used in examples.

Template Credits

• Picons Social – Social media icons. Now Not packaged with complete set.
• Iconic – Used for miscellaneous icons.
• Final CSS Gradient Editor – Used to generate all CSS3 gradients in ribbons.

* Harry Tennant is a private loved one of mine and has given me permission to use his work on this means.

FULL DOWNLOAD