UI

Developer
Ee Venn Soh
Size
3,031 Kb
Views
48,576
  1. UI Previews
  2. UI HTML Codes
  3. UI CSS Codes

How do I make an ui?

What is a ui? How do you make a ui? This script and codes were developed by Ee Venn Soh on 07 September 2022, Wednesday.

UI Previews
IQ Test

UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>UI</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ body{ height: 100%;
}
.switch{ width: 180px; height: 50px; position: absolute; top: 50%; left: 50%;
}
.switch input{ opacity: 0; z-index: 1000; cursor: pointer; width: 100%; height: 100%; position: absolute;
}
.switch label{ display: block; width: 100%; height: 100%; position: relative; background: #a5a39d; border-radius: 40px; box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5);
}
.switch label:after{ content: ""; position: absolute; z-index: -1; top: -8px; right: -8px; bottom: -8px; left: -8px; border-radius: inherit; background: linear-gradient(#f2f2f2, #ababab); box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.25);
}
.switch label:before{ content: ""; position: absolute; z-index: -1; top: -18px; right: -18px; bottom: -18px; left: -18px; border-radius: inherit; background: linear-gradient(#e5e7e6, #eee); box-shadow: 0 1px 0 rgba(255,255,255,0.5); -webkit-filter: blur(1px); /* Smooth trick */ filter: blur(1px); /* Future-proof */
}
.switch label i{ display: block; height: 100%; width: 60%; position: absolute; right: 40%; top: 0; z-index: 2; border-radius: inherit; background: linear-gradient(#f7f2f6, #b2ac9e); box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0,0,0,0.3), 0 5px 5px rgba(0,0,0,0.2);
}
.switch label i:after { content: ""; position: absolute; left: 15%; top: 25%; width: 70%; height: 50%; background: linear-gradient(#cbc7bc, #d2cbc3); border-radius: inherit;
}
.switch label i:before{ content: "off"; position: absolute; top: 50%; right: -50%; margin-top: -12px; color: rgba(0,0,0,0.4); font-style: normal; font-weight: bold; font-family: Helvetica, Arial, sans-serif; font-size: 24px; text-transform: uppercase; text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
}
.switch input:checked ~ label { /* Background */ background: #9abb82;
}
.switch input:checked ~ label i { /* Toggle */ left: auto; right: 0;
}
.switch input:checked ~ label i:before { /* On/off */ content: "on"; right: 115%; color: #82a06a; text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="switch"> <input type="checkbox"> <label><i></i></label>
</div>
</body>
</html>

UI - Script Codes CSS Codes

body{ height: 100%;
}
.switch{ width: 180px; height: 50px; position: absolute; top: 50%; left: 50%;
}
.switch input{ opacity: 0; z-index: 1000; cursor: pointer; width: 100%; height: 100%; position: absolute;
}
.switch label{ display: block; width: 100%; height: 100%; position: relative; background: #a5a39d; border-radius: 40px; box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5);
}
.switch label:after{ content: ""; position: absolute; z-index: -1; top: -8px; right: -8px; bottom: -8px; left: -8px; border-radius: inherit; background: linear-gradient(#f2f2f2, #ababab); box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.25);
}
.switch label:before{ content: ""; position: absolute; z-index: -1; top: -18px; right: -18px; bottom: -18px; left: -18px; border-radius: inherit; background: linear-gradient(#e5e7e6, #eee); box-shadow: 0 1px 0 rgba(255,255,255,0.5); -webkit-filter: blur(1px); /* Smooth trick */ filter: blur(1px); /* Future-proof */
}
.switch label i{ display: block; height: 100%; width: 60%; position: absolute; right: 40%; top: 0; z-index: 2; border-radius: inherit; background: linear-gradient(#f7f2f6, #b2ac9e); box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0,0,0,0.3), 0 5px 5px rgba(0,0,0,0.2);
}
.switch label i:after { content: ""; position: absolute; left: 15%; top: 25%; width: 70%; height: 50%; background: linear-gradient(#cbc7bc, #d2cbc3); border-radius: inherit;
}
.switch label i:before{ content: "off"; position: absolute; top: 50%; right: -50%; margin-top: -12px; color: rgba(0,0,0,0.4); font-style: normal; font-weight: bold; font-family: Helvetica, Arial, sans-serif; font-size: 24px; text-transform: uppercase; text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
}
.switch input:checked ~ label { /* Background */ background: #9abb82;
}
.switch input:checked ~ label i { /* Toggle */ left: auto; right: 0;
}
.switch input:checked ~ label i:before { /* On/off */ content: "on"; right: 115%; color: #82a06a; text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
}
UI - Script Codes
UI - Script Codes
Home Page Home
Developer Ee Venn Soh
Username vennsoh
Uploaded September 07, 2022
Rating 3
Size 3,031 Kb
Views 48,576
Do you need developer help for UI?

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!

Ee Venn Soh (vennsoh) Script Codes
Name
Blackout
Crazy Ball
Polygon Dodecahedron in CSS
Meteor Rain
Folding
CSS Pattern
A Pen by Ee Venn Soh
Smiley Egg
Create amazing video scripts 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!