Tag: CSS3

CSS3 On / Off switch

Here is a simple CSS3 On / Off switch. You can use JavaScript code to find the current switch state. This example only provides the styling part of the element. This is a lightweight solution for building from scratch a toggle button (switch). It can work on any platform that supports CSS3. The HTML: <div class=”switch” id=”switch”> <a href=”#thinghyL”> <div class=”thinghyL” id=”thinghyL”><div class=”knobL”></div></div> </a> <a href=”#thinghyR”> <div class=”thinghyR” id=”thinghyR”></div> </a> </div> The CSS: .switch { width:100px; height:30px; background-color:#eeeeee; border-radius:15px; border:solid thin #000000; float:left; overflow:hidden; } .thinghyL { height:100%; width:100%; background-color:green; border-radius:15px; transition: width 300ms ease-out; float:left; margin-left:0px; position:relative; z-index:10; } Continue reading

CSS3 Login Form Styling

Inspired by the concept design of the folks over at invisionapp.com I decided to animate a login form using CSS3. It looks great for mobile devices apps or just websites. It is a CSS3 Login form – animated! with step by step instructions. You can look at the code over at jsfiddle.net, and you can use it however you like, as long as it is for non-commercial purposes. That’s it! I hope you find this useful. HTML code: <div class=”loginBox”> <form name=”form1″ action=”do_login.php” method=”post”> <img src=”http://www.niandrei.com/tutorial/css3/ep1/logo.png” style=”width:200px; height:200px” /><br><br><br> <div class=”usernameMask”>&nbsp;</div> <input type=”text” size=”30″ tabindex=”1″ id=”fa”><br> <div class=”passwordMask”>&nbsp;</div> <input type=”password” size=”30″ tabindex=”2″ id=”fb”><br> <div Continue reading