Web Design & Inspiration
20+ New CSS Tutorials

20+ New CSS Tutorials

Today our showcase consists of the freshest and very useful tutorials that we have collected here in order to save your precious time and make your workflow more fun and easy! So meet the collection of 20+ Fresh CSS3 Tutorials and enjoy it!

How to Make a Mac OSX-like Animated Folder with CSS3

In this short tutorial, we are going to make a OSX-like folder with CSS3, by utilizing 3D transforms, gradients and box shadows.
How to Make a Mac OSX-like Animated Folder with CSS3 in 20+ New CSS Tutorials
Demo

Live Album Previews with CSS3 and jQuery

This slideshow-like animation can be used in photo galleries, online shops, profile pages and more. The example is inspired by Facebook, where you hover over an album and get a slideshow of some of the photos contained inside it.
Live Album Previews with CSS3 and jQuery in 20+ New CSS Tutorials
Demo

Basic Ready-to-Use CSS Styles

Today we are going to dig a little bit more into process development. When you’re creating a website or an application from scratch, you may need a collection of patterns helping you building thing up.
Basic Ready-to-Use CSS Styles in 20+ New CSS Tutorials
Demo

Simple Effects for Drop-Down Lists

The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects.
Simple Effects for Drop-Down Lists in 20+ New CSS Tutorials
Demo

Fullscreen Pageflip Layout

e have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to customize BookBlock and use some available options for navigating the content.
Fullscreen Pageflip Layout in 20+ New CSS Tutorials
Demo

3D Book Showcase

The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interactivity the user might find entertaining.
3D Book Showcase in 20+ New CSS Tutorials
Demo

CSS Click Events

CSS Click Events in 20+ New CSS Tutorials
Demo

Understanding the CSS Clip Property

Understanding the CSS Clip Property in 20+ New CSS Tutorials

Putting CSS Clip to Work: Expanding Overlay Effect

A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.
Putting CSS Clip to Work: Expanding Overlay Effect in 20+ New CSS Tutorials
Demo

CSS Animations with only one keyframe

CSS Animations with only one keyframe in 20+ New CSS Tutorials

CSS3 patterned buttons

The idea was to create some nice CSS3 patterned buttons and in this article you’ll see what I’ve been working on lately.
CSS3 patterned buttons in 20+ New CSS Tutorials
Demo

CSS3 tucked corners

CSS3 tucked corners in 20+ New CSS Tutorials
Demo

Neat and modern main section with CSS3

Neat and modern main section with CSS3 in 20+ New CSS Tutorials
Demo

CSS3 Leather Stiching

CSS3 Leather Stiching in 20+ New CSS Tutorials
Demo

Advertisement

CSS: Responsive Navigation Menu

CSS: Responsive Navigation Menu in 20+ New CSS Tutorials
Demo

A Simple Parallax Scrolling Technique

Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth.
A Simple Parallax Scrolling Technique in 20+ New CSS Tutorials
Demo

Custom Login Form Styling

In this tutorial we will create some modern and creative login forms using some interesting CSS techniques and HTML5 goodness.
Custom Login Form Styling in 20+ New CSS Tutorials
Demo

Colorful CSS3 Animated Navigation Menu

In this short tutorial, we will be creating a colorful dropdown menu using only CSS3 and the Font Awesome icon font.
Colorful CSS3 Animated Navigation Menu in 20+ New CSS Tutorials
Demo

How To Use CSS3 Multiple Backgrounds

In this tutorial we’ll show you how to make some creative css-only loading animations also known as activity indicators.
How To Use CSS3 Multiple Backgrounds in 20+ New CSS Tutorials

Creative CSS Loading Animations

In this tutorial we’ll show you how to make some creative css-only loading animations also known as activity indicators.
Creative CSS Loading Animations in 20+ New CSS Tutorials
Demo

Create a Flexible Folded Paper Effect With CSS3

Create a Flexible Folded Paper Effect With CSS3 in 20+ New CSS Tutorials
Demo

Using animation-fill-mode In You CSS Animations

Animation-fill-mode defines how styles are applied to the target of your CSS animations outside of the animation itself. By default your CSS animations won’t affect the element you’re animating until the first keyframe is “played”, then stops affecting it once the last keyframe has completed.

Neither Graphics Nor Fonts! Icons In Pure CSS3 with One-Div.com

Neither Graphics Nor Fonts! Icons In Pure CSS3 with One-Div.com in 20+ New CSS Tutorials

  • AndrewG,
  • February 4, 2013

SHARE THIS POST

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies. Crazy about Increateble gallery and amazing 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • http://www.facebook.com/joeyacevedo Joel Acevedo

    Woah! Nice collection here. Good job!

  • http://www.yepiclip.com/ yepi

    thank for share. i thịnk i need it

  • http://www.yepi-yepi.com/ Yepi Friv

    Very useful information for me. Thanks for sharing

  • http://www.y8u.org/ Y8

    css 3 very nice.