Material Design for Bootstrap Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework. If you like this project you can support me by donating something on Gratipay, starring this repository, or reporting bugs and ideas. Read more about Material Design for Bootstrap at the Github page. If you want support the development of this project please consider donate something: Thanks to all the people that has donated on PayPal! Seems like you are using AdBlock to hide banners... Thanks! You can get this theme downloading the source from Bower or NPM: bower install bootstrap-material-design npm install bootstrap-material-design Download Install with NPM You can also install and manage Material Bootstrap using NPM Install with Bower You can also install and manage Material Bootstrap using Bower What's included Material Design for Bootstrap is downloadable in a two forms. Required Frameworks Bootstrap v3.0+ jQuery 1.9.1+ $.material.init() Input - Legacy
index iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3! Hover effect 1 <div class="row"><div class="col-sm-6"><! Hover effect 2 <! Hover effect 3 <! Hover effect 4 <! Hover effect 5 <div class="row"><div class="col-sm-6"><! Hover effect 6 <! Hover effect 7 <! Hover effect 8 <! Hover effect 9 <! Hover effect 10 <div class="bs-example"><! Hover effect 11 <! Hover effect 12 <! Hover effect 13 <! Hover effect 14 <! Hover effect 15 <div class="row"><div class="col-sm-6"><! Hover effect 16 <! Hover effect 17 <div class="row"><div class="col-sm-6"><! Hover effect 18 Note: This will not work in IE9, since IE9 doesn't support 3d rotate. <! Hover effect 19 <div class="row"><div class="col-sm-6"><! Hover effect 20 <! <! <div class="row"><div class="col-sm-6"><! <! <div class="row"><div class="col-sm-6"><! <! <! <div class="row"><div class="col-sm-6"><! <! <! <! <! <! <! <! <! Pure CSS3 powered, no dependency, can be used in any project. iHover is pretty easy to use. Introduce to the folders:
CSS Shake Some CSS classes to move your DOM! The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Get started... $ git clone or $ bower install csshake $ npm i csshake or Download Center Download separated files for each shake animation, expanded or minified. cdnjs.com New Include the css file then apply classes to elements Some things you could add... 🙊 Freezed after Shake 🙈 Constant and stops on :hover The do-shake @mixin, and so on... The about, the idea, and the desire to hear from you to improve the code... I had to make a shake animation for a big project. Download Fork me on Github
Fontface Ninja 24 CSS3 Tutorials for Advanced User Interface Effects Web developers are becoming crafty as web browsers are updating to more popular standards. This can only lead to better support along with an easier frontend development time. One of the best methods for studying new techniques is by practicing with online tutorials. I want to present a series of 24 well-explained tutorials for more advanced interfaces. Interactive SVG Infographic Animated 3-D Bar Chart CSS3 Clip Property Annotation Overlay Effect Animated Content Tabs Enhance Required Form Fields using CSS3 Animated Tooltips CSS3 Responsive Timeline Filter Functionality with CSS3 CSS3 Bounce Effect Multiple Column Layouts Understanding the CSS3 calc() Function Custom Checkboxes and Radio Buttons Cool Image Caption Techniques CSS3 :First-Of-Type Selector Breadcrumb Navigation Responsive Form with HTML5/CSS3 CSS3 Linear Gradients CSS3 Repeating Gradients Paragraph Dropcaps Scalable Vector Graphics with CSS3 CSS3 Image Adjustment Filters Getting Started with Sass CSS Grid Layouts in WordPress
Elastic Circle Slideshow A very simple content slideshow with circular slides and an elastic, bouncy navigation effect. Inspired by the Dribbble shot "Mobile Commerce Interface" by Bilal Mechairia. View demo Download source Today we’d like to share a very simple content slideshow with you. When opening a slide item, the circular shape expands similar to the Google Material design effect and some content is slided in from the bottom. Attention: We are using some recent CSS properties that will only work in modern browsers. Note that IE seems to have some flexbox issues, so centering the column direction does not seem to work properly. For the demo we have used some bottle mockups by forgraphic. The initial state of the slideshow looks as follows: When opening the slideshow, we expand the circle and show some content: We hope you like this little component and find it useful! Browser Support:ChromeSupportedFirefoxSupportedInternet ExplorerSupported from version 11SafariSupportedOperaSupported
Vibrant.js - Extract prominent colors from an image. Extract prominent colors from an image.Vibrant.js is a javascript port of the awesome Palette class in the Android support library. Showcase Use of Vibrant is pretty straight forward, but because code works better than explanation, here's an example: As you can see, Vibrant's first argument is an image. new Vibrant( img, 64, /* amount of colors in initial palette from which the swatches will be generated, defaults to 64 */ 5 /* quality. 0 is highest, but takes way more processing. defaults to 5. */) The Swatch class Vibrant.swatch() returns a object with Swatch objects. 6 Cool Image Captions with CSS3 CSS3 is really powerful. It used to be that we need images or a bunch of JavaScript codelines to make a simple transition effect. Nowadays we can do the same with only CSS3. In this tutorial, we will show you how to create image captions with various transitions simply using CSS3. Browser Support This caption will be much dependent on transform and transition properties which are relatively new features, so, it would be wise to take note of the browser support needed to run the caption smoothly. The following are browsers that already support transform and transition: Internet Explorer 10+ (not released yet)Firefox 6+Chrome 13+Safari 3.2+Opera 11+ Now, let’s start the tutorial. HTML Structure We have 6 images; each image with a different caption style. Basic CSS Before styling any element, it is always a good start to reset all the properties using this CSS reset and give them their default style values, so all browsers will render the same result (except maybe, IE6). Image Box Style Caption 1