Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles by vanithasree
57 articles
Role of CSS : read-only Selector
Use the CSS :read-only selector to select elements that are read-only.ExampleYou can try to run the following code to implement the :read-only selector:Live Demo input:read-only { background-color: blue; color: white; } Subject: Student:
Read MoreRole of CSS :last-of-type Selector
Use the CSS :last-child selector to style every element that is the last child of its parent.ExampleYou can try to run the following code to implement the :last-child selector −Live Demo p:last-of-type { background: orange; } Heading This is demo text1. This is demo text2. This is demo text3.
Read MoreCreate a link button with borders using CSS
To create a link button with borders, you can try to run the following code −ExampleLive Demo a:link, a:visited { background-color: white; color: black; border: 1px solid blue; padding: 30px 30px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; color: white; } Demo Link
Read MoreCSS border-image-source
The CSS border-mage-source property is used to set the image path. You can try to run the following code to implement the border-image-source property:ExampleLive Demo #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/css/images/border.png); border-image-repeat: round; border-image-slice: 50; } This is image border example.
Read MorePerform Animation on CSS opacity
To implement animation on opacity property with CSS, you can try to run the following code:ExampleLive Demo #demo1 { position: absolute; top: 60px; width: 300px; height: 150px; background-color: lightblue; animation: myanim 4s infinite; } #demo2 { position: absolute; top: 90px; left: 30px; width: 300px; height: 150px; background-color: orange; animation: myanim 3s infinite; } #demo3 { position: absolute; top: 120px; left: 60px; width: 350px; height: 150px; background-color: coral; } @keyframes myanim { 30% { opacity: 0.4; } } Showing opacity End div Start div
Read MoreCSS white-space Property
Use the white-space property to work with white-space inside an element:ExampleLive Demo p.demo1 { white-space: normal; } p.demo2 { white-space: pre; } Control white-space This is demo text. This is demo text. This is demo text. This is demo text.
Read MoreUpload from local drive to local filesystem in HTML with Filesystem API
To upload from local drive to the local file system, we can use −Webkitdirectory attribute on − This allows the user to select a directory by the appropriate dialog box.Filesystem API is a sandboxed filesystem, which allows us to store files on client’s machine.File API allows us to read files. Files are accessible by elementAll of the above is working fine in Google Chrome.WebKit directory is a much better option among these. Use the following for directory −webkitRequestFileSystem( window.TEMPORARY, 5 * 1024 * 1024, function(_fs) { fs = _fs; }, ErrAbove, err and fs are −var fs, err = function(err) { throw err; };
Read MoreExecute a script each time the playback rate changes in HTML?
Use the onratechange attribute to execute a script each time the playback rate changes in HTML in HTML.ExampleYou can try to run the following code to implement onratechange attribute − Live Demo Your browser does not support the video element. Change the speed of the video function display() { document.getElementById("test").innerHTML = "Speed: " + document.getElementById("myid").playbackRate; } function update(ob) { document.getElementById("myid").playbackRate = ob.value; } Output
Read MoreHow to set that the specified element/group of elements should be disabled in HTML?
Use the disabled attribute to disable an element. The attribute can be used for the following elements: , , , , etc.ExampleYou can try to run the following code to implement disabled attribute − Which sports do you like? Football Cricket Hockey
Read MoreCSS animation-timing-function property
You can try to run the following code to implement the animation-timing-function property:ExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo1 {animation-timing-function: ease;} #demo2 {animation-timing-function: ease-in;} ease effect ease-in effect
Read More