CSS Animated Intro Section – Tutorial

CSS Animated Intro Section - Tutorial

A collection of fancy text effects, to animate the tagline and action buttons of your website intro section.

Animations in web design are often used to drive the user’s focus to a specific section. One section  you want to make sure to highlight is the main tagline, with the action buttons. A good use of typography and a wise choice of colors should do the trick. However here I’m going to share a tutorial for creating some text effects that you can easily apply to the intro section of your web projects.

Effects:

  • Bounce
  • Cut
  • Mask
  • Mask2
  • Parallax
  • Scale
  • Video

These intro effects have been created using CSS only.

CSS Animated Intro Section - Tutorial

Tutorial | Demo | Download

Velocity.js – Animation framework

Velocity.js - Animation framework

Velocity.js - Animation framework

Velocity.js (made by Julian Shapiro) is an animation engine that re-implements jQuery’s $.animate() for significantly greater performance (making Velocity also faster than CSS animation libraries) while including several new features.

In just 9Kb zipped, Velocity includes all of $.animate()’s features while packing in color animation, transforms, loops, easings, SVG support, and scrolling. Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.

Compatibility

Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, Velocity uses jQuery’s $.queue(), and thus interoperates seamlessly with jQuery’s $.animate(), $.fade(), and $.delay(). Since Velocity’s syntax is identical to $.animate(), your code doesn’t need to change.

Demo | Download

Create Round, Flat and Flip-Style CSS Toggle Switches

Create Round, Flat and Flip-Style CSS Toggle Switches

Create Round, Flat and Flip-Style CSS Toggle Switches

Toggle switch has become one of the popular form elements in mobile apps, sometimes, on desktop website. It makes perfect sense while we use it on touch screen devices because it works exactly like those switches in our living space.

In this tutorial, we show how to easily create some fantastic round, flat and flip-style CSS toggle switches. We’ll be using pure CSS to create some toggle switches, adding a neat user experience to checkbox functionality.

Example 1 – Round Style CSS Toggle Switch

Round Style CSS Toggle Switch
Example 2 – Round Style Switch With Flat Finish

Round Style Switch With Flat Finish
Example 3 – Yes/No Flip Style CSS Toggle Switch

Yes/No Flip Style CSS Toggle Switch

Demo | Read Full Tutorial

Single input CSS 3D form

Single input CSS 3D form

Single input CSS 3D form

A simple 3D form concept where different faces act as different parts of the form. The default state looks like a flat button which surprises the user by rotating to show the next face which is the text input.

On submission the user sees a pulsating loader and finally the thank you message on completion. This thank you message face could also be used to show validation errors.

This concept can be further enhanced to have multiple inputs as different faces of the cuboids being manipulated dynamically using JS.

Demo | Download

Convert colored images to Grayscale with Pure CSS

Convert colored images to Grayscale with Pure CSS

Quick ways to turn colorful image to grayscale mode in CSS without using even a bit of JavaScript.

Convert colored images to Grayscale with Pure CSS

Ever tried turning an image into grayscale in CSS? Can it be doable? Yes. With the help of filters.

CSS3 Filters allow you to desaturate an image in the browser. Before these magical filters, there were three popular ways to convert images into Black & White:

  •     JavaScript Image processing libraries like Pixastic
  •     PHP GD library filters, on the web (server-side)
  •     Image editing program like PhotoShop, off the web

Note that the second and the third ways involves the actual conversion of the images. Its okay with the image editing software on your computer, but can be pretty expensive on the server-side.

But why actually convert images to grayscale for web use? Better use JavaScript to visually-process images in the browser? Better use CSS filters.

Using CSS3 filters to make images grayscale is very easy and also avoids using any script libraries.

Demo | Read the full tutorial