Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To implement animation on clip property with CSS, you can try to run the following codeExampleLive Demo div { width: 200px; height: 300px; background: yellow; border: 10px solid red; animation: myanim 3s infinite; bottom: 30px; position: absolute; clip: rect(0,100px,50px,0); } @keyframes myanim { 20% { bottom: 100px; clip: rect(0,150px,40px,0); } } Performing Animation on clip property
To implement animation on box-shadow property with CSS, you can try to run the following codeExampleLive Demo div { width: 200px; height: 300px; background: yellow; border: 10px solid red; animation: myanim 3s infinite; bottom: 30px; position: absolute; } @keyframes myanim { 20% { bottom: 100px; box-shadow: 30px 45px 70px orange; } } Performing Animation on box-shadow
Use the translate() method to translate canvas. HTML5 canvas provides a translate(x, y) method which is used to move the canvas and its origin to a different point in the grid.Here argument x is the amount the canvas is moved to the left or right, and y is the amount it's moved up or downExample #test { width:100px; height:100px; margin:0px auto; } ... Read More
To style input type = number, use the following CSS −input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }The above shows without a spinner.To show and style a spinner, useinput[type=number]::-webkit-inner-spin-button { opacity: 1; }OutputThe above shows the following output −
The tel: protocol is supported by almost every mobile device nowadays. This includes Safari on iOS, Android Browser, Symbian browser, Opera Mini, etc.Add it like this −if (/(HTC825)/i.test(navigator.userAgent)){ $("a[href^='tel:']").each(function(){ this.href = this.href.replace("tel:", "wtai://wp/mc;"); }); }
Use the TimeRanges object in HTML to set a series of non-overlapping ranges of time. You can also set the start and stop time.The following are the properties −length − Length of time ranges.start(index) − start time, in secondsend(index) − end time, in secondsHere is the code snippet showing buffering −// displays 12 myAudio.buffered.start(1); // displays 20 myAudio.buffered.end(1);
iFrames are replaced elements and considered different than non-replaced elements. The element is a non-replaced element.To achieve the same result i.e. to set both the left/right or top/bottom in an iframe, use a div as a wrapper with absolute position, top, left, right, bottom.Place your iframe with −width:100% height:100%.
With CSS3, you can always create shapes like rectangle, triangle, etc.Let us see how −The following is a rectangle −#shape1 { width: 300px; height: 150px; background: blue; }The following is a triangle −#shape2 { width: 0; height: 0; border-left: 200px solid transparent; border-bottom: 200px solid blue; }
Set gap between Grid rows and columns with CSS. You can try to run the following code to implement the grid-gap property.ExampleLive Demo .container { display: grid; background-color: green; grid-template-columns: auto auto; padding: 20px; grid-gap: 20px 20px; } .ele { background-color: orange; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
To play a WAV file on iOS Safari, add a content-range header.The headers would allow a WAV file to play −Content-Range: bytes XX-XX/XX Content-Type: audio/wav Content-Disposition: attachment; filename = "new.WAV" Content-Length: XXAbove, new.WAV is our WAV file.