Front End Technology Articles - Page 653 of 860

You can try to run the following code to rotate div with matrix transforms using CSS:ExampleLive Demo                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#myDiv1 {             /* IE 9 */             -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);             /* Safari */             -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);             /* Standard syntax */             transform: matrix(1, -0.3, 0, 1, 0, 0);          }                              Welcome to my website.                      Welcome to my website.           Output

You can try to run the following code to rotate div to -20 degrees angle with CSS − Example Live Demo div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(-20deg); /* Safari */ -webkit-transform: rotate(-20deg); /* Standard syntax */ transform: rotate(-20deg); } Tutorials point.com. Tutorials point.com Output

2D transforms are used to re-change the element structure as translate, rotate, scale, and skew.The following table has contained common values that are used in 2D transformsS.NoValues & Description1matrix(n, n, n, n, n, n)Used to defines matrix transforms with six values2translate(x, y)Used to transforms the element along with x-axis and y-axis3translateX(n)Used to transforms the element along with x-axis4translateY(n)Used to transforms the element along with y-axis5scale(x, y)Used to change the width and height of element6scaleX(n)Used to change the width of element7scaleY(n)Used to change the height of element8rotate(angle)Used to rotate the element based on an angle9skewX(angle)Used to defines skew transforms along with ... Read More

Web fonts are used to allow the fonts in CSS, which are not installed on a local system. ExampleThe following code shows the sample code of font face:Live Demo                    @font-face {             font-family: myFirstFont;             src: url(/css/font/SansationLight.woff);          }          div {             font-family: myFirstFont;          }                     This is the example of font face with CSS3.       Original Text :This is the example of font face with CSS3.     Output

Use the word-wrap property to break the line and wrap onto next line. You can try to run the following code to implement a word-wrap property in CSSExampleLive Demo                    div {             width: 200px;             border: 2px solid #000000;          }          div.b {             word-wrap: break-word;          }                     word-wrap: break-word property       ThisisdemotextThisisdemotext:       thisisaveryveryveryveryveryverylongword.       The long word wraps to the next line.     Output

The text-overflow property is used to determine how overflowed content that is not displayed is signaled to users with CSS.ExampleYou can try to run the following code to implement a text-overflow property in CSS:Live Demo                    p.text1 {             white-space: nowrap;             width: 200px;             border: 1px solid #000000;             overflow: hidden;             text-overflow: clip;          }          p.text2 { ... Read More

The text-align-last property is used to align the last line of the text. You can try to run the following code to align the last line of the text with CSSExampleLive Demo                    .mydiv {             text-align-last: right;          }                     text-align-last Property                This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text.           Output

Use the text-emphasis property to emphasis text and color with CSS.Let us see an example:text-emphasis: text-emphasis-style text-emphasis-color;Here,text-emphasis-color: foreground color of the emphasis marktext-emphasis-style: emphasis marks on the element's text

The word-wrap property is used to break the line and wrap onto next line.ExampleThe following shows sample syntax −Live Demo                    div {             width: 200px;             border: 2px solid #000000;          }          div.b {             word-wrap: break-word;          }                     word-wrap: break-word property       ThisisdemotextThisisdemotext:       thisisaveryveryveryveryveryverylongword. The long word wraps to       the next line.     Output

Used to emphasis text and color. Let us see an example:text-emphasis: text-emphasis-style text-emphasis-color;Here,text-emphasis-color: foreground color of the emphasis marktext-emphasis-style: emphasis marks on the element's text