Front End Technology Articles - Page 659 of 860

Volume refers to the median volume of the voice. It can have following values −numbers − Any number between '0' and '100'. '0' represents the minimum audible volume level and 100 correspond to the maximum comfortable level.percentage − These values are calculated relative to the inherited value, and are then clipped to the range '0' to '100'.silent − No sound at all. The value '0' does not mean the same as 'silent'.x-soft − Same as '0'.soft − Same as '25'.medium − Same as '50'.loud − Same as '75'.x-loud − Same as '100'.ExampleLet us see an example −     Read More

To create a rotate in 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 rotateInDownLeft {             0% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(-90deg);                opacity: 0;             }             100% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(0);                 opacity: 1;             }          }          @keyframes rotateInDownLeft {             0% {             transform-origin: left bottom;             transform: rotate(-90deg);             opacity: 0;             }             100% {                transform-origin: left bottom;                transform: rotate(0);                opacity: 1;             }          }          .rotateInDownLeft {             -webkit-animation-name: rotateInDownLeft;             animation-name: rotateInDownLeft;          }                           Reload page                function myFunction() {             location.reload();          }          

Aural rendering of documents is mainly used by the visually impaired. Some of the situations in which a document can be accessed by means of aural rendering rather than visual rendering are the following.Learning to readTrainingWeb access in vehiclesHome entertainmentIndustrial documentationMedical documentationWhen using aural properties, the canvas consists of a three-dimensional physical space (sound surrounds) and a temporal space (one may specify sounds before, during, and after other sounds).

Aural rendering of documents is mainly used by the visually impaired. The following are the aural media CSS properties −The azimuth property sets, where the sound should come from horizontally.The elevation property sets, where the sound should come from vertically.The cue-after specifies a sound to be played after speaking an element's content to delimit it from other.The cue-before specifies a sound to be played before speaking an element's content to delimit it from other.The cue is a shorthand for setting cue-before and cue-after.The pause-after specifies a pause to be observed after speaking an element's content.The pause-before specifies a pause to be observed ... Read More

To create a rollout 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 rollOut {             0% {                opacity: 1;                -webkit-transform: translateX(0px) rotate(0deg);             }             100% {                opacity: 0;                -webkit-transform: translateX(100%) rotate(120deg);             }          }          @keyframes rollOut {             0% {                opacity: 1;                transform: translateX(0px) rotate(0deg);             }             100% {                opacity: 0;                transform: translateX(100%) rotate(120deg);             }          }          .rollOut {             -webkit-animation-name: rollOut;             animation-name: rollOut;          }                           Reload page                function myFunction() {             location.reload();          }          

To create a roll in 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 rollIn {             0% {                opacity: 0;                -webkit-transform: translateX(-100%) rotate(-120deg);             }             100% {                opacity: 1;                -webkit-transform: translateX(0px) rotate(0deg);             }          }          @keyframes rollIn {             0% {                opacity: 0;                transform: translateX(-100%) rotate(-120deg);             }             100% {                opacity: 1;                transform: translateX(0px) rotate(0deg);             }            }          .rollIn {             -webkit-animation-name: rollIn;             animation-name: rollIn;          }                           Reload page                function myFunction() {             location.reload();          }          

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

To create a light speed out effect with CSS, you can try to run the following code:Live 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 lightSpeedOut {             0% {                -webkit-transform: translateX(0%) skewX(0deg);                opacity: 1;             }             100% {             -webkit-transform: translateX(100%) skewX(-30deg);             opacity: 0;             }          }          @keyframes lightSpeedOut {             0% {                transform: translateX(0%) skewX(0deg);                opacity: 1;             }             100% {                transform: translateX(100%) skewX(-30deg);                opacity: 0;             }          }          .lightSpeedOut {             -webkit-animation-name: lightSpeedOut;             animation-name: lightSpeedOut;             -webkit-animation-timing-function: ease-in;             animation-timing-function: ease-in;          }          .animated.lightSpeedOut {             -webkit-animation-duration: 0.25s;             animation-duration: 0.25s;          }                           Reload page                function myFunction() {             location.reload();          }          

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.ExampleFor example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:     ExampleIf 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 :Live ... Read More

The @font-face rule is used to define the location of a font for download, although this may run into implementation-specific limits.ExampleLet us see an example