Freebie: Cinema Icon Set (SVG)
A free cinema themed icon set with 200 vector icons (SVG) in two styles: Windows 10 and Flat Color. An exclusive freebie for Codrops readers made by the Icons8 Team.
All Posts
Browse through all articles, tutorials, roundups, and experiments on Codrops.
Styling SVG <use> Content with CSS
In Articles, by Sara Soueidan
An in-depth article on how to style the contents of the SVG <use> element and overcome some challenges it brings.
Freebie: “Cardio” One Page Website Template
In Freebies, by PHI RHYTHMUS
A clean and modern one page website template built with Bootstrap. The responsive HTML template has a gym related theme but can be easily fitted to any kind of content.
Playful Interaction for Draggable Elements
In Playground, by Manoela Ilic
A little playful interaction idea where we add some bounciness to a draggable element and animate it depending on its position.
Zoom Slider
In Blueprints, by Manoela Ilic
A simple content slider with depth-like zoom functionality for a predefined area in each slide.
Card Expansion Effect with SVG clipPath
In Playground, by Claudio Calautti
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
Filterable Product Grid
In Blueprints, by Manoela Ilic
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.
Color Extraction Effect
In Playground, by Manoela Ilic
A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.
Image Tilt Effect
In Playground, by Manoela Ilic
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 effect.
Product Comparison Layout & Effect
In Blueprints, by Manoela Ilic
A basic responsive product grid layout with comparison functionality and a slide-in effect.
Inspiration for Text Styles and Hover Effects
In Playground, by Manoela Ilic
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 Manoela Ilic
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 Manoela Ilic
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 Manoela Ilic
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
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
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
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
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.
