CSS Archive

Flickity is a carousel,slider,gallery library created by David DeSandro.Flickity makes galleries, sliders and carousels that feel lively and effortless. Start using Flickity in three steps. Download Flickity flickity.css and flickity.pkgd.min.js files Add the Flickity .css and .js files to your site Add …

This is a slide-in filter panel powered by CSS and jQuery and created by Codyhouse.It is actually an essential feature if your website has lots of content, distributed across different categories. For an e-commerce, it is a way to increase conversion rates …

TheaterJS is a typing effect mimicking human behavior. – Everything you need to know is demonstrated and explained in this codepen. DEMO:The demo is also available on the TheaterJS page. See the Pen TheaterJS by Gabin Aureche (@Zhouzi) on CodePen. Features: Multiple …

icono is an icon pack that needs no external resources. Every tags can be an icon made with pure CSS. How to use To get going with icono you can: Download icono.min.css or Install it with Bower: bower install https://github.com/saeedalipoor/icono.git And then …

This is a tutorial of effects on text inputs using CSS transitions, animations and pseudo-elements.Form inputs offer a great opportunity to add some subtle and interesting effects to a web page. They are elements that your user will interact with at some …

Another great tutorial from Codyhouse.A list of split blocks that reunite on scrolling, simulating a movement along the z-axis with the help of CSS transformations and jQuery. The 2-blocks design approach is quite common nowadays. On one side the text paragraph, on …

Papier is a minimal, pretty semantic, responsive CSS library.While other frameworks force you to be very explicit about the intended styling of your elements by adding lots of classes , Papier is very semantic and simply styles e.g. all buttons as Papier-buttons …

This is a tutorial by Codrops on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid. The idea is to initially show a fullscreen image with a title and …

This is a secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other. A fixed navigation with smooth, jQuery powered scroll. Nothing fancy …

This is a great 3D Rotating Navigation tutorial by Codyhouse.(Claudia Romano).It is powered by CSS transformations.Sometimes you just want your website navigation to be bold. Design agencies, for example, use their portfolio to show off their skills and push a little usability …

This is a collection of effects for revealing sharing buttons. You can use them in your portfolio, image galleries and more.Most of the different transformations and effects on the demos are done exclusively via CSS, so they should appear bug and lag …

This is a responsive and easy to customize navigation for mega-sites enriched by subtle CSS animations and support for devices with javascript disabled.Created by Sebastiano Guerriero.It works on all major browsers. Sebastiano used SASS and Bourbon (http://bourbon.io/) for resources. If you don’t …