El logo de Windows 8 en CSS


Con CSS se puede hacer de todo últimamente, ya no es como antes que sólo nos limitaba a un par de cosas, hoy ya podemos hacer hasta logos sin necesidad de imágenes, lo cual hace que los diseños sean mucho más livianos.

En este caso quiero dejarles este excelente logo de Windows 8 hecho íntegramente con CSS.

Logo de Windows 8 en CSS

<style type="text/css">
.windows_8_logo_container {
	padding: 100px 0;
	background: #fff;
	height: 150px;
	-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.window {
	position: relative;
	float: left;
	margin-left: 50px;
	width: 200px;
	height: 150px;
	background: #00adef;
	-webkit-transform: perspective(400px) rotateY(-25deg);
	-moz-transform: perspective(400px) rotateY(-25deg);
	-ms-transform: perspective(400px) rotateY(-25deg);
	-o-transform: perspective(400px) rotateY(-25deg);
	transform: perspective(400px) rotateY(-25deg);
	-webkit-animation: windows_animation 3s infinite;
	-moz-animation: windows_animation 5s infinite;
	-ms-animation: windows_animation 5s infinite;
}
.window::after, .window::before {
	content: '';
	background: #fff;
	height: 100%;
	width: 10px;
	left: 50%;
	margin-left:-5px;
	top:0;
	position: absolute;
}
.window::before {
	left: 0;
	top: 50%;
	margin-top: -5px;
	margin-left: 0;
	height: 10px;
	width: 100%;
	position: absolute;
}
.logo_text {
	color: #00adef;
	line-height: 150px;
	font-size: 130px;
	padding-left: 20px;
	float: left;
}
</style>

<div>
 <div></div>
 <div>Windows 8</div>
</div>

Visto en Digital Inspiration

Dejar un comentario