Front End Technology Articles - Page 657 of 860

Let us understand the difference between CSS2 sizing property and CSS3 box-sizing property.CSS2 sizing propertyLive Demo                    .div1 {             width: 200px;             height: 100px;             border: 1px solid green;           }          .div2 {             width: 200px;             height: 100px;             padding: 50px;             border: 1px solid pink;          }                     TutorialsPoint.com       TutorialsPoint.com     CSS3 box-sizing propertyLive 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    

The CSS3 resize property is having three common values as shown below −horizontalverticalbothExampleUsing both the values in resize property in the CSS3 user interface:Live Demo                    div {             border: 2px solid;             padding: 20px;             width: 300px;             resize: both;             overflow: auto;          }                     My Website    

The border-image-repeat property is used to set the border image as rounded, repeated and stretched with CSS.ExampleYou can try to run the following code to implement the border-image-repeat property:Live 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: 40;             border-image-width: 20px;          }                     This is image border example.    

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

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

To create Tada 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 tada {             0% {-webkit-transform: scale(1);}             10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}             30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}             40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}             100% {-webkit-transform: scale(1) rotate(0);}          }          @keyframes tada {             0% {transform: scale(1);}             10%, 20% {transform: scale(0.9) rotate(-3deg);}             30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}             40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}             100% {transform: scale(1) rotate(0);}          }          .tada {             -webkit-animation-name: tada;             animation-name: tada;          }                           Reload page                function myFunction() {             location.reload();          }          

For many years, drop caps have been utilized in print media to elegantly introduce the first letter of the opening paragraph in a section or chapter. Because they are applied to just one letter, these drop caps serve to attract the reader's attention. This is also a wonderful opportunity to utilize a highly styled font without detracting from the readability of the text. By using the::first-letter pseudo element and the new initial-letter property in CSS, it is possible to achieve the same drop cap effect. CSS ::first-letter pseudo element In a block-level container, the ::first-letter pseudo-element applies a style to ... Read More

The swing animation effect move or cause to move back and forth or from side to side while suspended or on an axis to an element.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;             ... Read More

Use this element to insert some content before an element. The following example demonstrates how to use the :before element to add some content to any element.ExampleLive 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.    

The shake animation effect move (an object) up and down or from side to side for an element.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 shake {             0%, 100% {-webkit-transform: translateX(0);}             10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}             20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}          }          @keyframes shake {             0%, 100% {transform: translateX(0);}             10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}             20%, 40%, 60%, 80% {transform: translateX(10px);}          }          .shake {             -webkit-animation-name: shake;             animation-name: shake;          }                           Reload page                function myFunction() {             location.reload();          }