Brightness regulation UI design

Developer
Nick Colley
Size
2,713 Kb
Views
20,240
  1. Brightness regulation UI design Previews
  2. Brightness regulation UI design HTML Codes
  3. Brightness regulation UI design CSS Codes

How do I make an brightness regulation ui design?

Attempted to recreate http://dribbble.com/shots/1068999-Brightness-regulation-UI-design-PSD. What is a brightness regulation ui design? How do you make a brightness regulation ui design? This script and codes were developed by Nick Colley on 12 November 2022, Saturday.

Brightness regulation UI design Previews
IQ Test

Brightness regulation UI design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Brightness regulation UI design</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box; }
html { height: 100%; background: #c0c0c8; background: linear-gradient(#c0c0c8, #828290);
}
.modal { margin: 10% auto; width: 25%; border-top: 1px solid #fff; border-bottom: 1px solid #a6a6b2; border-radius: 10px; background: #f1f1f3; background: linear-gradient(#f1f1f3, #e4e4e8); box-shadow: 0 10px 25px -10px rgba(0,0,0,.9);
}
input { position: relative; appearance:none !important; height: 18px; width: 80%; margin: 8% 10% 5%; border: 5px inset #FFF; border-radius: 10px; color: #aeaeb8; font-size: 2em; background: #fddd3b; background: linear-gradient(#fddd3b, #f19104); box-shadow: 0 3px 3px rgba(0,0,0,.4) inset;
}
input::before { position: absolute; top: -160%; left: -12%; content: '☀'; color: #CCC;
}
input::after { position: absolute; top: -160%; right: -12%; content: '☀';
} input::-webkit-slider-thumb{ appearance:none !important; height: 34px; width: 34px; border-top: 1px solid #FFF; border-bottom: 1px solid #a5a6b1; border-radius: 50%; background: #f0f0f2; background: linear-gradient(#f0f0f2, #c2c3cb); box-shadow: 0 5px 8px rgba(0,0,0,.2);
} input::-webkit-slider-thumb::before{ position: relative; margin: 3px auto; display: block; content: ''; height: 24px; width: 24px; border-radius: 50%; background: #c3c3cb; background: linear-gradient(#c3c3cb, #efeff1);
}
hr { border-top: 1px solid #c3c3cb; border-bottom: 1px solid #FFF;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="modal"> <input type="range" /> <hr/>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Brightness regulation UI design - Script Codes CSS Codes

* { box-sizing: border-box; }
html { height: 100%; background: #c0c0c8; background: linear-gradient(#c0c0c8, #828290);
}
.modal { margin: 10% auto; width: 25%; border-top: 1px solid #fff; border-bottom: 1px solid #a6a6b2; border-radius: 10px; background: #f1f1f3; background: linear-gradient(#f1f1f3, #e4e4e8); box-shadow: 0 10px 25px -10px rgba(0,0,0,.9);
}
input { position: relative; appearance:none !important; height: 18px; width: 80%; margin: 8% 10% 5%; border: 5px inset #FFF; border-radius: 10px; color: #aeaeb8; font-size: 2em; background: #fddd3b; background: linear-gradient(#fddd3b, #f19104); box-shadow: 0 3px 3px rgba(0,0,0,.4) inset;
}
input::before { position: absolute; top: -160%; left: -12%; content: '☀'; color: #CCC;
}
input::after { position: absolute; top: -160%; right: -12%; content: '☀';
} input::-webkit-slider-thumb{ appearance:none !important; height: 34px; width: 34px; border-top: 1px solid #FFF; border-bottom: 1px solid #a5a6b1; border-radius: 50%; background: #f0f0f2; background: linear-gradient(#f0f0f2, #c2c3cb); box-shadow: 0 5px 8px rgba(0,0,0,.2);
} input::-webkit-slider-thumb::before{ position: relative; margin: 3px auto; display: block; content: ''; height: 24px; width: 24px; border-radius: 50%; background: #c3c3cb; background: linear-gradient(#c3c3cb, #efeff1);
}
hr { border-top: 1px solid #c3c3cb; border-bottom: 1px solid #FFF;
}
Brightness regulation UI design - Script Codes
Brightness regulation UI design - Script Codes
Home Page Home
Developer Nick Colley
Username nickcolley
Uploaded November 12, 2022
Rating 4
Size 2,713 Kb
Views 20,240
Do you need developer help for Brightness regulation UI design?

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!

Nick Colley (nickcolley) Script Codes
Name
Music
Chrome Bookmark Bar
Flickering TV
Banner hover test
Subtle Animation Example
Raincoat PC
Wip elementary os navbar
Close animation
Curl Dropshadow
Henry Homesweet Boxmodel
Create amazing Facebook ads 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!