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
Perform Animation on CSS opacity
To implement animation on opacity property with CSS, you can try to run the following code:Example #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 MoreWhat is onclick event in JavaScript?
The onClick event is the most frequently used event type, which occurs when a user clicks the left button of the mouse.ExampleYou can put your validation, warning etc., against this event type. Click the following button and see result
Read MoreString Formatting in C# to add padding on the right
To add padding on the right to a string −const string format = "{0,10}";Now add it to the string −string str1 = string.Format(format, "Marks","Subject");Let us see the complete code −Exampleusing System; public class Program { public static void Main() { // set right padding const string format = "{0,10}"; string str1 = string.Format(format, "Marks","Subject"); string str2 = string.Format(format, "95","Maths"); Console.WriteLine(str1); Console.WriteLine(str2); } }OutputMarks 95
Read MoreCreate a link button with borders using CSS
To create a link button with borders, you can try to run the following code −Example 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 white-space Property
Use the white-space property to work with white-space inside an element:Example 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 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 − p:last-of-type { background: orange; } Heading This is demo text1. This is demo text2. This is demo text3.
Read MoreRole 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: input:read-only { background-color: blue; color: white; } Subject: Student:
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 − 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 MoreWhat is the difference between /* */ and /** */ comments in Java?
Multiline comments (/* */) are used to comment multiple lines in the source code. Example public class CommentsExample { /* Following is the main method here, We create a variable named num. And, print its value * */ public static void main(String args[]) { //Declaring a variable named num int num = 1; ...
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:Example #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 More