Introductory Guide To CSS3

CSS3 is the latest standard for CSS. It is completely backwards compatible with earlier versions of CSS. There are many new exciting features of CSS3.

images/articles/css/css17.webp

1. CSS3 Borders

With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border.

border-radius: 10px;
border-imnage: url(border.png) 30 round;

2. CSS3 Backgrounds

CSS3 contains several new background properties, which allow greater control of the background element.

3. CSS3 Colors

With CSS, you can give color names, hexadecimal and RGB (Red, Green, Blue) values. In addition, CSS3 also introduces RGBA (Red, Green, Blue, Alpha) colors, HSL (Hue, Saturation, Lightness) colors, HSLA colors and opacity.

  • Alpha channel specifies the opacity for a color. It is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
  • Hue is a degree on the color wheel, from 0 to 360 - 0 (or 360) is red, 120 is green and 240 is blue.
  • Saturation is a percentage value - 100% is the full color.
  • Lightness is a percentage - 0% is dark (black) and 100% is white.

4. CSS3 Gradients

CSS3 gradients let you display smooth transitions between two or more specified colors. Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.

There are two types of Gradient:

  1. Linear Gradient
  2. Radial Gradient

5. CSS3 Web Fonts

Web fonts allow you to use fonts that are not installed on the user's computer. You can just include the font file on your web server, and it will be automatically downloaded to the user when needed.

6. CSS3 Transforms

With CSS3 transform, you can move, scale, turn, spin, and stretch elements. A transformation is an effect that lets an element change shape, size and position.

7. CSS3 Multiple Columns

With CSS3, you can create multiple columns for laying out text just like in newspapers.

column-count: 3;
column-gap: 20px;