cloud logo script

<i> cloud

This is a regular looking minimalist cloud icon. The stunning thing is that it’s built entirely with markup and CSS, no Photoshop required

Nice online CSS Dev environment  - http://dabblet.com/gist/2945570
CSS
/* <i> Cloud */

html {
	min-height: 100%;
	background: linear-gradient(#b4bcbf, #fff);
}

.cloud {
	display: inline-block;
	background-color: #fff;
	width: 3em;
	height: 1em;
	border-radius: 3em;
	position: relative;
	box-shadow: inset 0 -1px rgba(255,255,255,.6), 0 2px 2px rgba(0,0,0,.1), inset 0 -2px 2px rgba(0,100,160,.1);
}

.cloud:before, .cloud:after {
	content:'';
	position: absolute;
	background-color: #fff;
	width: 14px;
	height: 14px;
	border-radius: 100%;
	top: -6px;
	left: 7px;
	box-shadow: 0 -2px 2px rgba(0,0,0,.05);
}

.cloud:after {
	width: 23px;
	height: 23px;
	left: auto;
	right: 7px;
	top: -10px
}

.cloud { /* This stuff is just for the demo */
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -.5em -1.5em;
}

HTML

<i class=cloud></i>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s