481 views
1.ch, .ch:before, .ch:after { 2 transition: all 0.3s ease-in-out; 3} 4 5.ch { 6 background-color: rgb(27,123,145); 7 border-radius: 0.2em; 8 box-shadow: 0 0.05em 0 0.05em rgba(0,0,0,0.3) inset; 9 font-size: 20px; 10 overflow: hidden; 11 position: relative; 12 width: 3em; 13 height: 1.5em; 14 -webkit-appearance: none; 15 -moz-appearance: none; 16 appearance: none; 17 z-index: 0; 18} 19 20.ch:before, .ch:after { 21 content: ""; 22 display: block; 23 position: absolute; 24} 25 26.ch:before { 27 background-color: currentColor; 28 border-radius: 0.125em; 29 box-shadow: 0 0 0 0.05em inset, 30 -0.12em -0.12em 0 rgb(109,148,184) inset, 31 -0.4em -0.3em 0 0.05em inset, 32 0.12em 0.12em 0 rgb(255,255,255) inset; 33 color: rgb(149,188,224); 34 opacity: 0.9; 35 bottom: 0; 36 left: 0.125em; 37 width: 1.25em; 38 height: 1.25em; 39 z-index: 2; 40} 41 42.ch:after { 43 background-image: /* white */radial-gradient(0.2em 0.5em at 38% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%), 44 radial-gradient(0.3em 0.8em at 52% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%), 45 radial-gradient(0.25em 0.4em at 67% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%), 46 /* yellow */ 47 radial-gradient(0.25em 0.7em at 36% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%), 48 radial-gradient(0.4em 1.2em at 52% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%), 49 radial-gradient(0.25em 0.6em at 70% 93%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%), 50 /* orange */ 51 radial-gradient(0.3em 0.8em at 32% 81%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%), 52 radial-gradient(0.5em 1.6em at 52% 95%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%), 53 radial-gradient(0.3em 0.9em at 74% 86%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%), 54 /* red-orange */ 55 radial-gradient(0.4em 1em at 25% 70%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%), 56 radial-gradient(0.7em 2.75em at 52% 100%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%), 57 radial-gradient(0.4em 1.2em at 79% 75%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%); 58 background-position: 100% 1.5em; 59 background-size: 1.5em 1.5em; 60 background-repeat: no-repeat; 61 border-radius: 0 0 0 0.1em / 0 0 0 0; 62 box-shadow: 0 0 0 0 rgb(169,208,244) inset; 63 bottom: 0; 64 left: 0; 65 width: 1.5em; 66 height: 1.5em; 67 z-index: 1; 68} 69/* Checked */ 70.ch:checked { 71 background-color: rgb(92,8,8); 72} 73 74.ch:checked:before { 75 border-radius: 50%; 76 transform: translate(1.5em,1.5em) rotate(45deg) scale(0.5); 77} 78 79.ch:checked:after { 80 background-position: 100% 0; 81 box-shadow: 0 -0.15em 0 0 rgb(169,208,244) inset; 82 width: 3em; 83} 84 85/* Other States */ 86.ch:focus { 87 /* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */ 88 outline: 0; 89}
JkHuger
JkHuger
MIT License