10 most useful css3 properties for your project

CSS3 around here for more than 5 years. If you are a web designer, you may have learned lots of new properties in CSS3 over the years. But, it's hard to remember all the 116 properties by a single person. Sometime, you may have forgot few properties while designing a page. Don't worry it's natural.

In this article we bring the most useful CSS3 properties, which may help you to build modern websites. So, sit tight for amazing journey.

1. Rounded Corners -

A rounded button can spruce up a website, but it's hard to create one. Rounded corner requires a designer to write a lot of code. Adjusting the height, width and positioning of these elements is a never-ending chore because any change in content can break them. CSS3 solve this problem using border-radius property. It gives you the same rounded-corner effect but don't have to write all the code.

    border-radius: 5px;

    -webkit-border-radius: 5px;

2. Multiple backgrounds -

Now, CSS3 help you to add multiple background in the same element. The background property has been overhauled to allow for multiple backgrounds, where each image can be moved and animated independently. Currently not all browser support for multiple backgrounds. Make sure that you provide a fallback for the browsers in your project. Else, they'll skip over the property entirely, leaving your background blank.

    background: url('image/img1.jpg') 0 0 no-repeat, url('image/img2.jpg') 100% 0 no-repeat;

3. Clever shadow -

You may have heard about the new property box-shadow in CSS3, which allows you to immediately apply depth to your elements. But, by applying shadows to the ::before and ::after pseudo-classes, we can create some really interesting perspectives.

    .element:after {

    content: '';

    position: absolute;

    z-index: -1;

    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

    width: 70%;

    left: 15%;

    height: 100px;

    bottom: 0;

    }

4. Text shadow -

The new text-shadow property allows you to add drop shadows to the text. Prior to CSS3, this would be done by either using an image or duplicating a text element and then positioning it. It is quite similar to box-shadow with the same four parameters.

    text-shadow: 0 1px 0 white;

5. Calculating values -

calc() function is another awesome feature of CSS3. It allows you to do simple arithmetic calculations in CSS. It can be used anywhere, for length or for size. What is even cooler, is that you can freely mix different units, like percentages and pixels. This makes a lot of layout hacks that can be very useful for your next project.

    width: calc(100% - 40px);

6. Gradients -

Gradients give web designers the power to create smooth transitions between colors without using a single image. CSS gradients also look great on retina displays, because they are generated on the fly. They can be linear or radial, and can be set to repeat.

    background:linear-gradient(to bottom, #8df2f9 , #66c0c7);

    background:radial-gradient(#8df2f9,#66c0c7);

7. Border Images -

The border-image property allows you to display custom designed border around the element. The borders are contained in a single image, with each region of that image corresponding to a different part of the border.

    border-image:url('/image/border.png') 30 30 round;

8. 3D transforms -

CSS3 brings flashy and full with eye-candy property transform-style. It helps you to create 3D perspective object in your browser without any help of JavaScript.

    transform-style: preserve-3d;

    -webkit-transform-style: preserve-3d;

9. Columns -

Column-based layouts were notoriously difficult to pull off in previous CSS version. It usually involved using JavaScript to split the content into different elements. Fortunately, now there is a way around this by using the CSS3 columns.

    -webkit-columns:4;

    columns:4;

10. Text overflow -

The text-overflow property can be used to cut off text that exceeds its container. It was originally developed by Internet Explorer, which accept only two values: clip and ellipsis.

    -o-text-overflow: ellipsis;

    text-overflow:ellipsis;

11. Font -

Fonts in general refer to the appearance of text in your website. There are a few things to look out for. Like other properties, font has a shorthand. Do note that it is common to see the font shorthand declaration only once in the whole CSS file. It is common to use the different properties at other times.

body {

    font: italic small-caps bold 20px/1.5 "Proxima Nova", helvetica, arial, sans-serif;

    /* font shorthand */

}

12. Border-radius -

Easily the most popular CSS3 property in the bunch, border-radius was sort of the flagship CSS3 property. While many designers were still terrified of the idea that a layout could be presented differently from browser to browser, a baby-step, like rounded corners, was an easy way to lure them in!

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

Conclusion

Thank you so much for reading and please share you favorite CSS3 property in the comment section below.

 

Recommended for you