Top 5 Basis css3 properties you must familiar

1) Box-shadow

Box-shadow commonly used css3 property in the websites. If we give the shadow to Block level elements(like divs), Also , you can use RGBa and HSLa values for the color, for example, a 50% transparency of black.

-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0, 0.4);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0 .4);
box-shadow: 10px 10px 5px 0px rgba(0,0,0, 0.4);


Box-shadow: x-offset(horizontal) y-offset(vertical) blur spread color(rgba,hexadecimal);

  1. x-offset : x- offset means the position of the shadow is horizontal offset, It we give the value in positive (10px) that means the shadow will be on the right side of the container , and if we give the value in negative (-10px) that means the shadow will be on the left side of the container.
  2. y-offset : y-offset means the position of the shadow is vertical offset, It we give the value in positive (10px) that means the shadow will be on the below of the container , and if we give the value in negative (-10px) that means the shadow will be on the above of the container.
  3. Blur radius: However blurry you want the shadow. if set to zero(0) the shadow are going to be sharp, the upper value , the additional blurred it’ll
  4. Spread radius: The size of shadow, Spread the distance of shadow used the value in positive as well as negative, 0 is the default value.
  5. Color : Default value is black. Color value given in also RGBA and hexadecimal number it is depend on browser

2) Border-radius

If we need the round corner in the design then we go for the border-radius syntax in css. The value of border radius like clockwise. Order for the border radius top-left, top-right, bottom right, bottom left. we can also create circles with this property(50%).

Border-radius:5px 5px 5px 5px;
-moz- Border-radius:5px 5px 5px 5px;
-webkit- Border-radius:5px 5px 5px 5px;

3) Text-shadow

/* x-offset  |  y-offest | blur | color of shadow */
p {  text-shadow: 1px 1px 1px #000,  3px 3px 5px blue; }

Text-shadow property uses for give a shadow to text. You can also apply multiple text shadow to each letter by comma separating.

p {  text-shadow: 1px 1px 1px #000,  3px 3px 5px blue; }

4) Multiple background images

Css allows web designer to add multiple background images for container or html body, you apply multiple background images by comma separating.

#trick {   background-image: url(img-one.png), url(img-two.png); }
//You can also using the background shorthand property like this.
#trick {   background: url(img-one.png) right bottom repeat, url(img-two.png) right bottom no-repeat; }
//or
#trick {   background-image: url(img-one.png), url(img-two.png);
           background-position: right bottom, left top;
           background-repeat: no-repeat, repeat;}

5) Background size

The background-size CSS property specifies the dimensions of the background pictures. the dimensions of the image may be totally forced or solely partly so as to preserve its intrinsic quantitative relation. The background-size property can settle for 2 parameters: the x and y widths, severally.

div {background: url(img_flwr.gif);
     background-size: 80px 60px; /* WIDTH HEIGHT */
     background-repeat: no-repeat;
     background-size: cover; }

//Syntax for Property Values:
Background-size: cover | auto | contain | length | percentage
//

Cover: Scale the background images according to background container covered by the image. Background image scale, both dimensions are greater than or equal to the corresponding size of the container.

Auto: The background-image contains its width and height.

Contain: Scale the image dimensions to both sides, its width and its height can fit inside the content area.

Length: A length dimension (Width and height) of the background image. If only one value is given, the second is set to “auto” and negative values are not allowed.

Percentage: A length dimension (Width and height) of the background image in percent of the parent element. If only one value is given, the second is set to “auto”.

Leave a Comment.