Front End Technology Articles - Page 660 of 860

To create a light speed in 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 create hinge 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;   ... Read More

Users find a website with a blurred background to be visually good-looking. But have you ever considered how this blur is made specifically? Well, it's quite easy. Let's look at how to use the CSS background blur property to do it. Using CSS filters to generate blurred effects on images or text is a common web development method to improve visual appeal or achieve certain design sensibilities. The rendering of items on a webpage can be altered, including blurring, with CSS filters. When using the CSS filter: blur() property on images, make necessary adjustments to the blur radius. For example, ... Read More

Chroma Filter is used to making any particular color transparent and usually, it is used with images. You can use it with scrollbars also.ExampleImplementing the CSS Chroma Filter −Live Demo                         Text Example:       CSS Tutorials    

This property specifies a sound to be played as a background while an element's content is spoken. Possible values could be any of the followings −URI − The sound designated by this is played as a background while the element's content is spoken.mix − When present, this keyword means that the sound inherited from the parent element's play-during property continues to play and the sound designated by the uri is mixed with it. If the mix is not specified, the element's background sound replaces the parent's.repeat − When present, this keyword means that the sound will repeat if it ... Read More

The flip effect is used to create a mirror image of the object. The following parameters can be used in this filterS.NoParameter & Description1FlipHCreates a horizontal mirror image2FlipVCreates a vertical mirror imageExampleTo set flip effectLive Demo                               Text Example:       CSS Tutorials    

0Invert 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 −S.NoParameter & Description1InvertMaps the colors of the object to their opposite value in the color spectrum.ExampleYou can try to run the following code to map the colors of the object to their opposite values in the color spectrum:Live Demo                         Text Example:       CSS Tutorials    

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