Animated Ubuntu Touch-styled checkboxes

Developer
Eduard Mayer
Size
3,420 Kb
Views
40,480
  1. Animated Ubuntu Touch-styled checkboxes Previews
  2. Animated Ubuntu Touch-styled checkboxes HTML Codes
  3. Animated Ubuntu Touch-styled checkboxes CSS Codes
  4. Animated Ubuntu Touch-styled checkboxes JS Codes

How do I make an animated ubuntu touch-styled checkboxes?

Animated Ubuntu Touch-styled checkboxes http://www.youtube.com/watch?v=BZFcnxQlvZY&feature=player_detailpage#t=61s. What is a animated ubuntu touch-styled checkboxes? How do you make a animated ubuntu touch-styled checkboxes? This script and codes were developed by Eduard Mayer on 13 July 2022, Wednesday.

Animated Ubuntu Touch-styled checkboxes Previews
IQ Test

Animated Ubuntu Touch-styled checkboxes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Ubuntu Touch-styled checkboxes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html lang="en">
<head>	<meta charset="UTF-8">	<title>Ubuntu Touch Checkbox Snippet</title>	<meta author="Eduard Mayer">
</head>
<body>	<h2>Ubuntu Touch Checkboxes</h2>	<section class="pen check">	<span class="container">	<input type="checkbox" style="opacity:0" class="ubuntu-touch">	<label for="ubuntu-touch" class="state"></label>	<label for="ubuntu-touch" class="switch"></label>	</span>	</section>	<section class="credit">	<p>Code by <a href="http://twitter.com/vsxed" target="_blank" class="credit-link">Eduard Mayer</a></p>	<a href="https://github.com/vsxed/ubuntu-touch-checkbox" target="_blank" class="credit-link button">Fork it on Github</a>	</section>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Ubuntu Touch-styled checkboxes - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
body { padding: 3em 2em; font-family: 'Open Sans', Arial, sans-serif; font-size: 1em; margin: 0; padding: 0; line-height: 1; background: #333333;
}
h2 { text-align: center; color: #f0f0f0; font-weight: 400; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.165);
}
.pen { max-width: 400px ; width: 100%; margin: 50px auto 0; position: relative;
}
.credit { display: block; max-width: 400px; text-align: center; margin: 150px auto 0; padding: 0; font-size: 0.8em; color: #f0f0f0; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.credit p a,
.credit a { color: white; text-decoration: none; font-weight: 700;
}
.credit p a:hover,
.credit a:hover,
.credit p a:active,
.credit a:active { text-shadow: 0 0 5px rgba(255, 255, 255, 0.4); color: white;
}
.credit p a.button,
.credit a.button { padding: 6px 12px; margin-top: 10px; background: #1a1a1a; border-radius: 3px;
}
.credit p a.button:hover,
.credit a.button:hover { background: #4d4d4d;
}
.credit p:last-of-type { margin-bottom: 30px;
}
.check { text-align: center;
}
.container { width: 150px; height: 70px; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); display: block; position: relative; margin: 0 auto;
}
.state { width: 150px; height: 70px; left: 0; top: 0; position: absolute; background: #8a8787; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.state:after { content: ''; background: url('http://vsxed.github.io/ubuntu-touch-checkbox/img/sprite.png') 0 0 no-repeat; position: absolute; bottom: 18px; left: 25px; width: 30px; height: 30px;
}
.state:before { content: ''; background: url('http://vsxed.github.io/ubuntu-touch-checkbox/img/sprite.png') -34px 0 no-repeat; position: absolute; bottom: 18px; right: 25px; width: 30px; height: 30px;
}
.switch { width: 150px; height: 70px; overflow: hidden; position: absolute; -webkit-appearance: none; -moz-appearance: none; left: 0; top: 0;
}
.switch:after { content: ''; display: block; width: 219px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translateX(-69px); -moz-transform: translateX(-69px); transform: translateX(-69px); height: 73px; background: url('http://vsxed.github.io/ubuntu-touch-checkbox/img/sprite.png') 0 -31px no-repeat;
}
.ubuntu-touch { width: 150px; height: 70px; position: absolute; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; left: 0; top: 0; margin: 0; z-index: 2;
}
.ubuntu-touch:checked ~ .state { background: #cd5428;
}
.ubuntu-touch:checked ~ .switch:after { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}

Animated Ubuntu Touch-styled checkboxes - Script Codes JS Codes

/* Animated Ubuntu Touch-styled checkboxes * http://www.youtube.com/watch?v=BZFcnxQlvZY&feature=player_detailpage#t=61s * * Works best in any webkit browser * * Due to a bug in Firefox i had to change the regular input + label markup -> * https://bugzilla.mozilla.org/show_bug.cgi?id=649849 * * You can see another live demo here: * http://vsxed.github.io/ubuntu-touch-checkbox * * and see it on github (psd and less code included): * https://github.com/vsxed/ubuntu-touch-checkbox */
Animated Ubuntu Touch-styled checkboxes - Script Codes
Animated Ubuntu Touch-styled checkboxes - Script Codes
Home Page Home
Developer Eduard Mayer
Username codewunder
Uploaded July 13, 2022
Rating 3
Size 3,420 Kb
Views 40,480
Do you need developer help for Animated Ubuntu Touch-styled checkboxes?

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!

Eduard Mayer (codewunder) Script Codes
Name
A Pen by Eduard Mayer
Twitter Widget Rebound
Social Slides
Social Sharing Buttons
Infotype SVG Animation
Scrollable see-through headline
CSSOff 2013 Submission
Enlarge text with buttons and js, with limited max- and min sizes
VelocityJS, fade on scroll
A Pen by Eduard Mayer
Create amazing blog posts 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!