This property specifies the average pitch (a frequency) of the speaking voice. The average pitch of a voice depends on the voice family. For example, the average pitch for a standard male voice is around 120Hz, but for a female voice, it's around 210Hz.The possible values are −frequency - Specifies the average pitch of the speaking voice in hertz (Hz).x-low, low, medium, high, x-high - These values do not map to absolute frequencies since these values depend on the voice family.

The cue-after property specifies a sound to be played after speaking an element's content to delimit it from other. The possible values include −url − The URL of a sound file to be played.none − Nothing has to be played.Example    

To implement Fade Out Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;animation-duration: 10s;             -webkit-animation-fill-mode: both;animation-fill-mode: both;          }          @-webkit-keyframes fadeOut {             0% {opacity: 1;}             100% {opacity: 0;}          }          @keyframes fadeOut {             0% {opacity: 1;}             100% {opacity: 0;}          }          .fadeOut {             -webkit-animation-name: fadeOut;             animation-name: fadeOut;          }                           Reload page                function myFunction() {             location.reload();          }          

To implement Fade In Up Big Animation Effect on an image with CSS, you can try to run the following code:ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeInUpBig {             0% {             opacity: 0;             -webkit-transform: translateY(2000px);          }          100% {             opacity: 1;             -webkit-transform: translateY(0);          }       }       @keyframes fadeInUpBig {          0% {             opacity: 0;             transform: translateY(2000px);          }          100% {             opacity: 1;             transform: translateY(0);          }       }       .fadeInUpBig {          -webkit-animation-name: fadeInUpBig;          animation-name: fadeInUpBig;       }                         Reload page                function myFunction() {             location.reload();          }          

We are aware that CSS offers a developer an excess of features. Some can only be attained by adjusting already-existing features, while others can be accomplished directly. For example, different animations can be applied to different website elements. One of these is fade-in animation. When hovering over an object in a fade-in animation, it appears to get darker. There exist numerous methods to accomplish this outcome. To draw attention to a certain button or image, we use this technique. We may achieve this by adjusting the element's opacity. Example Let's look at the following example, where we are going to ... Read More

X-Ray effect grayscales and flattens the color depth.The following parameter is used in this filter −S.noParameter & Description          1.XrayGrayscales and flattens the color depth.ExampleYou can try to run the following code to create an X-Ray effect −Live Demo                         Text Example:       CSS Tutorials    

To implement Fade In Right Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeInRight {             0% {                opacity: 0;                -webkit-transform: translateX(20px);             }             100% {                opacity: 1;                -webkit-transform: translateX(0);             }          }          @keyframes fadeInRight {             0% {                opacity: 0;                transform: translateX(20px);             }             100% {                opacity: 1;                transform: translateX(0);             }          }          .fadeInRight {             -webkit-animation-name: fadeInRight;             animation-name: fadeInRight;          }                           Reload page                function myFunction() {             location.reload();          }          

To implement Fade In Right Big Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeInRightBig {             0% {                opacity: 0;                -webkit-transform: translateX(2000px);             }             100% {                opacity: 1;                -webkit-transform: translateX(0);             }          }          @keyframes fadeInRightBig {             0% {                opacity: 0;                transform: translateX(2000px);             }             100% {                opacity: 1;                transform: translateX(0);             }          }          .fadeInRightBig {             -webkit-animation-name: fadeInRightBig;             animation-name: fadeInRightBig;          }                           Reload page                function myFunction() {             location.reload();          }          

Use the mask effect to turn transparent pixels to a specified color and makes opaque pixels transparent. The following parameter is used in this filterSr.NoParameter & Description          1ColorThe color that the transparent areas will become.ExampleYou can try to run the following code to implement mask effect −Live Demo                               Text Example:       CSS Tutorials    

The glow effect is used to create a glow around the object. If it is a transparent image, then glow is created around the opaque pixels of it.The following parameters can be used in this filter −S.noParameter & Description1.ColorThe color you want the glow to be.2.StrengthThe intensity of the glow (from 1 to 255).ExampleYou can try to run the following code to create a glow around the object −Live Demo                         Text Example:       CSS Tutorials