The flip effect is used to create a mirror image of the object. The following parameters can be used in this filter -ParameterDescriptionFlipHCreates a horizontal mirror imageFlipVCreates a vertical mirror imageExampleYou can try to run the following code to create a mirror imageLive Demo                               Text Example:       CSS Tutorials    

To implement Fade Out Down 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 fadeOutDown {             0% {                opacity: 1;                -webkit-transform: translateY(0);             }             100% {                opacity: 0;                -webkit-transform: translateY(20px);             }          }          @keyframes fadeOutDown {             0% {                opacity: 1;                transform: translateY(0);             }             100% {                opacity: 0;                transform: translateY(20px);             }          }          .fadeOutDown {             -webkit-animation-name: fadeOutDown;             animation-name: fadeOutDown;          }                           Reload page                function myFunction() {             location.reload();          }          

To make any particular color transparent, use Chroma Filter. You can use it with scrollbars also.The following parameter can be used in this filterParameterDescriptionColorThe color that you'd like to be transparent.Implementing the CSS Chroma Filter −Live Demo                         Text Example:       CSS Tutorials    

Use CSS filters to add special effects to text, images and other aspects of a webpage without using images or other graphics. If you are developing your site for multi browsers, then it may not be a good idea to use CSS filters because there is a possibility that it would not give any advantage. Some CSS Filters include  Motion Blur, Chroma Filter, Flip Effect, etc.

The Alpha Channel filter alters the opacity of the object, which makes it blend into the background. The following parameters can be used in this filter −ParameterDescriptionOpacityLevel of the opacity. 0 is fully transparent, 100 is fully opaque.finishopacityLevel of the opacity at the other end of the object.StyleThe shape of the opacity gradient.0 = uniform1 = linear2 = radial3 = rectangularstartXX coordinate for opacity gradient to begin.startYY coordinate for opacity gradient to begin.FinishX coordinate for opacity gradient to end.FinishY coordinate for opacity gradient to end.ExampleYou can try to run the following code to implement Alpha Filter −Live Demo       ... Read More

To import styles from another style, use the @import rule. It should appear right at the start of the style sheet before any of the rules, and its value is a URL.You can write it like this     The significance of the @import rule is that it allows you to develop your style sheets with a modular approach. You can create various style sheets and then include them wherever you need them.

To indicate what character set the style sheet written with CSS, use the @character rule. The @charset rule must be written right at the beginning of the style sheet without even a space before it. The value is held in quotes and should be one of the standard character-sets.ExampleLet us see an example,    

The !important rule provides a way to make your CSS cascade. It also includes the rules that are to be applied always. A rule having a !important property will always be applied, no matter where that rule appears in the CSS document.For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red −     If you want to make sure that a property always applied, you would add the !important property to the tag. Therefore, to make the paragraph text always red, you should write it as follows ... Read More

To implement Fade Out Left 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 fadeOutLeft {             0% {                opacity: 1;                -webkit-transform: translateX(0);             }             100% {                opacity: 0;                -webkit-transform: translateX(-20px);             }          }          @keyframes fadeOutLeft {             0% {                opacity: 1;                transform: translateX(0);             }             100% {                opacity: 0;                transform: translateX(-20px);             }          }          .fadeOutLeft {             -webkit-animation-name: fadeOutLeft;             animation-name: fadeOutLeft;          }                           Reload page                function myFunction() {             location.reload();          }          

Use the :before element to insert some content before any element. ExampleYou can try to run the following code to insert some content before an element with CSS −Live Demo                    p:before {             content: url(/images/bullet.gif)          }                     This line will be preceded by a bullet.       This line will be preceded by a bullet.       This line will be preceded by a bullet.