CSS Articles - Page 146 of 160

This property specifies whether the text will be rendered aurally and if so, in what manner. The possible values are −none − Suppresses aural rendering so that the element requires no time to render.normal − Uses language-dependent pronunciation rules for rendering an element and its children.spell-out − Spells the text one letter at a time.Note the difference between an element whose 'volume' property has a value of 'silent' and an element whose 'speak' property has the value 'none'. The former takes up the same time as if it had been spoken, including any pause before and after the element, but no ... Read More

Animations never fail to attract people in. When you present them with a painting and a video, they will always focus on the moving image since it is more visually appealing. Thus, the best method to get people to visit your website is to incorporate animations. The things you can accomplish using CSS animations are endless. A few lines of code can be used to generate stunning and interesting animations. All you need to do is adjust the direction and give a few parameters. For getting better understanding on implemeneting the fade out right big animation effect with CSS let's ... Read More

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

To implement Bounce Out Right Animation Effect with CSS, you can try to run the following codeExample                    .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 bounceOutRight {             0% {                -webkit-transform: translateX(0);             }             20% {                opacity: 1;                -webkit-transform: translateX(-20px);             }             100% {                opacity: 0;                -webkit-transform: translateX(2000px);             }          }          @keyframes bounceOutRight {             0% {                transform: translateX(0);             }             20% {                opacity: 1;                transform: translateX(-20px);             }             100% {                opacity: 0;                transform: translateX(2000px);             }          }          .bounceOutRight {             -webkit-animation-name: bounceOutRight;             animation-name: bounceOutRight;          }                     >/div>       Reload page                function myFunction() {             location.reload();          }          

The CSS background-image property is used to specify the background image. You can try to run the following code to implement the background-image property in CSS −Example                    #demo {             border: 5px dashed red;             padding: 10px;             background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");          }                              www.tutorialspoint.com          Tutorials Point originated from the idea ... Read More

The CSS background-lip property is used to declare the painting area of the background. You can try to run the following code to implement the background-clip property in CSS −Example                    #demo {             border: 5px dashed red;             padding: 10px;             background: orange;             background-clip: padding-box;          }                             ... Read More

To implement Bounce Out Left Animation Effect with CSS, you can try to run the following codeExample                    .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 bounceOutLeft {             0% {                -webkit-transform: translateX(0);             }             20% {                opacity: 1;                -webkit-transform: translateX(20px);             }             100% {                opacity: 0;                -webkit-transform: translateX(-2000px);             }          }          @keyframes bounceOutLeft {             0% {                transform: translateX(0);             }             20% {                opacity: 1;                transform: translateX(20px);             }             100% {                opacity: 0;                transform: translateX(-2000px);             }          }          .bounceOutLeft {             -webkit-animation-name: bounceOutLeft;             animation-name: bounceOutLeft;          }                           Reload page                function myFunction() {             location.reload();          }          

To implement Bounce Up Animation Effect with CSS, you can try to run the following code −Example                    .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 bounceInUp {             0% {                opacity: 0;                -webkit-transform: translateY(2000px);             }             60% {                opacity: 1;                -webkit-transform: translateY(-30px);             }             80% {                -webkit-transform: translateY(10px);             }             100% {                -webkit-transform: translateY(0);             }          }          @keyframes bounceInUp {             0% {                opacity: 0;                transform: translateY(2000px);             }             60% {                opacity: 1;                transform: translateY(-30px);             }             80% {                transform: translateY(10px);             }             100% {                transform: translateY(0);             }          }          .bounceInUp {             -webkit-animation-name: bounceInUp;             animation-name: bounceInUp;          }                     >/div>       Reload page                function myFunction() {             location.reload();          }          

To implement Bounce Out Down 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: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounceOutDown {             0% {                -webkit-transform: translateY(0);             }             20% {                opacity: 1;                -webkit-transform: translateY(-20px);             }             100% {                opacity: 0;                -webkit-transform: translateY(2000px);             }          }          @keyframes bounceOutDown {             0% {                transform: translateY(0);             }             20% {                opacity: 1;                transform: translateY(-20px);             }             100% {                opacity: 0;                transform: translateY(2000px);             }          }          .bounceOutDown {             -webkit-animation-name: bounceOutDown;             animation-name: bounceOutDown;          }                           Reload page                function myFunction() {             location.reload();          }          

To implement Bounce Out 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: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounceOut {             0% {                -webkit-transform: scale(1);             }             25% {                -webkit-transform: scale(.95);             }             50% {                opacity: 1;                -webkit-transform: scale(1.1);             }             100% {                opacity: 0;                -webkit-transform: scale(.3);             }          }          @keyframes bounceOut {             0% {                transform: scale(1);             }             25% {                transform: scale(.95);             }             50% {                opacity: 1;                transform: scale(1.1);             }             100% {                opacity: 0;                transform: scale(.3);             }          }          .bounceOut {             -webkit-animation-name: bounceOut;             animation-name: bounceOut;          }                           Reload page                function myFunction() {             location.reload();          }