Informática

[Wolfans]

La famosa marca de coches Volkswagen tiene un logo muy característico que ahora lo podemos implementar en cualquier proyecto web mediante el uso de CSS3 sin utilizar ninguna imagen jpg, png ni gif para implementarlo.

Acá les muestro como les va a quedar en distintos navegadores y versiones que soportan CSS



CODIGO CSS

h1, p {
font-family: Arial,Helvetica,sans-serif;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
position: relative;
text-align: center;
width: 600px;


}

h1 {
letter-spacing: -1px;


}

a {
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;


}

a:hover {
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: underline;
-moz-text-decoration-style: solid;


}

#vw-logo {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-attachment: scroll;
background-clip: border-box;
background-color: #E0DCD9;
background-image: -moz-linear-gradient(left top , #E0DCD9 0%, #B7B9B4 63%, #A4A4A4 92%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: #707070;
border-bottom-left-radius: 150px;
border-bottom-right-radius: 150px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #707070;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 1px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #707070;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 1px;
border-top-color: #707070;
border-top-left-radius: 150px;
border-top-right-radius: 150px;
border-top-style: solid;
border-top-width: 1px;
height: 298px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 298px;


}

#vw-logo div {
position: absolute;


}

#blue-silver {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-attachment: scroll;
background-clip: border-box;
background-color: #6082BF;
background-image: -moz-linear-gradient(left top , #6B8BC6 0%, #6082BF 5%, #4A6CAC 15%, #2A5297 32%, #1D346A 60%, #172651 90%, #131C45 95%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: #707070;
border-bottom-left-radius: 143px;
border-bottom-right-radius: 143px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #707070;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 1px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #707070;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 1px;
border-top-color: #707070;
border-top-left-radius: 143px;
border-top-right-radius: 143px;
border-top-style: solid;
border-top-width: 1px;
height: 287px;
left: 5px;
top: 5px;
width: 287px;


}

#blue-silver:after {
background-attachment: scroll;
background-clip: border-box;
background-color: #CCCCCC;
background-image: -moz-linear-gradient(left top , #FEFEFE 0%, #F5F7F6 50%, #D3D3D3 60%, #B0B0B0 75%, #9B9C97 90%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 122px;
border-bottom-right-radius: 122px;
border-top-left-radius: 122px;
border-top-right-radius: 122px;
box-shadow: 5px 5px 5px #150F31;
content: "";
height: 245px;
left: 21px;
position: absolute;
top: 21px;
width: 245px;


}

#shadow-blue {
background-image: -moz-linear-gradient(left top , #787C7F 0%, #8E8F93 30%, #ADB0A9 40%, #EFF2FF 45%, #FCFCFC 55%);
border-bottom-left-radius: 102px;
border-bottom-right-radius: 102px;
border-top-left-radius: 102px;
border-top-right-radius: 102px;
height: 205px;
left: 47px;
top: 47px;
width: 205px;


}

#shadow-blue:after {
background-attachment: scroll;
background-clip: border-box;
background-color: #385E9F;
background-image: -moz-radial-gradient(35% 35% , #A7BFE3 0%, #7B9CCF 20%, #5A7CB9 40%, #385E9F 60%, #234A8B 80%, #1E3C7A 90%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 102px;
border-bottom-right-radius: 102px;
border-top-left-radius: 102px;
border-top-right-radius: 102px;
box-shadow: 5px 4px 5px #2C3447 inset;
content: "";
height: 201px;
left: 2px;
position: absolute;
top: 2px;
width: 201px;


}

#v {
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
box-shadow: 7px 7px 8px #2C3447;
height: 27px;
left: 133px;
top: 120px;
width: 33px;


}

#v:before {
-moz-transform: rotate(-24deg);
background-attachment: scroll;
background-clip: border-box;
background-color: #FEFEFE;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
box-shadow: 8px 0 5px -5px #2C3447;
content: "";
height: 94px;
left: -21px;
position: absolute;
top: -68px;
width: 27px;


}

#v:after {
-moz-transform: rotate(24deg);
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: -moz-linear-gradient(left top , #F6F8F7 0%, #FEFEFE 50%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
box-shadow: 8px 0 5px -5px #2C3447;
content: "";
height: 94px;
left: 27px;
position: absolute;
top: -68px;
width: 27px;


}

#w-left {
-moz-transform: rotate(-24deg);
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: -moz-linear-gradient(center top , #FAFBFA 0%, #EAEAEA 70%, #CFCFCF 95%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
box-shadow: 8px 0 5px -5px #2C3447;
height: 158px;
left: 74px;
top: 90px;
width: 24px;


}

#w-left:after {
-moz-transform: rotate(48deg);
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: -moz-linear-gradient(center top , #FEFEFE 0%, #EAEAEA 60%, #CFCFCF 90%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
box-shadow: 8px 0 5px -5px #2C3447;
content: "";
height: 80px;
left: 26px;
position: absolute;
top: 85px;
width: 27px;


}

#w-right {
-moz-transform: rotate(24deg);
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: -moz-linear-gradient(center top , #D4D4D4 0%, #D6D6D6 40%, #BCBCBC 60%, #ABABAA 70%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
box-shadow: 8px 0 5px -5px #2C3447;
height: 158px;
right: 73px;
top: 90px;
width: 24px;


}

#w-right:after {
-moz-transform: rotate(-48deg);
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: -moz-linear-gradient(center top , #FEFEFE 0%, #D6D6D6 50%, #BCBCBC 60%, #ABABAA 70%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
box-shadow: 8px 0 5px -5px #2C3447;
content: "";
height: 80px;
position: absolute;
right: 26px;
top: 85px;
width: 27px;


}

#extras {
background-attachment: scroll;
background-clip: border-box;
background-color: #FEFEFE;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
height: 7px;
left: 134px;
top: 158px;
width: 31px;


}

#extras:before {
-moz-transform: rotate(24deg);
background-attachment: scroll;
background-clip: border-box;
background-color: #CFCFCF;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
content: "";
height: 20px;
left: -27px;
position: absolute;
top: 70px;
width: 20px;


}

#extras:after {
-moz-transform: rotate(-24deg);
background-attachment: scroll;
background-clip: border-box;
background-color: #ABABAA;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
content: "";
height: 25px;
left: 39px;
position: absolute;
top: 70px;
width: 20px;


}

#shadow-fix {
-moz-transform: rotate(24deg);
background-attachment: scroll;
background-clip: border-box;
background-color: #ABABAA;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
height: 30px;
left: 183px;
top: 195px;
width: 24px;


}

#shadow-fix:after {
background-attachment: scroll;
background-clip: border-box;
background-color: #C4C4C4;
background-image: -moz-linear-gradient(left center , #D4D4D4 0%, #C4C4C4 90%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
content: "";
height: 27px;
left: 22px;
position: absolute;
top: -109px;
width: 10px;


}



CODIGO HTML

<!DOCTYPE html>

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<title>Logo de Volkswagen en CSS3</title>

<link rel="stylesheet" href="main.css" type="text/css">


</head>

<body>
<h1>Logo de Volkswagen en CSS3</h1>

<p>

<div id="vw-logo">
<div id="blue-silver"></div>

<div id="shadow-blue"></div>

<div id="v"></div>

<div id="w-left"></div>

<div id="w-right"></div>

<div id="extras"></div>

<div id="shadow-fix"></div>


</div>


</body>


</html>