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.    

Use the :first-letter element to add special effects to the first letter of elements in the document. You can try to run the following code to add special styles to the first letter of text −ExampleLive Demo                    p:first-letter {             font-size: 5em;          }          p.normal:first-letter {             font-size: 10px;          }                     First character of this paragraph will be ... Read More

Use this element to add special styles to the first line of the text in a selector. The following example demonstrates how to use the :first-line element to add special effects to the first line of elements in the document.ExampleLive Demo                    p:first-line {             text-decoration: underline;          }          p.noline:first-line {             text-decoration: none;          }                     This line would ... Read More

Use the :focus class to change the color of focused links. Possible values could be any color name in any valid format.ExampleYou can try to run the following code to implement the color of the focused link −                    a:focus {             color: #0000FF          }                     This is demo link    

Use the :active class to change the color of active links. Possible values could be any color name in any valid format. ExampleYou can try to run the following code to implement the color of an active link −                    a:active {             color: #FF00CC          }                     My Link