All posts in Tutorials

preview

One More Fancy Hover Effect

Let's celebrate the summer time! In this css tutorial we discuss one more fancy hover effect. We use :after pseudo-elements with custom data-attributes and css transitions. At the same time we feature the beautiful Summer Icon Pack by vector4free. Enjoy!

Read more

rb-preview

Css-only Alternative to the Select Element

In this tutorial, I will present you my alternative solution to the select form tag. It's css-only and it looks really nice. We will use a list of radio elements, styled as a drop-down list, that will look and behave similarly to the select element.

Read more

Social Font icons hover effect

Icon Fonts in Use with a Fancy Hover Effect

In this tutorial we will play a bit with icon fonts. Besides other advantages, this technique provides an easy way to have your icons look crisp on retina displays. We'll use a custom set of social icons generated with IcoMoon App. We will use css3 transitions and pseudo-elements to add a fancy effect on hover.

Read more

Lavalamp-like menu effect - css-only - tutorial preview

Css-only Lavalamp-like Fancy Menu Effect

In this tutorial we create a css-only sliding menu effect (also known as Lavalamp effect). No javascript, just css3 transitions and the general sibling combinator selector.

Read more

Small pleasures make my day - tutorial preview

Diagonal Thumbnails Gallery

We got used to standard grids and clear horizontal and vertical axes. No wonder that the eye-catching layouts based on the diagonal lines have become one of the recent trends in web design. In this tutorial we will create a very simple diagonal thumbnails gallery. We will use css3 2D-transforms and pseudo elements to display the diamond-shaped elements with a background image.

Read more

Merry scrolling with skrollr.js - tutorial preview

Merry Scrolling with skrollr.js

In this tutorial we'll use the skrollr.js plugin by Prinzhorn to create a funny Christmas card with some fancy scrolling animations. We'll show you how to easily add intriguing scrolling effects to your site - with no javascript skills required.

Read more

responsive-slider

How to Create a Responsive CSS-only Slider

In this tutorial we'll create a simple responsive home page with a header embellished with a carousel where photos slide from right to left. Our solution will not require javascript, we'll make our slideshow using css3 animations - supported nowadays by all major browsers.

Read more

3d-contact-form

Contact form with some fancy 3D effects

In this tutorial we will use css3 3D transforms to create a contact form that mimic a regular letter. You'll have to flip the envelope, note your (sender's) coordinates on its back lid, open the envelope, unfold the paper and write your message. We'll also make use of the :target pseudo-class so that no javascript is necessary.

Read more

From love for lavender - fancy scrolling effect

How to recreate the new e-bay site scrolling effect

In this tutorial we'll create a responsive one-page layout with a fancy scrolling effect. All of that with absolutely no javascript, pure css only.

Read more

Vector seamless intertwining knitting pattern

Create a vector intertwining knitting pattern – illustrator tutorial

In this tutorial we will create a simple elegant intertwining pattern. We'll make it as a repetitive seamless pattern and save it as a pattern swatch in Illustrator.

Read more