CSS Effects Library

Some of the many dynamic effects achieved via CSS3 that can be used to enhance the user experience.

Breadcrumbs & Multi-Step Indicator

A handy snippet to create responsive CSS breadcrumbs or multi-step indicators with ease.

Zooming Background Images

A simple way to zoom in on images when the user hovers.

Auto-Hiding Navigation

A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up.

Line Menu Styles

Some ideas for menu styles and effects that employ the line as a creative design element.

Hero Slider with Thumbnails

A full-width, responsive and easy to customize slideshow.

via the new code

A Responsive Google Map

It’s easy to make an embedded Google Map responsive by removing the height and width in the embed code and substitute appropriate CSS and wrapping markup.

Horizontal Timeline

An easy to customize, horizontal timeline powered by CSS and jQuery.

Reading Progress Indicator

A widget with a list of suggested articles and a reading progress indicator.

Vertical Fixed Navigation

A smart vertical navigation, with round indicators that turn into labeled icons.

Pointy Slider

A slideshow with sliding-in panels that unveil new, fixed background images.

Pricing Tables

Styles and inspiration for responsive, flexbox-based HTML pricing tables.

Animated Intro Section

A collection of text effects for the intro section of your website.

Page Stack Navigation

A template for a simple page stack navigation based.

via Designify.me

Tabbed Sign up/Login Form

How to make a tabbed sign up or login form in Bootstrap.

via Designify.me

Beautiful Bar Pie Charts

A simple jQuery plugin to create bar pie charts.

Caption Hover Effects

A tutorial on how to create some subtle and modern caption hover effects.

via Designify.me

Mobile-first Pull-down Мenu

A mobile-first navigation which slides from the top of the page when toggled.

Notification Styles

Some simple ideas and effects for unobtrusive website notifications.

Typed Text Header

An example of typed (animated) header text with a blinking cursor.

Video Background Hero

Embed videos as a hero background with a simple set of code.

Back to Top Function

Allows users to smoothly scroll back to the top of the page.

Reducing Header on Scroll 2

Some inspiration for headers that animate when scrolling the page.

via Designify.me

Simple Marquee

A simple jQuery plugin that can scroll a list from right to left.

via Designify.me

YouTube Video Background

A jQuery plugin that allows you to use any YouTube video as a background.

via Designify.me

Modal-Like Sliding Panel

A panel that slides out a top panel and pushes the content to the bottom.

via Designify.me

Animated Skills Bars

Present your skills in an appealing way with simple CSS bars.

via Designify.me

Animated Pricing Tables

Simple animated pricing talbes using Foundation and CSS.

Multi Level Push Menu

A push menu with multi-level functionality and nested menus.

Background Slide Show

A tutorial that shows how to recreate a four tiles slideshow effect.

Modal Window Effects

A set of modal window appearance effects with CSS transitions and animations.

Expanding Search Bar

A tutorial on how to create a responsive expanding search bar.

Text Input Effects

Some effects on text inputs using CSS transitions and animations.

Quotes Rotator

A simple automatic quotes rotator with progress bar.

Scrolling Backgrounds

A fixed background image scrolling layout with 100% height panels.

Inline Anchor Styles

Some creative and modern inline anchor styles and hover effects.

Reducing Header on Scroll

A fixed header that will animate its size when the user scrolls.

via Designify.me

Animated Buttons

A collection of flat buttons with animated hover effects.

Animated Background Headers

A collection of animated background header effects.

via Designify.me

Responsive Data Table

Examples of how to make a large table work responsively.

Subtle Hover Effect Ideas

Some creative and subtle hover effects using modern CSS techniques.

Creative Link Effects

An inspirational collection of experimental link effects.