Animated Back Glow
Psuedo element + background gradient animation + blur.
Made with: HTML,CSS (SCSS)
![Animated Back Glow](https://img.cssmix.net/img/2022/7/animated-back-glow_2981.webp)
![Animated Back Glow](https://img.cssmix.net/img/2022/9/3041_animated-back-glow.webp)
Animated Back Glow
Psuedo element & background gradient animation & blur.
Made with: HTML,CSS (SCSS)
![Animated Back Glow](https://img.cssmix.net/img/2022/7/animated-back-glow_1520.webp)
![Material Card Transformation](https://img.cssmix.net/img/2022/9/6207_material-card-transformation.webp)
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
![Spotify Colorizer Effects Using Css Blend Modes](https://img.cssmix.net/img/2022/9/2652_spotify-colorizer-effects-using-css-blend-modes.webp)
Responsive 2048 Game
Responsive 2048 with mobile touch support in JavaScript.
Made with: HTML (Pug),CSS (SCSS),JS
![Responsive 2048 Game](https://img.cssmix.net/img/2022/7/responsive-2048-game_5666.webp)
Html And Css Snow Falling
Snows with HTML and random animations with SCSS.
Made with: HTML (Pug),CSS (SCSS)
![Html And Css Snow Falling](https://img.cssmix.net/img/2022/9/4443_html-and-css-snow-falling.webp)
Links With Marginalia Notes
A second attempt to create an accessible and more fully-responsive version of the link style used in https://thecorrespondent.com
Made with: HTML
![Links With Marginalia Notes](https://img.cssmix.net/img/2022/7/links-with-marginalia-notes_3480.webp)
Animated Wave Clipped By Text
Animated wave inside text with SVG. Image in the background and gradient filling the wave.
Made with: HTML,CSS
![Animated Wave Clipped By Text](https://img.cssmix.net/img/2022/7/animated-wave-clipped-by-text_4781.webp)
Slider Animation Effect
Leveraged CSS border-image & clip-path to create a slider animation effect.
Made with: HTML,CSS (SCSS),JS
![Slider Animation Effect](https://img.cssmix.net/img/2022/9/2352_slider-animation-effect.webp)
![2048 Simple Version](https://img.cssmix.net/img/2022/7/2048-simple-version_5667.webp)
![Ripple Animation On Input Type Radio And Checkbox](https://img.cssmix.net/img/2022/9/4260_ripple-animation-on-input-type-radio-and-checkbox.webp)
Css Responsive Full Screen Duo Layout With Animated Overlay
Using Flexbox and viewport units, we creat a fluid two column layout for a fictional shoe brand, then boost it with CSS animations and transitions to make the interactions more interesting and fun.
Made with: HTML,CSS,JS
![Css Responsive Full Screen Duo Layout With Animated Overlay](https://img.cssmix.net/img/2022/9/2729_css-responsive-full-screen-duo-layout-with-animated-overlay.webp)
![Gradient Buttons](https://img.cssmix.net/img/2022/7/gradient-buttons_3022.webp)
![Css 3D Hover World Places](https://img.cssmix.net/img/2022/10/3969_css-3d-hover-world-places.webp)
![Pure Css Text Reveal](https://img.cssmix.net/img/2022/9/4220_pure-css-text-reveal.webp)
Bootstrap Checkbox Buttons
Buttons that change the state of their own hidden checkboxes.
Made with: HTML,CSS,JS
![Bootstrap Checkbox Buttons](https://img.cssmix.net/img/2022/10/411_bootstrap-checkbox-buttons.webp)