The grayscale effect is used to convert the colors of the object to 256 shades of gray. The following parameter is used in this filter −ParameterDescriptionGrayConverts the colors of the object to 256 shades of gray.ExampleYou can try to run the following code to set grayscale effect −Live Demo                         Text Example:                CSS Tutorials          

To implement Flip Out Y Animation effect with CSS, you can try to run the following codeLive 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: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes flipOutY {             0% {                -webkit-transform: perspective(400px) rotateY(0deg);                opacity: 1;             }             100% {                -webkit-transform: perspective(400px) rotateY(90deg);                opacity: 0;             }          }          @keyframes flipOutY {             0% {                transform: perspective(400px) rotateY(0deg);                   opacity: 1;             }             100% {                transform: perspective(400px) rotateY(90deg);                opacity: 0;             }          }          .flipOutY {             -webkit-backface-visibility: visible !important;             -webkit-animation-name: flipOutY;             backface-visibility: visible !important;             animation-name: flipOutY;          }                           Reload page                      function myFunction() {             location.reload();          }          

Wave effect is used to give the object a sine wave distortion to make it look wavy.The following parameters can be used in this filter:S.NoParameter & Description1.AddA value of 1 adds the original image to the waved image, 0 does not.2.FreqThe number of waves.3.LightThe strength of the light on the wave (from 0 to 100).4.PhaseAt what degree the sine wave should start (from 0 to 100).5.StrengthThe intensity of the wave effect.ExampleYou can try to run the following code to set wave effect:Live Demo                         Text Example:       CSS Tutorials    

Invert effect is used to map the colors of the object to their opposite values in the color spectrum, i.e., to create a negative image.The following parameter is used in this filter:Sr.NoParameter & Description1InvertMaps the colors of the object to their opposite value in the color spectrum.ExampleYou can try to run the following code to implement the invert effect:Live Demo                         Text Example:                CSS Tutorials          

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

To implement Flip Out X Animation effect 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: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes flipOutX {             0% {                -webkit-transform: perspective(400px) rotateX(0deg);                opacity: 1;             }             100% {                -webkit-transform: perspective(400px) rotateX(90deg);                opacity: 0;             }          }          @keyframes flipOutX {             0% {                transform: perspective(400px) rotateX(0deg);                opacity: 1;             }             100% {                transform: perspective(400px) rotateX(90deg);                opacity: 0;             }          }          .flipOutX {             -webkit-animation-name: flipOutX;             -webkit-backface-visibility: visible !important;             animation-name: flipOutX;             backface-visibility: visible !important;          }                           Reload page                function myFunction() {             location.reload();          }          

The speech-rate property specifies the speaking rate. Note that both absolute and relative keyword values are allowed.The possible values are -number − Specifies the speaking rate in words per minute.x-slow − Same as 80 words per minute.slow − Same as 120 words per minute.medium − Same as 180 - 200 words per minute.fast − Same as 300 words per minute.x-fast − Same as 500 words per minute.faster − Adds 40 words per minute to the current speech rateslower − Subtracts 40 words per minutes from the current speech rate.

CSS3 Rounded corners are used to add a special colored corner to body or text by using the border-radius property.A simple syntax of rounded corners is as follows −#rcorners {    border-radius: 60px/15px;    background: #FF0000;    padding: 20px;    width: 200px;    height: 150px; }The following table shows the possible values for Rounded corners as follows:ValuesDescriptionborder-radiusUse this element for setting four border radius propertyborder-top-left-radiusUse this element for setting the border of top left cornerborder-top-right-radiusUse this element for setting the border of top right cornerborder-bottom-right-radiusUse this element for setting the border of bottom right cornerborder-bottom-left-radiusUse this element for setting the ... Read More

To implement Flip In Y Animation effect 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: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: ... Read More

To implement Flip In X Animation effect with CSS, you can try to run the following codeExampleLive 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: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: ... Read More