CSS Sketch 1 – Technique: Masking

Earlier, I was checking out Visionare designed by Madeo in the Czech. I was impressed by many of the animations. One thing that caught my attention was the “masking” of the bus that zooms back and forth in the “heart” logo.

It is possible to mask using CSS3 – I believe there is a “clip-path”, but it’s a little dodgy and not used here. Instead, it looks like the animation was created by putting all the graphics on an angle (-45deg in my case) and rotating a container (45deg in my case). The graphics just move in and out of a container with the overflow hidden. It’s a simple, but well thought out solution.

Below is a version without the rotation on the sky.

Car by Carnivius from 8-bit RoboCop in his car

Click to Play

See the original sketch: CSS Sketch 1

<style type="text/css"> .mask{ box-sizing:border-box; margin:0 auto; width:500px; height:500px; overflow:hidden; } .sky{ width:200px; height:500px; background: -webkit-linear-gradient(-45deg, white, skyblue ); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(-45deg, white, skyblue ); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(-45deg, white, skyblue ); /* For Firefox 3.6 to 15 */ background: linear-gradient(-45deg, white, skyblue ); /* Standard syntax */ transform:rotate(45deg); -ms-transform:rotate(45deg); /* IE 9 */ -webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */ position:relative; left:150px; overflow:hidden; } .notrotated{ transform:rotate(0deg); -ms-transform:rotate(0deg); /* IE 9 */ -webkit-transform:rotate(0deg); /* Opera, Chrome, and Safari */ } .ground { background: -webkit-linear-gradient(bottom, brown, peru); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom, brown, peru); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom, brown, peru); /* For Firefox 3.6 to 15 */ background: linear-gradient(bottom, brown, peru ); /* Standard syntax */ height: 250px; left: -111px; position: relative; top: 206px; transform: rotate(-45deg); -ms-transform:rotate(-45deg); /* IE 9 */ -webkit-transform:rotate(-45deg); /* Opera, Chrome, and Safari */ width: 600px; } .road{ width: 600px; height:30px; top:10px; position:relative; background:DimGray; } .dash{ border-top:3px dashed GoldenRod; width:600px; height:20px; position:relative; top:13px; box-sizing:border-box; animation: roadDash 0.05s infinite linear; -webkit-animation: roadDash 0.05s infinite linear; } .car{ background:URL(http://www.majorcallisto.com/wp-content/uploads/robocop.png) no-repeat; width:96px; height:30px; position:relative; top:-33px; left:0px; animation: carDrive 10s infinite ease-in-out 2s; -webkit-animation: carDrive 10s infinite ease-in-out 2s; } @keyframes carDrive{ 0%{ left:0px; } 5%{ top:-40px; } 10%{ left:200px; } 20%{ left:150px; } 25%{ top:-30px; } 30%{ left:200px; } 40%{ left:220px; top:-40px; } 50%{ left:190px; top:-38px; } 80%{ left:300px; top:-28px; } 90%{ left:260px; } 99%{ left:650px; top:-40px; } } @-webkit-keyframes carDrive{ 0%{ left:0px; } 5%{ top:-40px; } 10%{ left:200px; } 20%{ left:150px; } 25%{ top:-30px; } 30%{ left:200px; } 40%{ left:220px; top:-40px; } 50%{ left:190px; top:-38px; } 80%{ left:300px; top:-28px; } 90%{ left:260px; } 99%{ left:650px; top:-40px; } } @keyframes roadDash { from {left: 0;} to {left: -15px;} } @-webkit-keyframes roadDash{ from {left: 0;} to {left: -15px;} } </style> <div class="mask"> <div class="sky"> <div class="ground"> <div class="road"> <div class="dash"> </div> <div class="car"> </div> </div> </div> </div> </div>

This entry was posted in CSS Sketch. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>