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