7 Important CSS3 Properties You Must Know (2020)

7 CSS3 Properties you Need to be Familiar With in 2020. Let's discuss about some of the properties that are very important in CSS3 & should be known by every Web developer.
 
1. border-radius 
3. box-shadow
3. text-shadow
4. Multiple Backgrounds
5. box-sizing
6. border-image
7. Gradients

1. border-radius: The border-radius property defines the radius of the element's corners.
This property can have from one to four values as mentioned below.
Four values - border-radius: 15px 50px 30px 5px;
(first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner)

Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.


2. box-shadow:
The box-shadow property defines the shadow of an element. The box-shadow property attaches one or more shadows to an element. The CSS box-shadow property applies shadow to elements. In its simplest use, you only specify the horizontal shadow and the vertical shadow. The box-shadow accepts four parameters:
1. x-offset
2. y-offset
3. blur
4. color of shadow

The syntax below shows that first '10px' indicates the x-offset, next '10px' indicates the y-offset, '5px' indicates the blurness of the shadow & at last the 'grey' indicates the color of the shadow.
div {
  box-shadow: 10px 10px 5px grey;
}


3. text-shadow:
The CSS text-shadow property applies shadow to text. The text-shadow is one of the few CSS properties that we can omit the use of vendor-prefixes. Quite similar to box-shadow, it must be applied to text, and receives the same four parameters mentioned below:
1. x-offset
2. y-offset
3. blur
4. color of shadow

The syntax below shows that first '2px' indicates the x-offset, next '2px' indicates the y-offset, '5px' indicates the blurness of the shadow & at last the 'red' indicates the color of the shadow.
h1 {
  text-shadow: 2px 2px 5px red;
}


4. Multiple Backgrounds: The background property allows the developer to add multiple backgrounds in website.

Syntax:
.box {
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

In the above mentioned example, using a comma as the separator, we're referencing two separate background images. Notice how, in the first case, it's placed in the top left position (0 0), & in the second, the top right position (100% 0).


5. box-sizing:
The CSS box-sizing property allows us to include the padding and border in an element's total width and height.
If you set box-sizing: border-box; on an element, the padding and border are included in the width and height.
Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way.
The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).

Applying the below code to all elements is safe and wise:
* {
  box-sizing: border-box;
}


6. border-image:
The CSS border-image property allows you to specify an image to be used instead of the normal border around an element.
The property has three parts:
1. The image to use as the border
2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched

The border-image property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify.
Note: For border-image to work, the element also needs the border property set! Take a look at the below mentioned example regarding the border-image property.

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(imageName.jpg) 30% round;
}

Tip: The border-image property is actually a shorthand property for the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.


7. Gradients:
CSS gradients let you display smooth transitions between two or more specified colors.
CSS defines two types of gradients:
1. Linear Gradients (goes down/up/left/right/diagonally)
2. Radial Gradients (defined by their center)

1. CSS Linear Gradients: To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

2. CSS Radial Gradients: A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Radial Gradient - Evenly Spaced Color Stops (this is default)


Conclusion:
Thank you so much for reading, and I hope you learned a bit about CSS3! Also if you want to gain some knowledge on Important properties related to normal CSS, click here.

Happy Learning!