CSS3 Sliding Form

Hello folks, I am back with another interesting post to share with you guys. Today I will be sharing something about some new techniques introduced in Forms. Now days there has been lot many different kind of forms, some of them are Contact Forms, Feedback Forms, Payment Forms etc. Feedback form has becoming a necessary part of daily needs websites. Using feedback forms, we can provide some feedback to the owner of the website, so that he/she can make changes as per his convince and users requirements. These feedback forms can be added in different ways to our website. I am sharing a sliding feedback form with you. In my demo file, the feedback with slide from left once you hover over a certain section of the page. This form is created using some wire-frame and scripts. To create this form I have used Normalize.css with some custom styling. To make it look more dynamic I have used Modernizr.js.

     

Advertisements

CSS Clock

This analog clock is quite simple to create and it can be used on a separate page as well as in a Modal Window.

CSSClock

CSSClock

Now the clock I have posted above is created using HTML5, CSS3, and very minimal scripting. This clock is responsive in nature. It means it can be easily used on Tablets as well as Mobile devices. The script I am using is created my me itself.One of the script is used for animation and other script is used for time. In HTML Markup, I have used div tags for displaying Numbers in clock. using different Id selector I have arranged second-hand, minute-hand, hour-hand.

     

Vibrating Buttons

Hello folks I am back with another set of some more helpful information. Today I will share something about Vibrating Buttons. I am sure you all must be using Smartphones in your daily life. Once you tap over any button on the webpage, It gives a little vibrate. Now today I will share some code using which you guys can also add this to your mobile website. How to make this vibration happen when the user click any particular button.

Well this vibration occurs due to very little Javascript code. I am linking a Sample file with this , in this file I have used HTML5, CSS3, and very few lines of Javascript also. To make any button vibrate we have to use Vibrate API, Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in any particular pattern or button for a given duration.

It’s always good to check for the presence of API support before using it; here’s how you can detect the Vibration API’s presence:

alert("navigator.vibrate?  " + (navigator.vibrate ? "Yes" : "No"));
		alert("navigator.webkitVibrate?  " + (navigator.webkitVibrate ? "Yes" : "No"));
		alert("navigator.oVibrate?  " + (navigator.oVibrate ? "Yes" : "No"));