Front End Technology Articles - Page 607 of 860

Set whether the text is to be spoken or spelled using the speak-as speech media property.You can spell the text, speak the numeral, etc. To spell out, the following is an exampleabbr {    speak-as: spell-out; }Above, I have used spell-out that spells out one letter at a time.

To implement animation on padding-left property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 350px;             height: 150px;             outline: 3px solid orange;             animation: myanim 3s infinite;          }          @keyframes myanim {             50% {                padding-left: 20px;             }          }                     CSS padding-left property          

The voice-range property in CSS is used to set the range of the speaking voice. This is the pitch range.The following is the syntax:voice-range: [[x-low | low | medium | high | x-high]]Above, set the range of pitch i.e. low, medium, high, etc.The following is an example of the voice-range property:p {    voice-range: 90Hz; }

To implement animation on margin-top property with CSS, you can try to run the following codeExampleLive Demo                    div {             background-color: orange;             animation: myanim 4s infinite;             color: white;          }          @keyframes myanim {             30% {                margin-top: 30px;             }          }                     Heading One                This is demo text.          

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

To implement animation on the transform-origin property with CSS, you can try to run the following codeExampleLive Demo                    #demo1 {             position: relative;             height: 300px;             width: 400px;             border: 2px solid black;             margin: 100px;             padding: 5px;          }          #demo2 {             padding: 30px;             position: absolute;             border: 1px solid black;             background-color: orange;             transform: rotate(45deg);             transform-origin: 30% 10%;             animation: mymove 3s infinite;          }          @keyframes mymove {             30% {                transform-origin: 0 0 0;             }          }                     CSS transform-origin property                Demo          

The CSS rest-after property is useful for speech media to set pause before an element.Let us see an example of rest-before speech media propertyh1 {    rest-before: 15ms; }The time sets the pause in milliseconds.

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

The voice-duration property in CSS is used where synchronization of speech is done with other media.The following is an example to implement the voice-duration speech media propertyp {    voice-duration: 5s; }Above you can set auto value also.The auto value rectify a used value corresponding to the duration of the speech synthesis when using the inherited voice-rate. This is when you use inherited voice-rate.

Use the voice-balance property to set whether the spoken voice is from the left or right, etc.The following is a syntax to set the volume from left or right or centervoice-balance: left | center | rightLet us see an example to implement the voice-balance speech media propertyp {    voice-balance: right; }