About the author

I'm a web designer and a front-end developer. I particularly like writing tutorials (maybe because I was a prof in my previous life...). My other speciality is creating seamless patterns for Photoshop and Illustrator. I'm Polish, living with Joe Vains in the center of Paris. Follow @PeHaa on twitter and on dribbble.

Website

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

Tutorials
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

Tutorials
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

Tutorials
Sweet and subtle free photoshop patterns

Sweet and Subtle Free Hearts PSD Patterns

This time I share with you a pack of sweet and subtle seamless photoshop patterns. Full of hearts, they may be especially useful for Valentine's Day. Enjoy!

Read more

Hearts!
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

Tutorials
Pepsigons - 50 abstract geometric backgrounds

50 Abstract Geometric Wallpapers

This time we prepared for you a pack of fifty 1920px x 1200px background images. You can use them as desktop wallpapers or simply as backgrounds in your designs. Free for personal and commercial use. Enjoy !

Read more

Wallpapers
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

Tutorials
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

Tutorials
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

Tutorials
patterns

Ready-to-use subtle interlacing patterns

You'll find here a pack of seamless repetitive interlacing patterns. They are saved for the web as tile files as well as gathered in a .pat file for Photoshop users. Free for personal and commercial use. Enjoy!

Read more

PS Patterns
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

Tutorials
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

Tutorials