Cool Checkbox With Svg
A custom checkbox that makes use of SVG to animate the tick inside of it.
Made with: HTML/Pug
![Cool Checkbox With Svg](https://img.cssmix.net/img/2022/7/cool-checkbox-with-svg_2275.webp)
![Vue Progress Scroll](https://img.cssmix.net/img/2022/7/vue-progress-scroll_6648.webp)
Responsive Sidebar/Navbar
Vertical/Horizontal responsive sidebar/navbar.
Made with: HTML,CSS
![Responsive Sidebar/Navbar](https://img.cssmix.net/img/2022/7/responsive-sidebar-navbar_5604.webp)
Blockquote, Flexbox, Rgba, Before Content
Experimenting with various CSS techniques to help beginners experiment with positioning, colors, transparency, and Flexbox.
Made with: HTML,CSS
![Blockquote, Flexbox, Rgba, Before Content](https://img.cssmix.net/img/2022/7/blockquote,-flexbox,-rgba,-before-content_4128.webp)
Dynamic Newspaper W/Css Grid
Automatically loads latest stories on refresh. Layout is done with CSS Grid. Built with HTML5, CSS3, JavaScript, jQuery and the News API.
Made with: HTML
![Dynamic Newspaper W/Css Grid](https://img.cssmix.net/img/2022/7/dynamic-newspaper-w-css-grid_3711.webp)
Groovy Css Effect
1960's font effect using CSS text-shadow property along with SASS function and mixins to keep code DRY.
Made with: HTML (Pug),CSS (SCSS)
![Groovy Css Effect](https://img.cssmix.net/img/2022/7/groovy-css-effect_4884.webp)
Hover Buttons
Experimenting with the CSS mix-blend-mode property.
Made with: HTML (Pug),CSS (SCSS)t
![Hover Buttons](https://img.cssmix.net/img/2022/7/hover-buttons_1910.webp)
Sticky Navigation Menu With Smooth Scrolling
It's basically a template with couple of features like that are invoked on scroll - Shrink Header, addition of drop shadow. Other than that smooth scroll feature is also added to logo(scroll top top) and smooth scroll to section on clicking menu item.
Made with: HTML (Pug),CSS (SCSS),JS
![Sticky Navigation Menu With Smooth Scrolling](https://img.cssmix.net/img/2022/9/6578_sticky-navigation-menu-with-smooth-scrolling.webp)
![Flyout Tooltip](https://img.cssmix.net/img/2022/7/flyout-tooltip_5081.webp)
![Css Toggle Switch](https://img.cssmix.net/img/2022/7/css-toggle-switch_2276.webp)
Toggle Function & Smooth Scroll Pure Html & Css
Grid layout + details & summary + scroll-behavior. All in pure CSS3.
Made with: HTML,CSS
![Toggle Function & Smooth Scroll Pure Html & Css](https://img.cssmix.net/img/2022/7/toggle-function-&-smooth-scroll-pure-html-&-css_5468.webp)
![Pricing Table Ui](https://img.cssmix.net/img/2022/7/pricing-table-ui_4703.webp)
![Masking Path Animation](https://img.cssmix.net/img/2022/7/masking-path-animation_4773.webp)
![Magic Burrito](https://img.cssmix.net/img/2022/9/3592_magic-burrito.webp)
![The Social Drawer](https://img.cssmix.net/img/2022/7/the-social-drawer_4454.webp)
![Emoji Checkbox](https://img.cssmix.net/img/2022/7/emoji-checkbox_2277.webp)
![Snake Highlight](https://img.cssmix.net/img/2022/7/snake-highlight_3633.webp)
Snake Highlight
Slithering highlight in login form with anime.js.
Made with: HTML,CSS,JavaScript
![Snake Highlight](https://img.cssmix.net/img/2022/7/snake-highlight_168.webp)
![Bootstrap Profile Header Card](https://img.cssmix.net/img/2022/7/bootstrap-profile-header-card_1058.webp)
![Letters Effect](https://img.cssmix.net/img/2022/7/letters-effect_4840.webp)