WEBEXPEDITION18 Never Stop The Exploring

In this post we have compiled some useful CSS3 tutorials and techniques. Check out some of these fascinating skills and see if you can replicate the functionality in your own website. Enjoy!!!

Pure CSS3 Piano

A classical piano made in pure CSS3. This piano also includes a menu including a search field, a drop down, tooltips and a full contact form that is just ready to work!

Texturise Web Type with CSS

As newer CSS properties, such as text-shadow, gain traction, there’s no limit to what can be done with web type. Trent Walton from Paravel goes a step further by texturising it!

Code a Set of Animated App Store Buttons With CSS

This project is super simple, so even if you’re a complete beginner, you should be able to follow along. We’ll learn how to use some fancy techniques like how to incorporate icon fonts into a design and how to insert objects using pseudo elements.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

By now, hopefully you’re familiar with the use of the :before and :after pseudo-elements in order to do some interesting effects with CSS. Here I’m going to show you how you can create a simple ‘stacked’ look to some images.

Fluid CSS3 Slideshow with Parallax Effect

In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.

Create Your Portfolio Gallery Using HTML5 Canvas – Tutorial

In this tutorial we will build a photo gallery and enhance it with html5 canvas and css3 transitions. The grayscale “copies” of the images are created with canvas and we use pure css3 for the smooth changes.

Understanding the CSS Display Property

One of the most powerful & useful properties in all CSS is, without a doubt, the display property. And yet, it is also one of the least well known, especially by those just starting out with CSS. In this post I’ll try to shed some light on this little gem.

Code a Fantastic Animated Circular Thumbnail Gallery With CSS

Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Along the way we’ll learn a ton of helpful CSS knowledge that will help you in all manner of future projects.

Quickly Build a Swish Teaser Page With CSS3

In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design. Many websites and upcoming apps gain great publicity from teaser pages, so this is a useful concept to add to your toolkit. Use it for any app or website that’s getting ready to launch.

CSS3 Loading Animation Experiment

In this article you’ll see an experiment about how to create a simple CSS3 loading animation. For this example, I’ll be using two CSS3 animations: one that fades the color for the triangles and one animation that rotates the whole design. These two animations, synchronized, will help creating a quite nice effect.

Login and Registration Form with HTML5 and CSS3

A tutorial on how to create a switching login and registration form with HTML5 and CSS3.

Type Study: Techniques for Using Novelty Fonts

When used well, decorative, display, or handwritten fonts can make the difference in a design. We’ll take a look at a blog design, and examine techniques for swapping standard fonts and novelty fonts to make the design more … well, novel.

Direction-Aware Hover Effect with CSS3 and jQuery

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.