Filterable Product Grid
In Blueprints by Mary Lou on
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.
Archive
Here you can browse through all posts from the categories articles, tutorials and playground.
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
Freebie: Flat Icon Pack (AI, SVG, EPS, PSD, PNG)
A set of 40 carefully-crafted and pixel-perfect icons from the Squid.ink Flat Icon Pack exclusively for Codrops readers. The icons come in all commonly used formats.