Front End Technology Articles - Page 656 of 860

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

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

The CSS border-mage-source property is used to set the image path. You can try to run the following code to implement the border-image-source property:ExampleLive Demo                    #borderimg1 {             border: 15px solid transparent;             padding: 15px;             border-image-source: url(https://tutorialspoint.com/css/images/border.png);             border-image-repeat: round;             border-image-slice: 50;          }                     This is image border example.    

In relative units, the length value is fixed and it appears the exact size of the element. Let us see the units:UnitsAbbreviationPercent%EmEmExExRoot emRemViewport widthVwViewport widthVhViewport widthVmCharacterChGridGd

CSS has several units for different units such as width, margin, padding, font-size, border-width, etc. The length indicates by using numerical value followed by length units such as px, dp, em, etc. It does not allow white spaces in between numerical values and length units.Length units divided as follows:relative unitsabsoluteAbsolute unitsUnitsAbbreviationPixelsPxPointsPtInchesInCentimetersCmPicasPcRelative UnitsIn relative units, the length value is fixed and it appears the exact size of the elementUnitsAbbreviationPercent%EmEmExExRoot emRemViewport widthVwViewport widthVhViewport widthVmCharacterChGridGd

CSS3 has adapted font combinations technology. In here, if the browser does not support the first font then it tries the next font.Let us see an example of Sans-Serif fonts −

To set media queries for different CSS style rules, you can try to run the following code −ExampleLive Demo                    body {             background-color: lightpink;          }          @media screen and (max-width: 420px) {             body {                background-color: lightblue;             }          }                     If screen size is less than 420px, then it will show lightblue color, or else it will show light pink color    

Responsive web design provides an optimal experience, easy reading and easy navigation with a minimum of resizing on different devices such as desktops, mobiles, and tabs).Let us see what is a responsive web design:

Media queries are for different style rules for different size devices such as mobiles, desktops, etc. You can try to run the following code to implement media queries with CSS3 − Example Live Demo body { background-color: lightpink; } @media screen and (max-width: 420px) { body { background-color: lightblue; } } If screen size is less than 420px, then it will show lightblue color, or else it will show light pink color

Box-sizing property is used to change the height and width of the element. Since CSS2, the box property has worked like as shown below −width + padding + border = actual visible/rendered width of an element's box height + padding + border = actual visible/rendered height of an element's boxExampleTo understand the box-sizing property, let us see an example:Live Demo                    .div1 {             width: 300px;             height: 100px;             border: 1px solid blue;             box-sizing: border-box;          }          .div2 {             width: 300px;             height: 100px;             padding: 50px;             border: 1px solid red;             box-sizing: border-box;          }                     TutorialsPoint.com       TutorialsPoint.com