Author: | bedimcode |
---|---|
Views Total: | 298 views |
Official Page: | Go to website |
Last Update: | December 20, 2021 |
License: | MIT |
Preview:

Description:
Skeuomorphism is a design style that takes cues from the physical world and uses them in digital interfaces.
Until the release of iOS 7, designers have been using skeuomorphism to create a more tactile user interface for digital devices.
In this article, we will use the HTML checkbox and CSS/SASS to create a Skeuomorphism-style toggle switch that uses real-world images and metaphors in design. Let’s get started.
See Also:
- 10 Best Toggle Switch JavaScript And CSS Libraries
- JavaScript/CSS Libraries For Neumorphism Design
- 50+ Best Neumorphic Design Freebies
How to use it:
1. Code the HTML for the skeuomorphism toggle switch.
<label class="skeuo__switch"> <input type="checkbox" class="skeuo__input"> <div class="skeuo__rail"> <span class="skeuo__circle"></span> </div> <span class="skeuo__indicator"></span> </label>
2. The main CSS styles.
:root { /* override the variables here */ --indicator-color: hsl(104, 94%, 50%); --body-color: hsl(233, 12%, 14%); --container-color: hsl(233, 12%, 20%); --container-color-light: hsl(233, 12%, 26%); } .skeuo__switch { height: 80px; background-color: var(--container-color); padding: 0 1.5rem; border-radius: .75rem; display: flex; align-items: center; cursor: pointer; } .skeuo__input { display: none; } .skeuo__rail { position: relative; width: 88px; height: 28px; background-color: var(--container-color-light); border-radius: 3rem; } .skeuo__circle { display: block; width: 36px; height: 36px; background: radial-gradient(circle at 33%, #d7d8da 0%, #5d5e65 50%, rgba(255, 255, 255, 0) 100%); border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: 0; transition: transform .4s; } .skeuo__indicator { width: 12px; height: 12px; background-color: var(--container-color-light); border-radius: 50%; margin-left: 1.5rem; transition: .4s; }
3. Code the CSS for the toggle animation effects.
.skeuo__input:checked ~ .skeuo__rail .skeuo__circle { transform: translate(52px, -50%); } .skeuo__input:checked ~ .skeuo__indicator { background-color: var(--indicator-color); }