Category

CSS

Category

This is a CSS powered animation, that replaces the refresh of the page while the content is updated using Ajax. The idea come from replacing the refresh of a web page with an animation, that takes place while the new page content is loaded using Ajax. basic load() function has been impelemented to upload new content, but you may want to replace it with, for example, a $.ajax call in order to handle errors, etc.…

This is a collection of 15 simple CSS spinners made with CSS and minimal HTML markup. You can use any spinner on your site with only a few lines of code. Or check out the source on Github and start making your own. All spinners are also available via bower. All loading indicators are designed to be used with minimal markup: Simply replace “loading-indicator” with the class name of your choice. Many of the spinners…

This is a responsive and easy to customize mega-dropdown component tutorial by Codyhouse. One of the most challenging part when you’re working on a web projects with lots of content is to make it easy for a user to navigate through this content. One example we can all think of is Amazon: infinite categories, each one with its own sub-categories… that’s why they currently provide an easy-to-access navigation, in the form of a mega-dropdown element…

Yes, i know this is not something fresh but i just want to share for whom did not not see it yet.It’s called Tearable Cloth – a Javascript cloth simulation.It’s been created by dissimulate Tearable Cloth Tear the cloth with your mouse Right click and drag to cut the cloth Reduce physics_accuracy if it’s laggy See the Pen Tearable Cloth by dissimulate (@dissimulate) on CodePen.

This is a Pure CSS Content Filter by Sam Gordon For a simpler effect with fewer lines of CSS, trade the width, height, padding, margin, and opacity properties in each checked input style for “display:none;” — these styles were just set to have a nice tranisition between filters. See the Pen Pure CSS content filter by Sam Gordon (@samgordon) on CodePen.

This is an animated button effect based on Google’s “Material Design”.The buttons and effects are all created in CSS so you do not need JS.They have nice and discreet effect. It’s been created by Jon Brennecke – Freelance Developer from Portland, OR. See the Pen CSS only “Material Design” Animated Buttons by Jon Brennecke (@jonbrennecke) on CodePen.

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by Google, Twitter, Alibaba, and Shopify. Its plugin, Autoprefixer, is one of the most popular CSS processors. PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 3-30 times faster, and much more powerful. PostCSS itself is very small. It…

9 Album Preview Animations using CSS only have been created by Robert Popa from Simbyone.com In this tutorial you will learn you how to create some album preview effects using CSS only. No JavaScript section here. At the end of this tutorial you will also see how you can easily create those effects just by adding the class of the animation on your div element. One thing you have to keep in mind is that…

30 CSS Page Preload Animations have been created by Robert Popa from Simbyone.com Those animations are best suited for content that takes some time to load like an image gallery. The animations are very easy to customize since they are made out of just CSS, you will have to change jQuery code so that it fades out the loading screen once the content loads.    

The Availity UIKit is derived from Bootstrap 3 and allows developers to create beautiful web applications for the Availity Spaces platform. Availity supports Internet Explorer 8 and newer,Google Chrome (latest version),Mozilla Firefox (latest version) Original Bootstrap conventions were preserved as much as possible. The Availity UIKit is available on Github and Bower. Availity uses Fontello to manage the UIKit icon fonts (glyphicons). Font configuration can be found in the config.json. The UIKit currently uses icon…