Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Use the animation-direction property to run animation in an alternate direction. The property is used with the alternate animation value to achieve this.ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: 3; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
Use the CSS background-origin property to set the padding-box value. With the padding-box value, the background image begins from the upper left corner of the padding edge.You can try to run the following code to implement the padding-box value:ExampleLive Demo #value1 { border: 3px solid blue; padding: 30px; background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg); background-repeat: no-repeat; background-origin: padding-box; } ... Read More
To display the overflowed content while hovering over elements, you can try to run the following code:ExampleLive Demo div.demo { white-space: nowrap; width: 180px; overflow: hidden; border: 2px solid blue; } div.demo:hover { text-overflow: inherit; overflow: visible; } Hover to see the complete text below: Demo Text that will hide in this box.
Use the animation-direction property to run animation in reverse direction. The property is used with the reverse animation value to achieve this.ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: reverse; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
To add a blur effect to the shadow, use the box-shadow property.You can try to run the following code to add blur effectExampleLive Demo h2 { box-shadow: 10px 10px 7px green; height: 50px; background-color: yellow; } Heading Two Above heading has shadow.
Pseudo class is to show different state of an element or a css selector. visited pseudo class is to show that the link is already visited.This pseudo class is mostly being associated with link.Syntaxa:visited { color:green;}Let's check the actual usage of :visited pseudo class with different scenarios, as follows -Example Live Demo a:visited { color:green;} Click here to learn ExplanationWhen you first time see the link it will be shown with normal link color (Blue) and the link will turn green if this link has been visited once.Example Live Demo ... Read More
To add a color to the shadow, use the box-shadow property and set the color, with the height and width.You can try to run the following code to set the color to shadow:ExampleLive Demo h2 { box-shadow: 10px 10px green; height: 70px; background-color: red; } Heading Two Above heading has shadow.
Every human being have emotions just like happy, sad, neutral, surprise, sorrow etc., if we create the emotions of images like happy, sad, neutral, surprise, etc. in Python. We can use Microsoft emotion API for any development purpose.We can easily elaborate all these emotions using Microsoft emotion API's.Example Codeimport http.client, urllib.request import urllib.parse, urllib.error import base64, sys import simplejson as json # replace with subscription_key # you obtained after registration subscription_key = '23d39244dbe55173214b56ab45d56cla' headers = { # Request for headers. And also replace the placeholder key with # our subscription key. 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': ... Read More
Use the [attribute|=”value”] selector to select elements with the specified attribute starting with a specified value.You can try to run the following code to implement CSS [attribute|=”value”] Selector,ExampleLive Demo [lang| = en] { border: 5px solid orange; border-radius: 5px; } Hello Hei
To create a fading effect with CSS, use the c You can try to run the following code for fading effect:ExampleLive Demo #demo { height: 100px; background: linear-gradient(to right, rgba(255,50,30,0), rgba(255,50,30,1)); } Linear Gradient Fading Effect