To draw a circle with transparent background and border-radius, use the following CSS −body {    background: repeating-linear-gradient(45deg, white 0px, green 100px);    height: 400px;    background-size: 400px 400px;    background-repeat: no-repeat; } html {    height: 100%; } #box {    position: absolute;    width: 400px;    height: 400px;    border: solid blue 2px;    animation: colors 5s infinite; } #demo {    width: 50%;    height: 100%;    right: 0px;    position: absolute;    overflow: hidden;    transform-origin: left center;    animation: cliprotate 18s steps(2) infinite;    -webkit-animation: cliprotate 18s steps(2) infinite; } .circlehalf {    box-sizing: border-box; ... Read More

HTML5 canvas provides two important methods to save and restore the canvas states.Canvas states are stored on a stack every time the save method is called, and the last saved state is returned from the stack every time the restore method is called.Sr.No.Method and Description1save()This method pushes the current state onto the stack..2restore()This method pops the top state on the stack, restoring the context to that state.                                                              ExampleYou can try ... Read More

HTML5 canvas provides rotate(angle) method which is used to rotate the canvas around the current origin.This method only takes one parameter and that's the angle the canvas is rotated by. This is a clockwise rotation measured in radians.ExampleYou can try to run the following code to rotate HTML Canvas −                    #test {             width: 100px;             height:100px;             margin: 0px auto;          }             ... Read More

To play randomly, add the songs like this −init ([    'http://demo.com/songs/song1.mp3,    'http://demo.com/songs/song2.mp3,    'http://demo.com/songs/song3.mp3 ]);Use the following to play randomly using Math.random −function displayRandom() {    var audio = Math.floor(Math.random() * (collection.length));    audio = collection[audio];    audio.play();    setTimeout(loop,audio.duration*1000); }

HTML5 canvas provides the necessary methods to draw an image and erase it completely. We can take JavaScript help to simulate good animation over an HTML5 canvas.ExampleYou can try to run the following code to perform basic HTML5 Canvas Animation −                    var pattern= new Image();          function animate(){             pattern.src = '/html5/images/pattern.jpg';             setInterval(drawShape, 100);          }          function drawShape(){             // get the canvas ... Read More

Add the following in the bottom −NETWORK: *Set the version number of the manifest in the URL with the path.In addition, set −CACHE MANIFEST #rev ?v = 42 /css/style.css?v = 20 /js/myscript.js?v = 20

HTML5 Geolocation API lets you share your location with your favorite web sites. A JavaScript can capture your latitude and longitude, can be sent to backend web server, and do fancy location-aware things like finding local businesses or showing your location on a map.ExampleLet us see how to get the current position −                    function showLocation(position) {             var latitude = position.coords.latitude;             var longitude = position.coords.longitude;             alert("Latitude : " + latitude + " ... Read More

You can use the BluePrint/960gs framework or any of the following −52frameworkSusy        52framework (Refer)The framework that provides −CSS3 gradients, multiple shadows, and other amazing properties.CSS3 selectors with support for IE.New and improved HTML5 video support with vimeo like skinA completely new Form Framework with HTML5 Validation (via javascript)Susy (Refer)A lightweight grid-layout framework for Sass. This is designed to clarify responsive grid layouts. Use Susy with floats, flexbox, tables, etc.

For this, use Google Maps API to perform reverse geocoding.Geocoding refers to translating a human-readable address into a location on a map.The process of doing the converse, translating a location on the map into a human-readable address, is known as reverse geocoding.ExampleLet us see an example to set latitude and longitude −function initMap() {    var map = new google.maps.Map(document.getElementById('map'), {       zoom: 8,       center: {lat: 20.502, lng: -22.765}    }); }The reverse geocoder will match countries, provinces, cities and neighborhoods, street addresses, and postal codes.

Yes, the checkValidity() works in Google Chrome and Opera as well. This works as well −Example                    .valid {             color: #0B7866;          }          .invalid {             color: #0B6877;          }                            function check(input) {             var out = document.getElementById('result');             if (input.validity) {                if (input.validity.valid === true) {                   out.innerHTML = "" + input.id +                   " valid";                   } else {                   out.innerHTML = "" + input.id +                  " not valid";                }             }             console.log(input.checkValidity());          };                      Minimum: