Web Development Articles - Page 520 of 1049

2D transforms are used to re-change the element structure as translate, rotate, scale, and skew. The following are some of the 2D transform functions − Sr.No. Value & Description 1 matrix(n, n, n, n, n, n)Used to defines matrix transforms with six values 2 translate(x, y)Used to transforms the element along with x-axis and y-axis 3 skew()skew an element along the X-axis and Y-axis 4 skewX()Skew an element along the X-axis 5 skewY()Skew an element along the Y-axis 6 scale(x, y)Used to change the width ... Read More

To create CSS3 Box and Text Shadow effects, use the box-shadow and text-shadow property respectively. Let us understand them one by one with examples. Text Shadow To add shadow to text, use the text-shadow property. Let us see the syntax − text-shadow: value The above value can be the following − h-shadow− Set the position of the horizontal shadow. v-shadow− Set the position of the vertical shadow. blur-radius− Set the blur radius. color− Set the shadow color of the shadow. Create a text shadow Let us see an example to create a text shadow − ... Read More

Linear gradients are used to arrange two or more colors in linear formats like top to bottom. To add transparency, use the RGBA() function and define the color stops. At least two color stops should be mentioned. Let us first see the syntax. Syntax The following is the syntax to create Linear Gradients − background-image: linear-gradient(dir, colorStop1, colorStop2, colorStop3, ...); Above, the dir is the direction i.e., from − Left to Right Right to Left Diagonal Top to Bottom Linear Gradient Beginning From Right to Left The following is the code to set transparent linear gradient ... Read More

For more control over the direction of the gradient, define angle under the linear-gradient() method of the background-image property. This gives more control over the gradient direction − Value 0deg is the "to top" direction Value 90deg is the "to right" direction Value of 180deg is the "to bottom" direction The following is the syntax − background-image: linear-gradient(angle, color-stop1, color-stop2); Set the angle of the linear gradient The following is the code for setting the direction of linear gradients using angles in CSS. .linearGradient { background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow); } ... Read More

Gradients displays the combination of two or more colors. Linear gradients are used to arrange two or more colors in linear formats like top to bottom. Radial gradients appear at center. Linear-Gradient The linear gradient is set using the background-image property. The angle is set as the first parameter. Here is the example − body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div ... Read More

The JavaScript symbol.valueOf() function returns the primitive value of a symbol object.Following is the code for implementing symbol.valueOf() function −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript symbol.valueOf() function CLICK HERE Click on the above button to get the value of symbols    let fillEle = document.querySelector(".sample");    const symbol = Symbol('computer');    const symbol1 = Symbol(234);    let res = symbol.valueOf();    let res1 = symbol1.valueOf();    document.querySelector(".Btn").addEventListener("click", () => {       fillEle.innerHTML += 'res = ' + res.toString() + "";       fillEle.innerHTML += 'res1 = ' + res1.toString() + "";    }); OutputOn clicking the “CLICK HERE” button −

Apply styles to HTML elements with particular attributes using Attribute Selectors in CSS. Let us see which attribute selectors are available with the rules. The [attribute] Selector The [attribute] selector selects elements with a specified attribute. Here, the link with the attribute target is styled − a[target] { background-color: red; color: white; } Example Let us see the example − a[target] { background-color: red; ... Read More

The JavaScript Symbol.toStringTag symbol is a very well known symbol that is a string valued property used for giving a description of an object during its creationFollowing is the code for Symbol.toStringTag symbol −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript Symbol.toStringTag Symbol CLICK HERE Click on the above button to get the string description for objects    let fillEle = document.querySelector(".sample"); ... Read More

The Fallback color is used to specify the color for a situation when the browser doesn’t support RGBA colors. Some browsers that don’t support fallback colors are Opera. Specify a solid color before a RGBA color so the solid color can still work if the browser doesn’t support the RGBA colors. Set the Fallback Color The following is the code for declaring a fallback color in CSS − background-color: purple; /*fallback color*/ Example Let us see an example − body{ ... Read More

Image sprite is used to reduce the number of http requests that makes our site’s load time faster.Following is the code for creating a navigation menu using CSS image sprite −Example Live Demo body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    margin: 0px; } span {    width: 200px;    height: 300px;    background-color: black; } nav {    background-color: black;    height: 50px;    padding-top: 15px;    padding-left: 10px; } nav a {    font-size: 20px;    color: white;    text-decoration: none;    margin-right: 10px; } .home {    width: 32px;    height: 32px; ... Read More