12 Awesome CSS3 Features That You Can Finally Start Using
If you are like me, when you see an impressive demo of a new CSS3 feature, you can't wait to start using it in websites. Of course, then you see that it is available in only one or two of the major browsers (and this never includes IE), so ultimately you decide to wait. I have good news for you - with the latest browser releases, there are a few awesome features that are finally supported everywhere, and you can start using them right now!
A word of caution - most of these features will not work in older versions of IE (9 and below). If these browsers are a large portion of your demographic, I am afraid that you will have to rely on fallbacks. But for the rest of us, here is what modern browsers have to offer:
1. CSS Animations and Transitions
CSS animations are finally available in all major browsers, even in IE (since version 10). There are two ways to create CSS animations. The first is very easy, it is done through animating the changes of CSS properties with the transition declaration. With transitions, you can create hover or mouse down effects, or you can trigger the animation by changing the style of an element with JavaScript. You can see the transition below by hovering over the planet - this will cause the rocket to close in.
The second way for defining animations is a bit more complicated - it involves the description of specific moments of the animation with the code>@keyframe rule. This allows you to have repeating animations that don't depend on user actions or JavaScript to get triggered. Hit the Edit button to see the code.
.container{
width: 300px;
height:300px;
margin: 0 auto;
position:relative;
overflow:hidden;
}
.planet{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center;
}
.rocket{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center;
/* Chrome still requires the -webkit- prefix */
-webkit-animation:orbit 2s linear infinite;
animation:orbit 2s linear infinite;
transition:background-position 0.8s;
}
.container:hover .rocket{
background-position:80px center;
}
/* Define the keyframes of the animation */
@-webkit-keyframes orbit {
from {
-webkit-transform:rotate(0deg);}
to {
-webkit-transform:rotate(360deg);
}
}
@keyframes orbit {
from {
transform:rotate(0deg);
/* I am including the -webkit-transform properties, because
Chrome might start supporting keyframe without prefix in the future,
but we can't be certain whether it will support prefix-free transform
at the same time */
-webkit-transform:rotate(0deg);}
to {
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
}
<div class="container">
<div class="planet"></div>
<div class="rocket"></div>
</div>
There is much to learn about CSS animations, and I suggest that you start from this Mozilla Developer Network (MDN) article. If you are curious about browser support, see this compatibility table.
2. Calculating Values With calc()
Another new and awesome CSS feature is the calc() function. It allows you to do simple arithmetic calculations in CSS. You can use it anywhere a length or a size is required. What is even cooler, is that you can freely mix different units, like percentages and pixels. This makes a lot of layout hacks that you might have used in the past obsolete. The best news? It works in IE9 and up, prefix-free.
.container{
/* Calculate the width */
width: calc(100% - 40px);
background-color:#CDEBC4;
color:#6D8B64;
text-align:center;
padding:25px 0;
margin: 0 auto;
}
<div class="container">
<p>This div has 20px on either side.</p>
</div>
Learn more about the calc() function here, or see a compatibility table.
3. Advanced Selectors
These days, if you assign IDs to elements only so you can style them, you are probably doing it wrong. CSS 2.1 and CSS 3 introduced a number of powerful selectors that can make your layouts cleaner, and your stylesheets more awesome.
These are supported in all major browsers including IE9 and up. Hit Edit to see the source code for the example.
/* Style the elements (nothing interesting here) */
p{
font-size: 16px;
width: 420px;
margin: 20px auto 0;
text-align:center;
}
.container{
width: 420px;
margin:50px auto 0;
overflow: hidden;
padding:5px;
}
.elem{
width:30px;
height:30px;
margin:4px;
background-color:#A0DFAC;
float:left;
}
.elem span{
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:2px solid #fff;
}
/* Selectors for matching the first letter and line: */
p::first-letter{
background-color: #666;
color: #FFF;
font-size: 24px;
font-style:normal;
display: inline-block;
padding: 0 5px;
border-radius: 3px;
margin-right: 2px;
font-family: serif;
}
p::first-line{
font-size: 18px;
text-transform: smallcaps;
font-style: italic;
text-decoration: underline;
}
/* Make the first and last elements purple */
.elem:first-child,
.elem:last-child{
background-color:#948bd8;
}
/* Make every other element rounded */
.elem:nth-child(odd){
border-radius:50%;
}
/* Make the sixth element red */
.elem:nth-child(6){
background-color:#cb6364;
}
/* Style the element which contains the span */
.elem:not(:empty){
background-color:#444;
position:relative;
-webkit-transform:rotate(25deg);
transform:rotate(25deg);
}
/* Target elements by attribute */
.elem[data-foo=bar1]{
background-color:#aaa;
}
.elem[data-foo=bar2]{
background-color:#d7cb89;
}
/* The attribute value should start with bar. This matches both
of the above elements */
.elem[data-foo^=bar]{
width: 16px;
height: 16px;
margin: 11px;
}
/* The element that follows after the one with data-foo="bar2" attribute */
.elem[data-foo=bar2] + .elem{
background-color:#78ccd2;
}
<p>This is a regular paragraph of text, which has a number of awesome CSS3 styles applied..</p>
<div class="container">
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"><span></span></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem" data-foo="bar1"></div>
<div class="elem" data-foo="bar2"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>
Learn more about these selectors here, or take a look at which browsers support them.
4. Generated Content and Counters
Generated content is a powerful tool in the hands of developers, made available by the ::before and ::after pseudo elements. This feature lets you use less HTML to achieve the same layouts. This is especially beneficial in cases where you need extra box shadows or other visual elements that would require extra spans or divs. In the end, you get a more minimal and semantically correct HTML.
CSS3 also gives pseudo elements access to counters, which can be incremented with a CSS rule. They can also access attributes from the parent elements that contain them. See the source of the example below.
.container{
/* Set a counter named cnt to 0 */
counter-reset: cnt;
position:relative;
text-align:center;
padding:20px 0;
width:420px;
height: 160px;
margin: 0 auto;
}
/* You can style pseudo elements and give them content,
as if they were real elements on the page */
.container::before{
display: block;
content:'Hover over these items:';
font-size:18px;
font-weight:bold;
text-align:center;
padding:15px;
}
.container span{
display:inline-block;
padding:2px 6px;
background-color:#78CCD2;
color:#186C72;
border-radius:4px;
margin:3px;
cursor:default;
}
/* Create a counter with a pseudo element */
.container span::after{
/* Every time this rule is executed, the
counter value is increased by 1 */
counter-increment: cnt;
/* Add the counter value as part of the content */
content:" #" counter(cnt);
display:inline-block;
padding:4px;
}
/* Pseudo elements can even access attributes of their parent element */
.container span::before{
position:absolute;
bottom:0;
left:0;
width:100%;
content:attr(data-title);
color:#666;
opacity:0;
/* Animate the transitions */
-webkit-transition:opacity 0.4s;
transition:opacity 0.4s;
}
.container span:hover::before{
opacity:1;
}
<div class="container">
<span data-title="I have a wonderful title!">This is item</span>
<span data-title="These titles are shown only using CSS, no JavaScript is used!">This is item</span>
<span data-title="Hello there!">This is item</span>
<span data-title="Generated content is awesome!">This is item</span>
</div>
Generated content is supported everywhere, including IE9 and up.
5. Gradients
Gradients give web designers the power to create smooth transitions between colors without having to resort to images. 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. They have been around for some time, but after a few minor syntax changes over the last months, they are finally available nearly everywhere, prefix-free!
.container{
text-align:center;
padding:20px 0;
width:450px;
margin: 0 auto;
}
.container div{
width:100px;
height:100px;
display:inline-block;
margin:2px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD;
border-radius:2px;
color:#666;
vertical-align: top;
line-height: 230px;
font-size: 12px;
}
#el1{
background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
}
#el2{
background:radial-gradient(#77d19e,#46c17b);
}
#el3{
background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);
}
#el4{
background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px);
}
<div class="container">
<div id="el1">Linear</div>
<div id="el2">Radial</div>
<div id="el3">Repeating Lin.</div>
<div id="el4">Repeating Rad.</div>
</div>
See a detailed tutorial here, and a compatibility table here.
6. Webfonts
Can you imagine that there was a time when we were limited to only a handful of "web-safe" fonts and nothing else? It is hard to believe, given that today we have services like Google Fonts and typekit, which let you embed beautiful fonts by simply including a stylesheet in your page. There are even icon fonts like fontawesome, which contain pretty vector icons, instead of letters or numbers. This was all made possible by the code>@font-face rule, which lets you define the name, characteristics and source files for fonts, which you can later refer in your font/font-family declarations.
h1{
/* Using the custom font we've included in the HTML tab: */
font-family: Satisfy, cursive;
font-weight:normal;
font-size:24px;
padding-top: 60px;
}
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" /> <h1>This is my pretty webfont!</h1>
Note that due to security limitations in browsers, I was not able to embed a local font in the inline editor above, so I used one from Google Webfonts instead. But you can see a working example here.
With some workarounds, webfonts work on browsers as old as IE6. The two hosted services I mentioned above handle these cases for you, so you don't have to.
7. Box Sizing
The single biggest cause for headaches for CSS beginners is the box model. The standardization bodies have probably had their reasons, but it doesn't feel at all intuitive to have the CSS width and height of an element affected by its padding and borders. This little (mis)feature breaks layouts and wreaks havoc, but finally there is a way to restore our sanity by using the box-sizing rule. You can set it to border-box, which makes elements behave exactly the way you expect. See for yourself:
.container{
text-align:center;
}
.container div{
/* Setting the box-sizing method: */
box-sizing:border-box;
/* Firefox still requires the -moz prefix */
-moz-box-sizing:border-box;
width:120px;
height:120px;
display:inline-block;
vertical-align:top;
}
/* Thanks to box-sizing, we can set whatever padding and border
we want, and the elements will still keep the same size */
#el1{
color:#524480;
background-color:#B2A4E0;
}
#el2{
padding:8px;
border:10px solid #9ec551;
background-color:#fff;
}
#el3{
padding:32px;
background-color:#ccc;
}
<div class="container">
<div id="el1">Element 1</div>
<div id="el2">Element 2</div>
<div id="el3">Element 3</div>
</div>
Learn more about the box-sizing rule here, or see the compatibility table.
8. Border Images
The border-image property allows you to display custom designed borders around elements. The borders are contained in a single image (sprite), with each region of that image corresponding to a different part of the border. Here is the image used in the below example.
p{
text-align:center;
padding:20px;
width:340px;
margin: 0 auto;
/* Set the border and border image properties */
border:30px solid transparent;
border-image:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 round;
}
<p>Say hello to a fancy border image!</p>
For a more in-depth look, check out this MDN page and this article on CSS tricks. Border images are supported in all major browsers and IE11.
9. Media Queries
Media queries are an absolute must if you are serious about web design. They have been around for a while, but are worth a mention, because they have transformed the way we build websites. It used to be that you had a regular website, wide enough to fit the smallest monitor resolution used at the time, and a separate mobile website. These days, we build sites that are responsive and which adapt to the type of device, orientation and resolution.
Media queries are surprisingly easy to use - all you need to do is to enclose CSS styles in a block guarded by a code>@media rule. Each code>@media block is activated when one or more conditions are met. As an example, try resizing this page. I have also included it in the editor below; try removing the the code>@media block to see what happens.
/* Style the main content and the sidebar */
.container{
width:900px;
margin: 0 auto;
overflow:hidden;
}
.main-section{
background-color:#CDEBC4;
color:#6D8B64;
width:520px;
float:left;
height:500px;
}
.sidebar{
background-color:#ccc;
width:350px;
float:right;
height:400px;
}
.container p{
padding-top:100px;
text-align:center;
}
.note{
text-align:center;
padding-top:60px;
font-style:italic;
}
/* This simple media query makes the column layout
linear on smaller screens */
@media (max-width:900px){
.container{
width:100%;
}
.main-section, .sidebar{
width:auto;
margin-bottom:20px;
float:none;
}
}
<div class="container">
<aside class="sidebar"><p>This is the sidebar<p></aside>
<div class="main-section">
<p>The main content of the article goes here</p>
</div>
</div>
The media query can contain checks for the device resolution and orientation, color depth, pixel density and more. Read an in-depth article here, and see the compatibility table.
10. Multiple Backgrounds
With multiple backgrounds, designers can achieve very interesting effects. They can stack different images as backgrounds of the same element. Each image (or layer) can be moved and animated independently, like you can see in the demo below (try hovering over the image with your mouse). All background-releated CSS rules can now take a comma-delimited list of properties, each for the specific background image:
.space{
/* Pass a comma separated list of backgrounds: */
background:url('https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big.png') no-repeat center 70px, url('https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg') no-repeat bottom center;
width:200px;
height:200px;
margin: 0 auto;
border-radius:3px;
/* Animate the positions of both of the backgrounds */
transition:background-position 1s;
}
.space:hover{
/* The same goes for properties like background-position and repeat */
background-position:35% 20px, top right;
}
<div class="space"></div>
For more information on multiple backgrounds, see here. Browser support is very good - all recent versions support the rule (see the table).
11. CSS Columns
Column-based layouts were notoriously difficult to pull off in CSS. It usually involved using JavaScript or server-side processing that splits the content into different elements. This is unnecessarily complicated and takes precious development time away from what really matters. Fortunately, now there is a way around this by using the CSS columns rule:
.container{
width: 500px;
margin: 0 auto;
}
/* Creating columns is as simple as this: */
.container p{
-moz-columns:3;
-webkit-columns:3;
columns:3;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque urna nec eros ornare, ac tristique diam porta. Donec fermentum velit eget dignissim condimentum. Sed rutrum libero sit amet enim viverra tristique. Mauris ultricies ornare arcu non adipiscing. Sed id ipsum vitae libero facilisis pulvinar id nec lacus. Ut lobortis neque et luctus mattis. Morbi nunc diam, elementum rutrum tellus non, viverra mattis diam. Vestibulum sed arcu tincidunt, auctor ligula ut, feugiat nisi. Phasellus adipiscing eros ut iaculis sagittis. Sed posuere vehicula elit vel tincidunt. Duis feugiat feugiat libero bibendum consectetur. Ut in felis non nisl egestas lacinia. Fusce interdum vitae nunc eget elementum. Quisque dignissim luctus magna et elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nunc lorem, convallis consequat fermentum eget, aliquet sit amet libero.</p>
</div>
There is good support for this rule, although it still requires prefixes. Where things break down is with the support of some of the other column-related rules and differences between browsers in handling corner cases.
12. CSS 3D Transforms
There is nothing more flashy and full with eye-candy than an impressive 3D CSS demo. Although its utility outside of demos or portfolio sites is questionable, 3D CSS offers some powerful features to designers and developers that can win the hearts of users if done with good measure.
Browse through the source code of the following example by hitting the Edit button, to see how it was made.
.container{
/* How pronounced should the 3D effects be */
perspective: 800px;
-webkit-perspective: 800px;
background: radial-gradient(#e0e0e0, #aaa);
width:480px;
height:480px;
margin:0 auto;
border-radius:6px;
position:relative;
}
.iphone-front,
.iphone-back{
/* Enable 3D transforms */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/* We are using two separate divs for the front and back of the
phone. This will hide the divs when they are flipped, so that the
opposite side can be seen: */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
width:200px;
height:333px;
position:absolute;
top:50%;
left:50%;
margin:-166px 0 0 -100px;
background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/iphone.png) no-repeat left center;
/* Animate the transitions */
transition:0.8s;
}
.iphone-back{
/* The back side is flipped 180 deg by default */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
background-position:right center;
}
.container:hover .iphone-front{
/* When the container is hovered, flip the front side and hide it .. */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
}
.container:hover .iphone-back{
/* .. at the same time flip the back side into visibility */
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
}
<div class="container">
<div class="iphone-front"></div>
<div class="iphone-back"></div>
</div>
This code was modeled after our Apple-like Login Form tutorial, which I advise you to read. If you want to learn more about 3D CSS, take a look at this detailed introduction. If you don't need to target old IE, browser support is also very good.
Other Worthy Mentions
There are other notable features that are worth mentioning. If you haven't already, you should stop using prefixes for border-radius and box-shadow. You can also now use data-uri as background images in every browser. opacity is also supported everywhere, as well as the very useful background-size property.
There is still some time before cross-browser support lands for flexbox, code>@supports, filters, and CSS masks, but I am sure it will be worth the wait!
Bootstrap Studio
The revolutionary web design tool for creating responsive websites and apps.
Learn more
This is so awesome !! thanks :D
What an awesome list of CSS3 features... the columns, and the 3d transform are the main highlights for me.. But overall a really useful list of new features that any designer would want to implement... thanks a lot for this
Nice and Amazing! ~Thanks
really awesome CSS3 collection!!. will use it for future projects.
Thanks for the article :)
The calc() function is Very awesome!, Also Other Stuffs...
Thank You for this Article.
This amazing! Can't wait to get back to coding.. Thanks for sharing.
Tks dude
Perfect examples.
You the best site tutorials.
Tks and hugs
Awesome practical tutorial. I learnt and experimented so many CSS3 features in one go! Thanks for sharing :)
CSS Generated Content and Counters are part of CSS2. CSS3 only introduced double-colon syntax for pseudo-elements to distinguish them from pseudo-classes.
Awesome stuff, Martin! I've been meaning to look into calc() for a while. Now I need to start using it if it's supported by most modern browsers!
A few of these CSS3 features have been supported since IE8 namely box-sizing and border-radius and webfonts have been supported for ages. One item I disagree with is the use of CSS multi columns, you do realise they're only supported in IE10+ and have severe downsides to using them? Ignoring IE8 is possible, but IE9 is still widely used and should not be ignored just yet. 3D transforms are also not widely supported, IE10 only offers partial support for 3D transforms. 2D transforms on the other hand are usable in IE9, go nuts.
Take this guide with a grain of salt and read into some of these things people, they're not all quite usable yet.
You are right, there isn't good support for older browsers. With the release of IE11 this is the first time that all of these 12 can be used in every major browser, which I think is a good win and will only get better.
very nice. Thanks. Box-sizing is the best thing.
All great features Martin
I really need to start reading up on CSS3 - particularly like the " Generated Content and Counters"
All done without JavaScript!
Mobile browser support is still poor for some of these awesome features but it's rising fast. Thanks for sharing this!
Nice summary here, some neat features indeed. (less and less of a programming nightmare when we're talking about animated features, nested targetting, etc)
DOPE.. I've been waiting patiently....
Very nice article. Well done.
One bit of feedback: using Firefox 24 on OS X (10.8), I can't scroll your embedded code boxes without simultaneously scrolling the whole page they're embedded in. In some cases, I can't scroll through your whole code snippet without having the editor go right off the top of the screen, so I have to repeatedly drag the page back down in order to scroll through the code.
Thank you Glen! I will investigate the issue.
Really enjoy the reading, thanks for the article.
I have a question about the pseudo element selector used in the examples, why is it using 2 colons (eg. ::before)? I edited them to single colon, it's also working. But I wonder if there is any special usage of 2 colons?
The :before and :after selectors were first introduced in CSS 2.1. CSS3 changed these to ::before and ::after, but because browsers support both specs, both versions work.
You might also enjoy some of these eye-candy code samples:
https://code.google.com/p/css3-graphics/
https://code.google.com/p/jquery-css3-graphics/
Great post Martin, I like the way you show the tips.. Thanks to share!
IE8 still has 10% of the browser share and 11% in North America.
Great article, I had no idea some of these features were supported so well. Will definitely be using calc() from now on. thanks!
Awesome List. Forgot about some of these, but thanks for the reminder. Bookmarking this now.
Awesome CSS3 <3
Nice overview. Didn't know about the Columns. But my favourite is the calc() feature ; definitely gonna use that. Thanks for sharing !
CSS3 Rocks :)
Awesome! I like this article so muchhhh!!! Thanks!
Thanks :)
i already knew for few actions, but this is awesome
Very nice feature overview. You mention in the introduction already the lack of support in older versions of IE for some of the features listed. But it's not just IE and it seems to me that some of the readers don't see that, even though you provided links to 'caniuse' everywhere.
(BTW, they have a very nice beta version running atm: http://beta.caniuse.com/#search=calc)
One example is calc() - which I also can't wait for to use, but which has no support in current Android native browser versions.
The second link under "3. Advanced Selectors" is a duplicate of the first one. Is it possible that "browsers support them." should link here: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29#Selectors ?
Cheers
Thanks, really useful,
Great blog post showcasing some awesome CSS3 properties. I forgot about ::first-letter and ::first-line.
Excellent article! However, isn't it optimistic to consider calc() can finally be used when it is still in Candidate Recommendation and considered "at risk"?
CSS3 Values and Units status
No, by this time it’s unlikely much will change. The key parts have been spec’ed many years ago and by now we have several independent implementations.
By the way, I’m glad someone (Albert) mentioned the Can I Use… site. I believe it’s very useful in this context. Also, but only dropping my own site for I’m not aware of a more complete overview, see an index of all CSS properties.
Android does not currently support calc(). Just a warning before anyone gets too excited, if they use chrome on mobile it does, if not then calc() needs a fallback. However Android does say they will support it in android 4.4.
Nice article! Really useful! I used counter for only one time and don't know about attr(), any function can we use in css?
Nice summary. Don't let local clients - especially retailers - know about #8. ;-D
Also, ::first-letter and ::first-line do a nice job of emulating some complex bullet styling in InDesign. Wish there were ::first-word, but I don't think there is.
This really awesome!
beautiful article.. thanks a lot!!!
Awesome work. Helped me a lot.
Really nice list of features with such a explanatory solution. Thanks a lot.
To be able to use Columns and Border-box will erase a lot of headaches! Thanks for a genuinely helpful article!
Amazing collection! Thanks for putting this together. It definitely a great reference to bookmark!
To be able to use Columns and Border-box will erase a lot of headaches! Thank You for genuinely helpful article!
The best article I have ever read about css.
Awesome css3 new feature collection. Very informative and well explained. Keep it up :)
Nice!! Thanks for the information :)