- Site Template
- WordPress Theme
- Blogging Theme
- CMS Theme
- Marketing Template
- eCommerce Theme
- Forum Theme
- Flash Template
- PSD Web Template
- .NET Script
- PHP Script
- HTML5 Code
- CSS Style
- Edge Animate Template
- Muse Template
- TypeEngine Theme
- Static Site Generator
- Sketch Template
CodeCanyon Ribbon Wrap CSS3 Hover Animation 2447946
CSS Style \ Animation \ Effect
Ribbons \ Ribbon \ Rollover \ Slide \ Video \ Title \ Player \ Html \ Colors \ Caption
CSS Style - Ribbon Wrap CSS3 Hover Animation 2447946 by iamalexkempton @ CodeCanyon
CSS Style \ Animation \ Effect
Last Update: 8 June 12; Compatible Browsers: IE8, IE9, Firefox 4, Safari 5, Opera, Chrome; Software Version: CSS2, CSS3; Files Included: HTML, CSS.
Follow me and keep an eye out for HTML5 video player in this style soon!
Ribbon Wrap – much more than a hover effect
You hover over the element, the ribbon slides out from behind it and wraps around. CSS ribbons finally move.
There are endless possibilities with this CSS3 tool. It’s super easy to implement and has plenty of preset colours and styles (but customising is simple!).
Make sure to view the video preview to fully understand how cool this thing is!
What can I use it for?
Titles & descriptions of images
Ribbon Wrap can be used as a beautiful hover effect for image descriptions, photo credits, illustration titles, or whatever else you can think of!
Mix it in with content
Ribbon Wrap can be treated as in inline element to be part of the usual flow of content, or can be positioned in a way to cover content when it’s hovered.
Using Ribbon Wrap’s static mode, it can be treated as a more “traditional” CSS ribbon without any animation.
Have a strip of social media icons slide over your chosen element when hovered.
Tool-style icons can be used instead. There’s even a vertical setting.
- Pure CSS3 animations
- 8 colour variations – Easy to make your own!
- 5 extra styles to go with colours
- 3 speed settings
- Super simple markup
- Fantastically stable and flexible – Can be added to almost any pre-existing design
- Degrades gracefully in browsers that don’t support CSS3 transitions
- Tiny filesize, the core CSS file is only 13.7kb!
- Packaged with a set of 19 icons (in both dark and light variations) plus a blank icon
- Font sizes and fonts determined purely by your own CSS
- CSS files split into “core” (13.7kb) and “colors” (48.5kb) allowing for easier filesize optimisation
- Works automatically with any width – perfect for responsive and fluid layouts!
- Fantastic documentation which includes 6 different fully commented example files (each containing multiple examples).
- Chrome: Full Animation
- Safari: Full Animation
- Firefox: Full Animation
- Opera: Full Animation
- IE8 , IE9: No Animation, ribbons appear instantly when hovered
Compatible with Ribbon Player
This item is compatible with Ribbon Player , an HTML5 video player that uses the same ribbon animation. Details on how to combine are included in the documentation of Ribbon Player.
BigFat – Single Page Filterable Portfolio HTML5
Make sure to check out BigFat , my HTML template which uses elements similar to Ribbon Wrap. Please note that these two items cannot be combined.
- Harry Tennant * – Illustrations used in examples.
- Picons Social – Social media icons. Not packaged with complete set.
- Iconic – Used for miscellaneous icons.
- Ultimate CSS Gradient Editor – Used to generate all CSS3 gradients in ribbons.
* Harry Tennant is a personal friend of mine and has given me permission to use his work in this way.
Ribbon Player - HTML5 Animated Video Player.
Keywords: animation, caption, colors, css3, effect, hover, html5, player, ribbon, ribbons, rollover, slide, title, video.
Android, Builder, Business, Clean, Corporate, Creative, Design, Ecommerce, Email, Fashion, Gallery, Image, Iphone, Jquery, Landing, Magazine, Magento, Marketing, Minimal, Mobile, Modern, Multi, Multipurpose, Parallax, Personal, Photography, Plugin, Portfolio, Product, Responsive, Retina, Simple, Slider, Social, Store, Template, Theme, Video, Woocommerce, Wordpress
Show all tags
Show all tags
- ThemeForest QUOTE Quotation or Survey Form Wizard 19296301
- ThemeForest Taplak Modern Food Recipe PSD Template 19275593
- ThemeForest Hena Minimal Portfolio Template 19277042
- ThemeForest NotificationApp Responsive Notification Email HTML Templates 19295635
- ThemeForest Campton Responsive Magento Theme 19155920
- ThemeForest Jacqueline Spa & Massage Salon Site Template 19330375
- ThemeForest MOCHA Ecommerce PSD Tempate 19296527
- ThemeForest Flyapp Bootstrap Landing Page 19227068
- ThemeForest Responsive Email Template FORTUNA Multipurpose Email With Email Template Builder Online Access 19298096
- ThemeForest Frecuencia 100& Modules Email & Online Template Builder 19296668