Organic Onboarding
CSS & JS content slider with blended gradient background.
Made with: HTML,CSS (SCSS),JS
Concept Img Loader Using Clip-Path + Filter
Continuing with clip-path experiments, here's the img loader version that unblurs and colors an img to show loading progress.
Made with: HTML (Pug),CSS (Stylus)
Gooey Button Hover Effect With Svg Filters & Css
Uses the "gooey" SVG filter on top of a button element, and pseudo-elements with hover transitions for "bubbles".
Made with: HTML,CSS
Motion Blur Effect Using Svg Filters
This is an experiment that simulates a motion blur effect every time a slide is switched. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Although the effect does not require any Javascript to properly work, in this example Javascript is only used for the slider functionality.
Made with: HTML,CSS (SCSS),JS
Frosted Glass Card Overlay
Frosted glass effect using CSS3 filter property. The card's title and description slide up on hover, blurring the card's background behind them.
Made with: HTML,CSS (SCSS)
Spotify Colorizer Effects Using Css Blend Modes
Use pure CSS to combine mix-blend-mode and filter to achieve Spotify-style "colorizer" effects.
Made with: HTML,CSS
Frosted Glass Effect Using Filter Effects
Use a filter to blur an image for the frosted glass effect.
Made with: HTML,CSS,JS
Rollover Css Blur Filter Image Gallery
Utilizing CSS transitions & transforms and the CSS blur filter.
Made with: HTML (Haml),CSS (Less)
Css-Filter (Blur) On Image-Caption
Two variations of hover effects on image, with the CSS-Filter (blur) on (the :before pseudo element of) an image-caption.
Made with: HTML,CSS,JS
