Source Code Button

I have created something unique and different to resolve this issue. We can add a simple button which will directly link us to Source Code page or may be it can open Source Code in a Modal Window. I am attaching a sample file with this post you can check it out. This demo page will work fine with all the latest versions of Chrome and Firefox. May be with Safari also. But this will surely not work with IE8 and below.

Screenshot

Screenshot

     

Advertisements

3D Text Effect On Button

3d Text

3D Text Button

Now in this button we have used Green Color to display the button. The code for this button is very very simple. We have used Button tag to create this button. For styling of this button we have changed its background color to green.We have also added a bit of Border-Radius to remove its shape edges. To make the button appear in a 3D look we have used Box-Shadow. As we all know these are CSS3 Properties and these properties are still not supported by all the browsers. So to avoid this issue we have to use Vendor Prefixes. But it will make our styling code a bit of Complex.

     

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"));

     

CSS3: Border Radius

The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.
CSS rounded corners
thus save us time in creating images and requests to the server. Today, rounded corners with CSS are supported by all of the major browsers: Safari, Chrome, Internet Explorer, Opera, and Firefox. User can try in any of the above linked browsers.The border-radius code is given below with complete details.

     

ChessBoard

Chess Background is a quite simple code created for adding a chessboard background to a particular webpage. This effect is created just using HTML5, CSS3. No scripting is used to create this effect. Also to add the code for this effect is very small. No other plugin or markup is used for this effect. Read More…..
ChessBoard