Combination of CSS 3 + HTML 5 is the future of the Web. Although not all browsers have support for them. This article describes the 5 CSS3 techniques that can help you achieve your future Web. These techniques can be use in a professional projects and in your personal blog sites, Web design community.

1. Achive Rounded corners using CSS3

This features is most commonly used in today’s modern browsers , standard HTML box object is a 90-degree square corners, you can change the shape to round using CSS3. This feature is support by Firefox, Safari, Chrome.

rounded corner using css

  -Moz-border-radius: 20px;
  -Webkit-border-radius: 20px;
  border-radius: 20px;
  Even a single rounded corners can also be achieved, but Mozilla and Webkit syntax is slightly different.
  -Moz-border-radius-topleft: 20px;
  -Moz-border-radius-topright: 20px;
  -Moz-border-radius-bottomleft: 10px;
  -Moz-border-radius-bottomright: 10px;
  -Webkit-border-top-rightright-radius: 20px;
  -Webkit-border-top-left-radius: 20px;
  -Webkit-border-bottom-left-radius: 10px;
  -Webkit-border-bottom-rightright-radius: 10px;

2. Adding graphics border to box corner

graphicsl border using css3
You can add image border to a box using CSS3, the syntax is as follows:

  border: 5px solid # cccccc;
  -Webkit-border-image: url (/ images / border-image.png) 5 repeat;
  -Moz-border-image: url (/ images / border-image.png) 5 repeat;
  border-image: url (/ images / border-image.png) 5 repeat;

  border: 5px is the width of the border, You can also set different picture for each edge individually


3. Give shadow to block and text

Web designers no more using photoshop to give shadow effect to text, this could be easily achieve by using CSS3 code in you html page.
text shadowing using css3

  -Webkit-box-shadow: 10px 10px 25px # ccc;
  -Moz-box-shadow: 10px 10px 25px # ccc;
  box-shadow: 10px 10px 25px # ccc;

The above code set the shadow for X and Y displacement to 10px and the last one set the color of the shadow. For text shadow use following code:

  text-shadow: 2px 2px 5px # ccc;

  In text shadowing we can also use opacity to transparency.

4. Using custom fonts in your CSS

Now it is common practice to use custom fonts. In CSS3 @ font-face can specify their own fonts, but because of copyright issues involved, the actual use of fonts is limited (You can even use hindi font if you want).
  Syntax is as follows:

   @ Font-face {
  font-family: 'Anivers';
  src: url ('/ images / Anivers.otf') format ('opentype');

  Supported browsers: Firefox 3.1, Safari, Opera 10 and IE7 (requires a lot of trouble if you do not bother, you can achieve this functionality in IE, please refer to: make font-face work in IE)

5. Use RGBA achieve transparency effects in CSS3

We can achieve this effect using PNG images (but in the IE browser support is not good). Using CSS3, we can achieve a transparent effect using following code.

  rgba (200, 54, 54, 0.5);
  background: rgba (200, 54, 54, 0.5);
  color: rgba (200, 54, 54, 0.5);
  color: # 000;
  opacity: 0.5;

RGBA transparency effects