60's Braun Knob

Developer
Billy Crist
Size
2,527 Kb
Views
26,312
  1. 60's Braun Knob Previews
  2. 60's Braun Knob HTML Codes
  3. 60's Braun Knob CSS Codes

How do I make an 60's braun knob?

Dribbble rebound from this shot: http://dribbble.com/shots/597337-Braun-UI . What is a 60's braun knob? How do you make a 60's braun knob? This script and codes were developed by Billy Crist on 04 October 2022, Tuesday.

60's Braun Knob Previews
IQ Test

60's Braun Knob - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>60's Braun Knob</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="knob-inset"> <div class="knob"></div>
</div>
</body>
</html>

60's Braun Knob - Script Codes CSS Codes

html, body { height: 100%;
}
body { margin: 0; background: linear-gradient(225deg, #f6f6f6, #dedede);
}
.knob-inset { position: relative; top: 50%; margin: -5.5em auto; border-radius: 50%; width: 11em; height: 11em; background: linear-gradient(#d6d6d6, #f5f5f5);
}
.knob { position: absolute; width: 10em; height: 10em; top: 0.5em; left: 0.5em; cursor: pointer; -webkit-backface-visibility: hidden; transition: 400ms ease-out; border-radius: 50%; background: linear-gradient(90deg, #d4cfc3 10%, #bab19e 40.8%, #cfc9bc 42%, #cfc9bc 58%, #ebe8e3 59.2%, #d4cfc3 90%); box-shadow: 0 0.1em 0.2em 0 rgba(235, 232, 227, 0.9) inset, 0 -0.1em 0.3em 0 rgba(235, 232, 227, 0.3) inset, 0 0.08em 0.3em 0 rgba(0, 0, 17, 0.3), 0.5em 0 1em 0 rgba(235, 232, 227, 0.5) inset, -0.5em 0 1em 0 rgba(186, 177, 158, 0.3) inset, 0 4em 1em -3.5em rgba(0, 0, 34, 0.3);
}
.knob::before { position: absolute; content: ''; left: 4.86em; width: 0.3em; height: 1.7em; border-radius: 0 0 0.2em 0.2em; background: #b44; box-shadow: -0.05em 0 0.1em 0 #ebe8e3, -0.05em 0 0.1em 0 rgba(0, 0, 0, 0.4) inset;
}
.knob:hover { transform: rotate(10deg); -webkit-transform: rotate(10deg);
}
60's Braun Knob - Script Codes
60's Braun Knob - Script Codes
Home Page Home
Developer Billy Crist
Username billyysea
Uploaded October 04, 2022
Rating 3.5
Size 2,527 Kb
Views 26,312
Do you need developer help for 60's Braun Knob?

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!

Billy Crist (billyysea) Script Codes
Name
Switches
DMND
SuprLiTE CSS Arrows
A Simple, Fashionable, Loader
Hotel Booking ..in progress
A Music Player
A Bouncy Menu Toggle
Camera
Location Pin Point
Mobile Twitter Log-in Design
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!