Blurred Video Effect With Css Filter

9.11.2019

Made with: HTML (Pug),CSS (Stylus)

View Code

PlaceholderBlurred Video Effect With Css Filter

Organic Onboarding

20.05.2019

CSS & JS content slider with blended gradient background.

Made with: HTML,CSS (SCSS),JS

View Code

PlaceholderOrganic Onboarding

Css Filter Cards

5.05.2019

Made with: HTML,CSS

View Code

PlaceholderCss Filter Cards

Feturbulence, Fecolormatrix, Fedisplacementmap

5.08.2018

Made with: HTML,CSS (SCSS)

View Code

Feturbulence, Fecolormatrix, Fedisplacementmap

Concept Img Loader Using Clip-Path + Filter

28.02.2018

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)

View Code

PlaceholderConcept Img Loader Using Clip-Path + Filter

Gooey Button Hover Effect With Svg Filters & Css

8.08.2017

Uses the "gooey" SVG filter on top of a button element, and pseudo-elements with hover transitions for "bubbles".

Made with: HTML,CSS

View Code

PlaceholderGooey Button Hover Effect With Svg Filters & Css

Motion Blur Effect Using Svg Filters

26.07.2017

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

View Code

PlaceholderMotion Blur Effect Using Svg Filters

Duotone Calendar

29.06.2017

Duotone image with SVG filter.

Made with: HTML,CSS (Stylus),JS

View Code

Duotone Calendar

Frosted Glass Card Overlay

23.06.2017

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)

View Code

PlaceholderFrosted Glass Card Overlay

Spotify Colorizer Effects Using Css Blend Modes

7.01.2017

Use pure CSS to combine mix-blend-mode and filter to achieve Spotify-style "colorizer" effects.

Made with: HTML,CSS

View Code

PlaceholderSpotify Colorizer Effects Using Css Blend Modes

Simple Css Image Filters

28.11.2016

Made with: HTML,CSS

View Code

PlaceholderSimple Css Image Filters

Animated Svg Turbulence Filter

9.11.2016

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

PlaceholderAnimated Svg Turbulence Filter

Simple Parallax Header With Blur

5.04.2016

Made with: HTML,CSS (SCSS),JS

View Code

Simple Parallax Header With Blur

Animated Svg Filter Fx

24.12.2015

Made with: HTML,CSS,JS

View Code

PlaceholderAnimated Svg Filter Fx

Frosted Glass Effect Using Filter Effects

20.03.2014

Use a filter to blur an image for the frosted glass effect.

Made with: HTML,CSS,JS

View Code

PlaceholderFrosted Glass Effect Using Filter Effects

Transitioned Css Filter Card

8.02.2014

Made with: HTML,CSS

View Code

Transitioned Css Filter Card

Rollover Css Blur Filter Image Gallery

3.05.2013

Utilizing CSS transitions & transforms and the CSS blur filter.

Made with: HTML (Haml),CSS (Less)

View Code

PlaceholderRollover Css Blur Filter Image Gallery

Css-Filter (Blur) On Image-Caption

9.03.2013

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

View Code

Css-Filter (Blur) On Image-Caption