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 10 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 the 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 splits 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 Explore, which accept only two values: clip and ellipsis.
-o-text-overflow: ellipsis;
text-overflow:ellipsis;

Conclusion

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

Comments