Radio by Subaashbala
#e8e8e8
1.radio-input { 2 position: relative; 3} 4.radio-input-path { 5 position: relative; 6 width: 20em; /* width of the container holding the radiobutton and the label */ 7 aspect-ratio: 1; 8 border-radius: 50%; 9 display: flex; 10 flex-direction: column; 11} 12.radioContainer { 13 position: absolute; 14 display: flex; 15 flex-direction: column; 16 justify-content: center; 17 align-items: center; 18 margin: 1em; 19} 20.radioContainer label { 21 font-size: 0.85em; 22 font-weight: 900; 23 cursor: pointer; 24} 25.radio-input-path input[type="radio"] { 26 -webkit-appearance: none; 27 -moz-appearance: none; 28 appearance: none; 29 width: 0.5em; 30 height: 0.5em; 31 border-radius: 50%; 32 background: #000; 33 transform-origin: bottom center; 34 outline: none; 35} 36.radioContainer1 { 37 left: 0; 38 top: 25%; 39 transform: rotateZ(-45deg); 40} 41.radioContainer5 { 42 right: 0; 43 top: 25%; 44 transform: rotateZ(45deg); 45} 46.radioContainer2 { 47 left: 15%; 48 top: 5%; 49 transform: rotateZ(-25deg); 50} 51.radioContainer4 { 52 right: 15%; 53 top: 5%; 54 transform: rotateZ(25deg); 55} 56.radioContainer3 { 57 left: 44%; 58 top: -5%; 59 transform: rotateZ(0deg); 60} 61 62/* The circular thing that rotates */ 63.knob { 64 width: 13em; 65 aspect-ratio: 1; 66 border-radius: 50%; 67 top: 25%; 68 left: 50%; 69 position: absolute; 70 border: 3px solid black; 71 outline: 3px solid gray; 72 background: #cfc9bd; 73 overflow: hidden; 74 transform: translateX(-50%); 75 transform-origin: center center; 76 transition: transform 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 77} 78.center { 79 height: 100%; 80 width: 2.25em; 81 position: relative; 82 left: 50%; 83 top: 50%; 84 background-color: #cfc9bd; 85 border-radius: 7px; 86 outline: 1px solid rgba(255, 255, 255, 0.377); 87 transform: translate(-50%, -50%); 88 box-shadow: 15px 0px 35px rgba(255, 255, 255, 0.474), 89 -15px 0px 40px 5px rgba(128, 128, 128, 0.563), 90 inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226); 91 transition: box-shadow 100ms linear; 92} 93.center::after { 94 content: ""; 95 position: absolute; 96 width: 3px; 97 height: 25px; 98 background-color: black; 99 left: 50%; 100 top: 1%; 101 transform: translateX(-50%); 102} 103 104/* Adjust rotateZ if the knob rotation is away from the label */ 105.radio-input-path:has(.radio1:checked) ~ .knob { 106 transform: translateX(-50%) rotateZ(-60deg); 107} 108.radio-input-path:has(.radio2:checked) ~ .knob { 109 transform: translateX(-50%) rotateZ(-35deg); 110} 111.radio-input-path:has(.radio3:checked) ~ .knob { 112 transform: translateX(-50%) rotateZ(0deg); 113} 114.radio-input-path:has(.radio4:checked) ~ .knob { 115 transform: translateX(-50%) rotateZ(35deg); 116} 117.radio-input-path:has(.radio5:checked) ~ .knob { 118 transform: translateX(-50%) rotateZ(60deg); 119} 120 121/* Dynamic shadow adustment based on the knob position */ 122.radio-input-path:has(.radio1:checked) ~ .knob > .center { 123 box-shadow: 15px 0px 35px rgba(255, 255, 255, 0.74), 124 -15px 0px 40px 5px rgb(128, 128, 128), 125 inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226); 126} 127.radio-input-path:has(.radio2:checked) ~ .knob > .center { 128 box-shadow: 15px 0px 35px rgba(255, 255, 255, 0.74), 129 -15px 0px 40px 5px rgb(128, 128, 128, 0.574), 130 inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226); 131} 132.radio-input-path:has(.radio4:checked) ~ .knob > .center { 133 box-shadow: 15px 0px 35px rgba(128, 128, 128, 0.63), 134 -15px 0px 40px 5px rgba(255, 255, 255, 0.574), 135 inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226); 136} 137.radio-input-path:has(.radio5:checked) ~ .knob > .center { 138 box-shadow: 15px 0px 35px rgb(128, 128, 128), 139 -15px 0px 40px 5px rgba(255, 255, 255, 0.74), 140 inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226); 141} 142
482 views
482 views
MIT License