Mario image in CSS3


Mario image created in CSS3 with no images


Don't do that at home on your website ;)


For what I've made this? - just en experiment and fun;)


Funny thing noticed - when reloading the page on the iPad Mario in CSS3 painted instantly and Mario in base64 - a little later. So I guess that was the main idea of my experiment - CSS3 works faster.


PS. Mario image was grabbed here - http://dribbble.com/shots/185180-8-bit-Mario



Mario in CSS3 Mario with base64

HTML

<table>
	<tr>
		<td>Mario in CSS3</td>
		<td>Mario with base64</td>
	</tr>
	<tr>
		<td><div class="mario"></div></td>
		<td><div class="mario_base64"></div></td>
	</tr>
</table>

CSS3 version

.mario {
	width: 10px; 
	height: 10px;
	box-shadow: #fdb62a 140px 0 0, #fdb62a 150px 0 0, #fdb62a 160px 0 0, #fdb62a 170px 0 0, #cb0303 70px 10px 0, #cb0303 80px 10px 0, #cb0303 90px 10px 0, #cb0303 100px 10px 0, #cb0303 110px 10px 0, #cb0303 120px 10px 0, #fdb62a 140px 10px 0, #fdb62a 150px 10px 0, #fdb62a 160px 10px 0, #fdb62a 170px 10px 0, #cb0303 60px 20px 0, #cb0303 70px 20px 0, #cb0303 80px 20px 0, #cb0303 90px 20px 0, #cb0303 100px 20px 0, #cb0303 110px 20px 0, #cb0303 120px 20px 0, #cb0303 130px 20px 0, #cb0303 140px 20px 0, #fdb62a 150px 20px 0, #fdb62a 160px 20px 0, #fdb62a 170px 20px 0, #1e5c29 60px 30px 0, #1e5c29 70px 30px 0, #1e5c29 80px 30px 0, #fdb62a 90px 30px 0, #fdb62a 100px 30px 0, #1e5c29 110px 30px 0, #fdb62a 120px 30px 0, #fdb62a 130px 30px 0, #1e5c29 140px 30px 0, #1e5c29 150px 30px 0, #1e5c29 160px 30px 0, #1e5c29 170px 30px 0, #1e5c29 50px 40px 0, #fdb62a 60px 40px 0, #1e5c29 70px 40px 0, #fdb62a 80px 40px 0, #fdb62a 90px 40px 0, #fdb62a 100px 40px 0, #1e5c29 110px 40px 0, #fdb62a 120px 40px 0, #fdb62a 130px 40px 0, #1e5c29 140px 40px 0, #1e5c29 150px 40px 0, #1e5c29 160px 40px 0, #1e5c29 170px 40px 0, #1e5c29 50px 50px 0, #fdb62a 60px 50px 0, #1e5c29 70px 50px 0, #1e5c29 80px 50px 0, #fdb62a 90px 50px 0, #fdb62a 100px 50px 0, #fdb62a 110px 50px 0, #1e5c29 120px 50px 0, #fdb62a 130px 50px 0, #fdb62a 140px 50px 0, #fdb62a 150px 50px 0, #1e5c29 160px 50px 0, #1e5c29 170px 50px 0, #1e5c29 50px 60px 0, #1e5c29 60px 60px 0, #fdb62a 70px 60px 0, #fdb62a 80px 60px 0, #fdb62a 90px 60px 0, #fdb62a 100px 60px 0, #1e5c29 110px 60px 0, #1e5c29 120px 60px 0, #1e5c29 130px 60px 0, #1e5c29 140px 60px 0, #1e5c29 150px 60px 0, #1e5c29 160px 60px 0, #fdb62a 70px 70px 0, #fdb62a 80px 70px 0, #fdb62a 90px 70px 0, #fdb62a 100px 70px 0, #fdb62a 110px 70px 0, #fdb62a 120px 70px 0, #fdb62a 130px 70px 0, #1e5c29 140px 70px 0, #1e5c29 150px 70px 0, #1e5c29 30px 80px 0, #1e5c29 40px 80px 0, #1e5c29 50px 80px 0, #1e5c29 60px 80px 0, #1e5c29 70px 80px 0, #cb0303 80px 80px 0, #1e5c29 90px 80px 0, #1e5c29 100px 80px 0, #1e5c29 110px 80px 0, #cb0303 120px 80px 0, #1e5c29 130px 80px 0, #1e5c29 140px 80px 0, #1e5c29 20px 90px 0, #1e5c29 30px 90px 0, #1e5c29 40px 90px 0, #1e5c29 50px 90px 0, #1e5c29 60px 90px 0, #1e5c29 70px 90px 0, #1e5c29 80px 90px 0, #cb0303 90px 90px 0, #1e5c29 100px 90px 0, #1e5c29 110px 90px 0, #1e5c29 120px 90px 0, #cb0303 130px 90px 0, #cb0303 140px 90px 0, #1e5c29 160px 90px 0, #1e5c29 170px 90px 0, #fdb62a 10px 100px 0, #fdb62a 20px 100px 0, #1e5c29 30px 100px 0, #1e5c29 40px 100px 0, #1e5c29 50px 100px 0, #1e5c29 60px 100px 0, #1e5c29 70px 100px 0, #1e5c29 80px 100px 0, #cb0303 90px 100px 0, #cb0303 100px 100px 0, #cb0303 110px 100px 0, #cb0303 120px 100px 0, #cb0303 130px 100px 0, #cb0303 140px 100px 0, #1e5c29 160px 100px 0, #1e5c29 170px 100px 0, #fdb62a 10px 110px 0, #fdb62a 20px 110px 0, #fdb62a 30px 110px 0, #fdb62a 40px 110px 0, #cb0303 50px 110px 0, #cb0303 60px 110px 0, #1e5c29 70px 110px 0, #cb0303 80px 110px 0, #cb0303 90px 110px 0, #fdb62a 100px 110px 0, #cb0303 110px 110px 0, #cb0303 120px 110px 0, #fdb62a 130px 110px 0, #cb0303 140px 110px 0, #1e5c29 150px 110px 0, #1e5c29 160px 110px 0, #1e5c29 170px 110px 0, #fdb62a 20px 120px 0, #fdb62a 30px 120px 0, #1e5c29 40px 120px 0, #cb0303 50px 120px 0, #cb0303 60px 120px 0, #cb0303 70px 120px 0, #cb0303 80px 120px 0, #cb0303 90px 120px 0, #cb0303 100px 120px 0, #cb0303 110px 120px 0, #cb0303 120px 120px 0, #cb0303 130px 120px 0, #cb0303 140px 120px 0, #1e5c29 150px 120px 0, #1e5c29 160px 120px 0, #1e5c29 170px 120px 0, #1e5c29 30px 130px 0, #1e5c29 40px 130px 0, #1e5c29 50px 130px 0, #cb0303 60px 130px 0, #cb0303 70px 130px 0, #cb0303 80px 130px 0, #cb0303 90px 130px 0, #cb0303 100px 130px 0, #cb0303 110px 130px 0, #cb0303 120px 130px 0, #cb0303 130px 130px 0, #cb0303 140px 130px 0, #1e5c29 150px 130px 0, #1e5c29 160px 130px 0, #1e5c29 170px 130px 0, #1e5c29 20px 140px 0, #1e5c29 30px 140px 0, #1e5c29 40px 140px 0, #cb0303 50px 140px 0, #cb0303 60px 140px 0, #cb0303 70px 140px 0, #cb0303 80px 140px 0, #cb0303 90px 140px 0, #cb0303 100px 140px 0, #cb0303 110px 140px 0, #cb0303 120px 140px 0, #1e5c29 20px 150px 0, #1e5c29 30px 150px 0, #cb0303 50px 150px 0, #cb0303 60px 150px 0, #cb0303 70px 150px 0, #cb0303 80px 150px 0, #cb0303 90px 150px 0; 
}

CSS base64 version

.mario_base64 {
	width: 170px;
	height: 160px;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAACgBAMAAABuw+rXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9QTFRFAAAA/bYqHlwpywMD/bYqvME3qQAAAAJ0Uk5TAOGhnh/WAAAAuklEQVRo3u3YwQ2DMBAAQbeQFmiBFui/pkggxcrpDgzkFWZ/Bnvkj2VEa3d7Jd1G25JEpf6ROu9GpVIvqPOZqFTqsDp915dkwxCVSq3BTKBSqb9UB+gwmUql1mq2LiwePqxUKjW0HHcOpFIfqJaHcP0Hsv+s3heV+mh1Oq6k14JCpVJbdq2VahmVSq3VXp8dwPC2D8MWqFTqdhuGYzufjkqlpmr2uUmlUu+rF8G2H5VKDWftKkOlUj+9AWO1IeykoGcoAAAAAElFTkSuQmCC') 0 0 no-repeat;
}

blog comments powered by Disqus