Card Expansion Effect with SVG clipPath
In Playground by Claudio Calautti on
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
Archive
Here you can browse through all posts from the categories articles, tutorials and playground.
Filterable Product Grid
In Blueprints by Mary Lou on
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.
Color Extraction Effect
In Playground by Mary Lou on
A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.
Image Tilt Effect
In Playground by Mary Lou on
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth ef
Product Comparison Layout & Effect
In Blueprints by Mary Lou on
A basic responsive product grid layout with comparison functionality and a slide-in effect.
Inspiration for Text Styles and Hover Effects
In Playground by Mary Lou on
A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.
Photography Website Concept
In Playground by Mary Lou on
A photography-inspired website layout with an expanding stack slider and a background image tilt effect.
Interactive Drag and Drop Coloring Concept
In Playground by Mary Lou on
A little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette.
Grid Item Animation Layout
In Playground by Mary Lou on
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.
Motion Blur Effect with SVG
In Tutorials by Lucas Bebber on
A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.
Prism Effect Slider with Canvas
In Tutorials by Claudio Calautti on
A tutorial on how to create a slider with a "prism" effect using HTML5 canvas globalCompositeOperation and a layering technique.
Creating a “Jump Loader” Animation with SVG and GSAP
In Tutorials by Chris Gannon on
Learn how to create a playful "Jump Loader" animation with SVG and GSAP.
Freebie: Organic Food Icon Set (AI, EPS, SVG, PNG)
In Freebies by Wojciech Zasina on
A set of 30 organic food icons that come in all common (vector-based) formats. The food icon set is perfect for modern food related projects.
Some More Inspiration for Text Input Effects
In News & Updates by Mary Lou on
A couple of more inspirational styles for text input effects including some new techniques and ideas.
Freebie: “Forkio” One Page Website Template
In Freebies by Team Codrops on
A responsive Bootstrap website template made by the folks from Pixel Buddha and PSD2HTML. The elegant one-page design is perfect for web dev, apps or software relate
Creative Gooey Effects
In Playground by Lucas Bebber on
A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components.
Freebie: Travel and Vacation Icon Set (AI, EPS, PSD)
A set of 36 colorful and versatile travel and vacation related icons. The icons have a flat design with a long shadow and they come in several vector formats.
Playful Trampoline Effect
A little playful content navigation effect that uses the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline. The demos are a tri