corenominal

Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: effects

Stack Motion Hover Effects image/svg+xml

The concept stems from the hover effect seen on Merci-Michel which has a really nice feel to it because of its fluidity. The idea is to show a stack behind the hovered thumbnail that has the same main color as the image and then animate the elements in a swift motion. We are using the JavaScript library anime.js for the animations.

I really like these effects, I think they look proper classy.

Use Cases for Fixed Backgrounds in CSS image/svg+xml

The background-attachment property has never seemed all that useful to me. I have always looked at it as some sort of old school design trick from the GeoCities days to get a repeating background to stay in place during scroll. Turns out a background with a fixed position can be much more useful than that.

Some nifty examples of the background-attachment CSS property. I really like how you can use this to achieve a fairly dramatic effect with relatively little effort.

Editing Images in CSS: Filters image/svg+xml

Consider a situation where you have to have high-contrast, blurred or brighter versions of particular images on your website. Prior to CSS filters, your only options were either to upload different versions of these images or manipulate the images with JavaScript.

Unless you want to manipulate the pixels in the original image, CSS filters provide an easy way out. Let’s begin this tutorial with a brief discussion of all available filters.

A nice guide to using CSS filters on images. See demo for testing browser compatibility.