Glowing Translucent Marble
Shows how to apply various box-shadows together on a single element to create a colorful glow effect.
Made with: HTML,CSS
![Glowing Translucent Marble](https://img.cssmix.net/img/2022/7/glowing-translucent-marble_2986.webp)
![Circular Menu](https://img.cssmix.net/img/2022/9/2320_circular-menu.webp)
Pixel Art Hellboy
One element, pure CSS, scalable pixel art Hellboy.
Made with: HTML,CSS (SCSS)
![Pixel Art Hellboy](https://img.cssmix.net/img/2022/7/pixel-art-hellboy_3991.webp)
Snake Game With Obelisk.Js
The movement is relative to the snake, so you use only left and right keys.
Made with: HTML,CSS,JS
![Snake Game With Obelisk.Js](https://img.cssmix.net/img/2022/7/snake-game-with-obelisk.js_5926.webp)
Minimalistic Form
Simple and beautiful contact form. Useful and easy to modify.
Made with: HTML,CSS
![Minimalistic Form](https://img.cssmix.net/img/2022/7/minimalistic-form_2442.webp)
Pure Css Counter
Counting up with ::before & ::after content. A pure CSS counter is probably completely useless...but it is possible.
Made with: HTML,CSS (SCSS)
![Pure Css Counter](https://img.cssmix.net/img/2022/10/1451_pure-css-counter.webp)
Corner Ribbons
Custom styles like colors work with simple class changes.
Made with: HTML,CSS
![Corner Ribbons](https://img.cssmix.net/img/2022/7/corner-ribbons_4239.webp)
Frosted Glass Effect Using Filter Effects
Use a filter to blur an image for the frosted glass effect.
Made with: HTML,CSS,JS
![Frosted Glass Effect Using Filter Effects](https://img.cssmix.net/img/2022/9/2657_frosted-glass-effect-using-filter-effects.webp)
Html And Css Credit Card
A simple credit card (looks more or less like Visa). HTML and CSS only. No images.
Made with: HTML,CSS (Less)
![Html And Css Credit Card](https://img.cssmix.net/img/2022/7/html-and-css-credit-card_2491.webp)
Hexagonal Button
Experimenting hexagons in CSS3 and how to bring motion to them.
Made with: HTML (Pug),CSS (SCSS)
![Hexagonal Button](https://img.cssmix.net/img/2022/7/hexagonal-button_3194.webp)
![Flappy Text](https://img.cssmix.net/img/2022/7/flappy-text_5771.webp)
Humble <Hr>
A very simple and subtle approach to <hr>s with an .activated state. Added label siblings to show additional information.
Made with: HTML,CSS,JavaScript
![Humble <Hr>](https://img.cssmix.net/img/2022/7/humble-<hr>_5541.webp)
![Color Swatch](https://img.cssmix.net/img/2022/9/2429_color-swatch.webp)
![Hr Example](https://img.cssmix.net/img/2022/7/hr-example_5543.webp)
Knight Rider Hr
Single element hr with kitt and karr light bar effect.
Made with: HTML,CSS
![Knight Rider Hr](https://img.cssmix.net/img/2022/9/5544_knight-rider-hr.webp)
The Humble Hr
Uses CSS counters. Base-64, CSS3 animations. Pretty cheesy at the moment but this is more to demonstrate what you can do without compromising semantics and using only a single element to do quite a lot.
Made with: HTML,CSS (SCSS)
![The Humble Hr](https://img.cssmix.net/img/2022/7/the-humble-hr_5545.webp)
Negative Triangle Sass Mixin
Create negative triangles with this SASS mixin that leverages the power of the pseudo elements.
Made with: HTML,CSS (SCSS)
![Negative Triangle Sass Mixin](https://img.cssmix.net/img/2022/7/negative-triangle-sass-mixin_5123.webp)
A Bit Of Elegance
The <hr> element is used to add some finesse to a responsive and beautifully typeset article.
Made with: HTML (Haml),CSS (SCSS),JS (CoffeeScript)
![A Bit Of Elegance](https://img.cssmix.net/img/2022/7/a-bit-of-elegance_5547.webp)