Back to Blog Home

Whats New In CSS3 : 10 Latest Features You Can't Miss in CSS3

Ranvijay Kumar Bhaskar| CSS | 7 months



 

CSS3 has been in development for quite sometime and finally it is out.  Earlier, there used to be quite a lot of issues around browsers not supporting all the latest features of CSS. You will be happy to know, gone are those days, now these awesome and eye-catching features are supported by most of the browsers including IE, well the latest one. There are some of the latest CSS3 features that you can start using in your projects. Let’s get started.

 

Warning: Most of these features discussed below won’t be working well on IE9.

 

CSS3 Transitions and Animations

CSS Animations are now finally available to all major browsers including IE10. You heard it right -  IE 10. Let’s have a look at them.

We need to define transition using transition property and transition duration.

 

 

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Demo transitions</title>

<style type="text/css">

body{

    font:.80em/1.2 Arial, Helvetica, sans-serif;

}

h2{

    text-align:center;

    margin-top:2em;

}

li{

    border:1px gray solid;

    background:gold;

    width:100px;

    height:100px;

    border-radius:100px;

    margin:20px;

    padding:30px;

    list-style:none;

}

li#transition{

    -webkit-transition-property: background, width;

    -moz-transition-property: background, width;

    -o-transition-property: background;

    -webkit-transition-duration: 1s;

    -moz-transition-duration: 1s;

    -o-transition-duration: 1s;

}

li:target, li:hover{

    background:forestgreen;

    width:700px;

}

 

</style>

</head>

<body>

<ul>

    <li id="transition">

      <h2>Enpointer</h2>

</ul>

</body>

</html>

 


It outputs in below transition

 

 

 

 

Using calc() to calculate values in CSS3

Now CSS3 has introduced new feature that allow us to do arithmetic calculation. This is extremely new feature that we have been waiting for and allows us to do multiple CSS hacks, like mixing percentages and pixels value that was earlier not possible. And the best part, it works with IE 9 as well. Let’s have a look at it.

 

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Demo Calc()</title>

<style type="text/css">

.banner {

  position: absolute;

  left: 40px;

  width: calc(100% - 80px);

  border: solid black 1px;

  box-shadow: 1px 2px;

  background-color: orange;

  padding: 6px;

  text-align: center;

  box-sizing: border-box;

}

</style>

</head>

<body>

    <div class="banner">This is a Enpointer!</div>

</body>

</html>

 

 

This will result in below output. You can see how easy it is to implement. Also this code is screen responsive, it means the view updates for multiple devices, desktop/mobile/tablets. Great isn’t it ?

 

Advanced Selectors in CSS3

This is another remarkable feature introduced in CSS3. Earlier we used selectors like id, class, etc. Now new advanced selectors like first, last, nth-child, and a lot more are being introduced to trigger various functionalities and sub-components of elements. Let’s have a look at it.

 

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Demo Calc()</title>

<style type="text/css">

p{

    font-size: 16px;

    width: 420px;

    margin: 20px auto 0;

    text-align:center;

}

 

.container{

    width: 420px;

    margin:50px auto 0;

    overflow: hidden;

    padding:5px;

}

 

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;

}

</style>

</head>

<body>

    <p>This is a Ranvijay from Enpointer!<br/>

        How are you guys

    </p>

</body>

</html>

 

 

You can easily see, in the below output, how I triggered First letter and first line styling using the advanced CSS3 selector.

 

CSS3 Gradients

 Gradients are quite useful tool for web designers, it helps smoothening of colors seamlessly to create new aesthetic elements for web pages. The gradient also looks great on high quality displays like retina displays. Gradients can be linear or radial and can be set for repetition. Let’s have a quick example.

 

<html>

   <head>

      <style>

         #grad {

            height: 100px;

            background: -webkit-linear-gradient(left, gold , green);

            background: -o-linear-gradient(right, gold , green); 

            background: -moz-linear-gradient(right, gold , green);

            background: linear-gradient(to right, gold , green);

         }

      </style>

   </head>

   <body>

      <div id="grad"></div>

   </body>

</html> 

 

The leads to below output. Just look at color mixture it’s producing. Again here I have taken linear, you can select radial, repeat-radial or repeat linear. Have fun, play with it, you might come up with new awesome designs.

 

CSS3 Webfonts

Few years back, we used to have old classic “web-safe” fonts. Now, we are in an era where we have multiple font provider. We can also build our own font. There is also multiple icon support using font awesome. What makes it all work in CSS3 is the mechanism, that helps us define a name, properties and source files for fonts that we can refer in our declaration in font/font-family. Let’s see it in action.

<html>

   <head>

        <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" />

      <style>

        h1{

            /* link to font*/

            font-family: Satisfy, cursive;

            font-weight:normal;

            font-size:24px;

            padding-top: 60px;

        }

      </style>

   </head>

   <body>

    <h1>Hey! Enpointer Readers</h1>

   </body>

</html> 

 

This will output as below. Have a look at link reference and how it easily integrates with font-family.

 

CSS3 Columns

Now we can have Columns introduced in CSS3. Using this feature, we can automatically separate text into columns. Earlier we had to create div and span and then use some CSS selectors and then apply columns styling. No More hassles now. Let’s see this in action.

<html>

   <head>

      <style>

        .container{

            width: 500px;

            margin: 0 auto;

        }

        .container p{

            -moz-columns:3;

            -webkit-columns:3;

            columns:3;

        }

      </style>

   </head>

   <body>

        <div class="container">

                <p>Hi Enpointer!! This is an Amazing Platform. Let's see what's there for us using CSS Columns. It's great isn't it.</p>

            </div>

   </body>

</html> 

 

This will output as below. You can play with the width part and you will see amazing outputs.

 

Multiple Backgrounds in CSS3

Next big feature is multiple backgrounds that can be used in storytelling, games, fun facts, and awesome designs. What happens in this is we can place one picture above another. Let’s see how. Are you ready!!

<!DOCTYPE html>

<html>

<head>

<style> 

#example {

    background-image: url(img_flwr.gif), url(paper.gif);

    background-position: right bottom, left top;

    background-repeat: no-repeat, repeat;

    padding: 15px;

}

</style>

</head>

<body>

<div id="example">

<h1>Enpointer</h1>

<p>Hey!1 Did you see it, it's two pics here</p>

</div>

</body>

</html>

 

This will output as below. Try multiple transitions and designs and you will be able to create some great snazzy designs. 

 

 

Media Queries in CSS3

It’s again a powerful  functionality in CSS3 that will help you build mobile first code. Same CSS can be used for multiple devices. It helps to create next level of responsive design. Let’s see how.

<!DOCTYPE html>

<html>

<head>

<style>

body {

    background-color: pink;

}

 

@media screen and (min-width: 480px) {

    body {

        background-color: yellow;

    }

}

</style>

</head>

<body>

 

<h1>Enpointer</h1>

<p>The media query will only apply if the media type is screen and the viewport is more than 500px wide.</p>

 

</body>

</html>

 

 

At larger screen: Output

 

 

At Smaller Screen, less than 500px : Output

 

That’s great isn’t it?

 

Opacity in CSS3

Opacity, as the name suggest defines the transparency of elements being used. Opacity is defined using opacity:0.x, where x is opacity percent. Filter: alpha can alternatively used for older browsers

Let code this.

<!DOCTYPE html>

<html>

<head>

<style>

#img1 {

    opacity: 0.5;

    filter: alpha(opacity=50); /* For IE8 and earlier */

}

#img2 {

    opacity: 0.2;

    filter: alpha(opacity=50); /* For IE8 and earlier */

}

#img3 {

    opacity: 0.8;

    filter: alpha(opacity=50); /* For IE8 and earlier */

}

</style>

</head>

<body>

    <h1>Enpointer : Transparency: 50%, 20%, 80%</h1>

<img src="https://i.imgur.com/TGq6WgL.png" alt="Forest" width="170" height="100" id="img1">

<img src="https://i.imgur.com/TGq6WgL.png" alt="Forest" width="170" height="100" id="img2">

<img src="https://i.imgur.com/TGq6WgL.png" alt="Forest" width="170" height="100" id="img3">

</body>

</html>

 

 

This will output as below, check transparency. Awesome!!

 

 

3D Animation using CSS3

Now, it’s a 3-D world, how can CSS3 stay behind. CSS has introduced 3D animation. It helps to introduce 3D transitions. Let’s see how. 

<!DOCTYPE html>

<html>

<head>

<style>

    #f1_container {

    position: relative;

    margin: 10px auto;

    width: 450px;

    height: 281px;

    z-index: 1;

    }

    #f1_container {

    perspective: 1000;

    }

    #f1_card {

    width: 100%;

    height: 100%;

    transform-style: preserve-3d;

    transition: all 1.0s linear;

    }

    #f1_container:hover #f1_card {

    transform: rotateY(180deg);

    box-shadow: -5px 5px 5px #aaa;

    }

    .face {

    position: absolute;

    width: 100%;

    height: 100%;

    backface-visibility: hidden;

    }

    .face.back {

    display: block;

    transform: rotateY(180deg);

    box-sizing: border-box;

    padding: 10px;

    color: white;

    text-align: center;

    background-color: #aaa;

    }

</style>

</head>

<body>

    <h2><center>Enpointer: CSS3 Transition</center></h2>

<div id="f1_container">

        <div id="f1_card">

          <div class="front face">

                <img src="https://i.imgur.com/TGq6WgL.png" alt="Forest" width="450" height="281">

          </div>

          <div class="back face center">

            <p>You see this</p>

            <p>It's called 3D Flip</p>

          </div>

        </div>

        </div>

</body>

</html>

 

This will result in below output

 

When you Hover, This is going to happen

   

 

And finally, you will see Flipped card. So how does it really work under the hood. Since this is the largest code let me break it down for you.

  1. The Class “f1_container” div contains all the basic properties to setup the context.
  2. Now, we have two div containing classes “front face” and “back face center”
  3. The “front face” class is responsible for keeping image at front, as per img attribute. You can literally place anything in this div.
  4. On Hover of “f1_container” transform happens as you can see in “#f1_container:hover #f1_card”. The transition and next class “back face center” is revealed.

 

That’s it for today. Thanks for reading. Please share and comment. Also let us know, if you would like to know more about CSS3.

 



Join 1000+ People Who Subscribe to Weekly Blog Updates

Back to Blog Home