Cloud Tag


With the help of HTML5, simple CSS3 magic and shamanic dances with a tambourine we can paint beautifull objects just like this 2D cloud.


HTML

<cloud></cloud>

CSS


cloud {
	position:relative; 
	width:300px;
	display:block;
	height:100px;
	background:#c2c2ff;
	border-radius:100px;
	margin:100px auto;
	box-shadow:inset rgba(0,0,0,0.4) 0 2px 0px;
}
cloud:before { 
	content:'';
	width:33%; 
	height:100%; 
	background:#c2c2ff; 
	position:absolute;  
	border-radius:1000px; 
	top:-45%; 
	left:16%;
	box-shadow:inset rgba(0,0,0,0.4) 1px 2px 0px;
}
cloud:after { 
	content:'';
	width:50%; 
	height:150%; 
	background:#c2c2ff; 
	position:absolute;  
	border-radius:1000px; 
	top:-75%; 
	left:36%;
	box-shadow:inset rgba(0,0,0,0.4) 0 2px 0px;
}

blog comments powered by Disqus