Front End Technology Articles - Page 608 of 860

To implement animation on max-width property with CSS, you can try to run the following codeExampleLive Demo                    div {             overflow: auto;             background-color: blue;             color: white;             border: 1px solid black;             animation: myanim 3s;          }          @keyframes myanim {             30% {               ... Read More

The rest property is a shorthand property for rest-before and rest-after properties. Set a pause before or after the element.The following is the syntax:rest: rest-before rest-afterHere,rest-before: Rest for some seconds beforerest-after: Rest for some seconds afterExampleThe following is an example of rest speech media property:h1 {    rest: 15ms 20ms; }

Add adjustments to the speech with the voice-stress property like change pitch, how much loud it is, etc.The following is the syntax:voice-stress: normal | strong | moderate | none | reducedThe following example is to implement the voice-stress speech media property:p {    voice-stress: strong; }Above, I have set strong emphasis using the strong voice-stress property value.

Adjust the relative volume level using the voice-volume CSS property.The following is the syntax:voice-volume: [x-soft | soft | medium | loud | x-loud]The following is a code snippet for the voice-volume speech media property:p {    voice-volume: soft; }You can also set the volume in decibalsp {    voice-volume: 2dB; }Set both the voice-volume media property and volume level in decibals :p {    voice-volume: medium 3dB; }

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    

Use the border-top-right radius property in CSS to set the top right radius border. You can try to run the following code to implement border-top-right-radius property −ExampleLive Demo                    #rcorner {             border-radius: 25px;             border-top-right-radius: 45px;             background: orange;             padding: 20px;             width: 400px;             height: 250px;          }                     Rounded border-top-right corner!    

Use the align-content property with value space-between to add space between the flex lines.ExampleYou can try to run the following code to implement the space-between valueLive Demo                    .mycontainer {             display: flex;             height: 200px;             background-color: #5D6D7E;             align-content: space-between;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: #EBF5FB;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Queue                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

To implement animation on line-height property with CSS, you can try to run the following code −ExampleLive Demo                    p {             animation: mymove 3s infinite;             line-height: 20px;          }          @keyframes mymove {             70% {                line-height: 50px;             }          }                     This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          

To implement animation on the column-rule-color property with CSS, you can try to run the following code:ExampleLive Demo                    div {             width: 600px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;             column-rule: 10px inset ... Read More

To implement animation on the letter-spacing property with CSS, you can try to run the following codeExampleLive Demo                    p {             letter-spacing: 3px;             animation: mymove 3s infinite;          }          @keyframes mymove {             70% {                letter-spacing: 20px;             }          }                     I am flying!