CSS Dark Neon LED Volume Dial

Developer
Luke Watts
Size
3,893 Kb
Views
50,600
  1. CSS Dark Neon LED Volume Dial Previews
  2. CSS Dark Neon LED Volume Dial HTML Codes
  3. CSS Dark Neon LED Volume Dial CSS Codes

How do I make an css dark neon led volume dial?

Yet another 100% CSS control dial...thingy. The LED was NOT easy to do. especially the glow on the inside. Even now it's not right but it'll have to do. If the glow was all around it would be fine but the "slice of pie" shape means there's that sharp edge to deal with. If I think of a better way I'll come back. As it is 4 elements for this effect ain't so bad. I'd challenged myself to do it in three but z-index on ::before and ::afters won't behave. Oh well.. What is a css dark neon led volume dial? How do you make a css dark neon led volume dial? This script and codes were developed by Luke Watts on 13 August 2022, Saturday.

CSS Dark Neon LED Volume Dial Previews
IQ Test

CSS Dark Neon LED Volume Dial - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Dark Neon LED Volume Dial</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ring"> <div class="led"></div> <div class="inner-glow"></div> <div class="face"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS Dark Neon LED Volume Dial - Script Codes CSS Codes

*,
*::before,
*::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.all, .ring::before, .ring::after, .led::before, .led::after, .face::before, .face::after { content: ""; display: block; position: absolute;
}
html,
body { font-size: 100%; min-height: 100%;
}
body { background: #151917; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEyMTIxMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFjMjExZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #121212), color-stop(100%, #1c211f)); background: -moz-linear-gradient(top left, #121212, #1c211f); background: -webkit-linear-gradient(top left, #121212, #1c211f); background: linear-gradient(to bottom right, #121212, #1c211f);
}
.ring { height: 14em; width: 14em; margin: 4em auto; position: relative; z-index: -5; -moz-border-radius: 7em; -webkit-border-radius: 7em; border-radius: 7em; background: #050505; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1MDUwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA2MDYwOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #050505), color-stop(100%, #060609)); background: -moz-linear-gradient(top, #050505, #060609); background: -webkit-linear-gradient(top, #050505, #060609); background: linear-gradient(to bottom, #050505, #060609);
}
.led { height: 7em; width: 7em; position: absolute; top: 50%; z-index: -4; -moz-border-radius-bottomleft: 7em; -webkit-border-bottom-left-radius: 7em; border-bottom-left-radius: 7em; -moz-box-shadow: 0 0 2em #d7c6d4; -webkit-box-shadow: 0 0 2em #d7c6d4; box-shadow: 0 0 2em #d7c6d4; background-color: #d7c6d4;
}
.inner-glow { height: 6.72em; width: 6.72em; position: absolute; top: 50%; left: 0.3em; -moz-border-radius-bottomleft: 7em; -webkit-border-bottom-left-radius: 7em; border-bottom-left-radius: 7em; -moz-box-shadow: inset 0 0 2em rgba(215, 198, 212, 0.5), 0 0 2em rgba(215, 198, 212, 0.75); -webkit-box-shadow: inset 0 0 2em rgba(215, 198, 212, 0.5), 0 0 2em rgba(215, 198, 212, 0.75); box-shadow: inset 0 0 2em rgba(215, 198, 212, 0.5), 0 0 2em rgba(215, 198, 212, 0.75); background-color: transparent;
}
.face { height: 12.5em; width: 12.5em; position: absolute; top: 0.75em; left: 0.75em; -moz-border-radius: 6.5em; -webkit-border-radius: 6.5em; border-radius: 6.5em; background: #534b4d; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzNGI0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBiMDgwYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #534b4d), color-stop(100%, #0b080c)); background: -moz-linear-gradient(top, #534b4d, #0b080c); background: -webkit-linear-gradient(top, #534b4d, #0b080c); background: linear-gradient(to bottom, #534b4d, #0b080c); -moz-box-shadow: inset 1px -1px 10px rgba(215, 198, 212, 0.2); -webkit-box-shadow: inset 1px -1px 10px rgba(215, 198, 212, 0.2); box-shadow: inset 1px -1px 10px rgba(215, 198, 212, 0.2);
}
.face::before { height: 11.875em; width: 11.875em; top: 0.3125em; left: 0.3125em; -moz-border-radius: 6em; -webkit-border-radius: 6em; border-radius: 6em; background: #101312; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEwMTMxMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4MTExNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #101312), color-stop(100%, #181114)); background: -moz-linear-gradient(top right, #101312, #181114); background: -webkit-linear-gradient(top right, #101312, #181114); background: linear-gradient(to bottom left, #101312, #181114);
}
.face::after { height: 13.4375em; width: 13.4375em; top: -0.46875em; left: -0.46875em; z-index: -3; -moz-border-radius: 7em; -webkit-border-radius: 7em; border-radius: 7em; background: #171c1a; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE0MWYxYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzEzMTAxNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #141f1b), color-stop(100%, #131014)); background: -moz-linear-gradient(top, #141f1b, #131014); background: -webkit-linear-gradient(top, #141f1b, #131014); background: linear-gradient(to bottom, #141f1b, #131014);
}
CSS Dark Neon LED Volume Dial - Script Codes
CSS Dark Neon LED Volume Dial - Script Codes
Home Page Home
Developer Luke Watts
Username lukewatts
Uploaded August 13, 2022
Rating 3
Size 3,893 Kb
Views 50,600
Do you need developer help for CSS Dark Neon LED Volume Dial?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Luke Watts (lukewatts) Script Codes
Name
Style System
Footer Concept 02
AFFINITY4 SERVICES ANIMATION
OFF CANVAS MENU
A Pen by Luke Watts
Webkit Background Text Clip
Before and After Image Slider
Media Card
Pure CSS Dial
Custom Google Maps
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!