Category: CSS3 Tutorials

CSS caret-color property specifies the color of the insertion caret, which is the visible marker indicating where the next typed character will be placed. It is also known as the text input cursor. The caret is found in elements such as <input> or those with contenteditable attribute. This is a thin vertical line, flashing to enhance visibility.…

CSS box-decoration-break property specifies how the background, padding, border, and border-radius of an element should behave when the content is broken across multiple lines or columns. It controls whether these properties should be continuous or fragmented across the line breaks. This property will affect the appearance of the following properties: Possible Values Applies to All elements. Syntax…

The box-shadow property of CSS is useful in adding a shadow effect around an element. One or more shadow effects can be added, separated by commas. The box shadow is described by X and Y offsets relative to the element, blur, spread radius and color. Possible Values Applies to All the HTML elements. DOM Syntax CSS box-shadow…

In CSS, gradients are a way to create a smooth transition between two or more colors. Gradients allow you to add color and depth to various elements in your web design, such as backgrounds, borders, and text. Overview Following are some point to know about gradients: Gradients Types Gradients can be categorized as: Linear Gradients As the name suggests, linear…

CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e. its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects. You can specify your color values…

In CSS, you can use multiple background images for an element. First background should be layered on top, and the last background should be layered behind. Only the last background can have a background color. Syntax You can use shorthand and individual background properties, excluding background-color. The following background properties can be provided as a list, one for each background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.…

For brevity purpose, there is a shorthand for setting up of border image, i.e., border-image. The values passed to shorthand border-image are separated using the solidus symbol (/). The values should be listed in a specific order, which is slice, then width and last is offset. Applies to All HTML elements, except internal table elements. Syntax Note: You can also declare the property border-image with just…

CSS rounded corners are created using the border-radius property. This property allows you to specify the radius of the corners of an element’s outer border edge. Possible Values Applies to All the HTML elements, except for table and inline-table elements with border-collapse set to collapse. Applies to ::first-letter. DOM Syntax The following diagram demonstrates the different border-radius corners for reference: The following…