Category: Advanced Features

CSS box-shadow property adds a shadow effect around an element. One or more shadow effects can be added, separated by commas. The box shadow is described by horizontal and vertical offsets relative to the element, blur, spread radius and color. Syntax box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit; Property Values…

CSS gradients allows to design custom colors for HTML elements by creating a smooth transition between two or more colors. What is CSS Gradient? Table of Contents Types of CSS Gradients CSS defines three types of gradients Linear GradientRadial GradientConic Gradient Choose a gradient for background Linear Gradients The linear gradient creates a color band that flows in a…

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 .multibackgrounds { background: background1, background2, /* , */ backgroundN; } You can use shorthand and individual background properties, excluding background-color. The following background properties…

CSS border-images properties are used to create custom borders by setting image as border around any element. The border-image property takes the image and slices it into nine sections(3×3). It then places the corners at the corner of the border, and the edges are repeated or stretched as you specify. Middle part of image will be ignored.…

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 object.style.borderRadius = “length”; The following diagram demonstrates the different border-radius corners for…

CSS transform are used to animate elements in three-dimensional space by using properties like translate, scale and rotate. In other words, these functions let you rotate, scale, and move elements along the X, Y, and Z axes, adding depth and perspective to your designs. 2D Transform 3D Transform Table of Contents CSS 3D Translate() CSS translate3d() function…

CSS transforms are used to modify the element’s shape and sizes and are responsible for movements of elements in two-dimensional space using functions like translate(), scale(), rotate(), and skew(). These functions allow you to move, scale, rotate, and skew elements along the X and Y axes, creating various visual effects and manipulations. 2D Transform 3D…