Informática

[Wolfans]

Les dejo el codigo que necesitan para realizar a puro Css el logo de este super heroe de la noche, al señor de la noche que se llama BATMAN. Sin tener que usar ninguna imagen JPG, ni GIF ni PNG espero que lo disfruten

Asi va a quedar para los distintos navegadores





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;
}
#batman-logo {
background-attachment: scroll;
background-clip: border-box;
background-color: #000000;
background-image: -moz-linear-gradient(left bottom , #48545C 0%, #191A1A 63%, #1A1A1A 86%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
height: 136px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 500px;
}
#batman-logo div {
position: absolute;
}
#left-white {
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;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 30px 50px;
border-top-left-radius: 100px 80px;
border-top-right-radius: 160px 100px;
height: 80px;
left: -158px;
top: -1px;
width: 230px;
}
#left-white:after {
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;
border-bottom-left-radius: 400px 300px;
border-bottom-right-radius: 400px 300px;
border-top-left-radius: 0;
border-top-right-radius: 400px 300px;
content: "";
height: 220px;
left: 88px;
position: absolute;
top: 73px;
width: 333px;
}
#right-white {
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;
border-bottom-left-radius: 30px 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 160px 100px;
border-top-right-radius: 100px 80px;
height: 80px;
right: -158px;
top: -1px;
width: 230px;
}
#right-white:after {
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;
border-bottom-left-radius: 400px 300px;
border-bottom-right-radius: 400px 300px;
border-top-left-radius: 400px 300px;
border-top-right-radius: 0;
content: "";
height: 220px;
position: absolute;
right: 38px;
top: 73px;
width: 383px;
}
#top-white {
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: transparent;
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: 12px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: transparent;
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: 12px;
border-top-color: #FFFFFF;
border-top-style: solid;
border-top-width: 20px;
left: 228px;
top: 0;
width: 12px;
}
#top-white:before {
-moz-transform: rotate(5deg);
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;
border-bottom-left-radius: 30px 50px;
border-bottom-right-radius: 10px 50px;
border-top-left-radius: 30px 80px;
border-top-right-radius: 10px 50px;
content: "";
height: 77px;
position: absolute;
right: 18px;
top: -65px;
width: 65px;
}
#top-white:after {
-moz-transform: rotate(-5deg);
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;
border-bottom-left-radius: 10px 50px;
border-bottom-right-radius: 30px 50px;
border-top-left-radius: 10px 50px;
border-top-right-radius: 30px 80px;
content: "";
height: 77px;
left: 18px;
position: absolute;
top: -65px;
width: 65px;
}
#lighting {
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;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 75px;
border-top-left-radius: 75px;
border-top-right-radius: 75px;
box-shadow: 0 0 70px #FFFFFF;
height: 150px;
left: 100px;
opacity: 0.02;
top: -10px;
width: 150px;
}

Codigo HTML

<html><head>

<body>
<h1> Logo de Batman The Dark Knight en CSS3

</h1>

<p>

<div id="batman-logo">
<div id="left-white"></div>

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

<div id="top-white"></div>

<div id="lighting"></div>


</div>


</body>


</html>

[elrey]

gracias por el código