Recently, I was working on a project where we needed an efficient solution to demonstrate some Lightroom presets applied to the photos. A before-after slider seemed to be a good solution here. Finally, I decided to code such a slider myself. That’s how Beer Slider was born. It’s written in vanilla JavaScript, but it can be […]
In his previous post JoeVains shared with you a pack of location icons. This post is for those who do not have much experience with customizing Google maps with Google Maps Javascript API.
I’ll show you how to generate a map and add markers using our location icons (you can also use your own if you wish). We’ll discuss improving user experience and browsers inconsistencies. 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.
