Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’

This slider, as seen on the landing page of the FWA, plays with 3D perspective and performs some interesting animations on the right-hand side images. CSS Animations We are using 12 different animations for showing and hiding the items of a slide. The animations are defined by randomly adding data-attributes called data-effect-in and data-effect-out for every slide. Tilted Items The perspective vi

What is the role of a web designer nowadays? An article about the changes that came with the awareness of responsive web design and the new workflow of designing in the browser. The Web of yesterday When I started doing this we were what you’d call a petit-comitè. I called myself a developer and worked with a great graphic designer, one of a kind. Our roles were crystal clear back then. Seasons ca

Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation. Please note that pseudo-element transitions don’t work in every browser. Best viewed in Chrome and Firefo

A showcase collection of various page transition effects using CSS animations. Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspecti

Learn how to build an interactive animated infographic using SVG, CSS and JavaScript. One of the less talked about features of newer browsers is increasing support for the SVG file format. If you are unfamiliar with SVG, it stands for Scalable Vector Graphics. Unlike raster image formats like PNG, JPG or GIF, the vector graphics contained within SVG files are completely scalable to any size and wi

A little trick on how to make captions of thumbnails or items “sticky” in order to stay visible in the window or viewport. When creating thumbnail grids, we usually want to show image captions on hover to provide more information about the item. Image captions are usually shown in a very specific part of the thumbnail, either on the top, the middle or the bottom. When adding captions to the bottom

Let’s dig into the very fundamentals of building a color scheme for your web design: what colors fit to which context, how do combinations work and what color scheme concepts are there? Building a color scheme is a lot like building a house or building; you need to start with a solid foundation, build your structure and then finish it off with a good coat of paint. There is a ton of tools out ther

A tutorial about how to create an overlay effect to show some more details of an item or image. The effect is CSS-only and uses a combination of the :checked pseudo-class with the sibling combinator. In this tutorial we’ll create a little overlay effect with CSS using a combination of the :checked pseudo-class with sibling combinators. The idea is to make an image or element clickable and transiti

Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones. Today I want to share a little subtle effect with you: enhancing required fields in a form. Many web forms are designed in a minimal way, i.e. by only collecting the most necessary data from users. Just think of sign up forms where you don’t wa