Category: CSS3

24 hours of code – Hosted by Accenture

I have participated in a Hackathon, hosted by Accenture. The proposed project was very interesting: a social app for blind people. The technical requirements for the app were pretty obvious for this scenario. The app had to have an interface friendly towards people with total or partial blindness. I was very happy to work on this project, as I though about these kind of challenges for a visually impaired person before, but never had an opportunity to challenge myself on this before. I am pretty happy with my result. The app can be cloned from the repository here, and the Continue reading

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