Informática

[Wolfans]

El famoso logo de Batman de la serie de televisión con esos colores amarillo patito y negro que era mas infantil que adulto actualmente podemos emplearlo sin utilizar ninguna imagen y solamente con código CSS3.

La imagen les tiene que quedar asi del Logo de Batman en Css 3



es para distintos navegadores y versiones.

CÓDIGO CSS3

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: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
height: 300px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 500px;


}

#batman-logo div {
position: absolute;


}

#yellow-oval {
background-attachment: scroll;
background-clip: border-box;
background-color: yellow;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 250px 140px;
border-bottom-right-radius: 250px 140px;
border-top-left-radius: 250px 140px;
border-top-right-radius: 250px 140px;
height: 270px;
left: 10px;
top: 15px;
width: 480px;


}

#yellow-oval:after {
background-attachment: scroll;
background-clip: border-box;
background-color: #000000;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 250px 140px;
border-bottom-right-radius: 250px 140px;
border-top-left-radius: 250px 140px;
border-top-right-radius: 250px 140px;
content: "";
height: 240px;
left: 15px;
position: absolute;
top: 15px;
width: 450px;


}

#bottom-left-yellow {
-moz-transform: rotate(-40deg);
background-attachment: scroll;
background-clip: border-box;
background-color: yellow;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border-top-left-radius: 40px 70px;
border-top-right-radius: 50px 70px;
bottom: 40px;
height: 90px;
left: 86px;
width: 80px;


}

#bottom-left-yellow:after {
-moz-transform: rotate(50deg);
background-attachment: scroll;
background-clip: border-box;
background-color: yellow;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border-top-left-radius: 50px 70px;
border-top-right-radius: 90px 100px;
content: "";
height: 90px;
left: 40px;
position: absolute;
top: 60px;
width: 100px;


}

#bottom-right-yellow {
-moz-transform: rotate(40deg);
background-attachment: scroll;
background-clip: border-box;
background-color: yellow;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border-top-left-radius: 40px 70px;
border-top-right-radius: 50px 70px;
bottom: 40px;
height: 90px;
right: 86px;
width: 80px;


}

#bottom-right-yellow:after {
-moz-transform: rotate(-50deg);
background-attachment: scroll;
background-clip: border-box;
background-color: yellow;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border-top-left-radius: 90px 100px;
border-top-right-radius: 50px 70px;
content: "";
height: 90px;
position: absolute;
right: 40px;
top: 60px;
width: 100px;


}

#top-yellow {
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: yellow;
border-top-style: solid;
border-top-width: 22px;
height: 0;
left: 228px;
top: 30px;
width: 20px;


}

#top-yellow:before {
-moz-transform: rotate(10deg);
background-attachment: scroll;
background-clip: border-box;
background-color: yellow;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 90px;
border-bottom-right-radius: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 60px;
content: "";
height: 90px;
position: absolute;
right: 34px;
top: -45px;
width: 80px;


}

#top-yellow:after {
-moz-transform: rotate(-10deg);
background-attachment: scroll;
background-clip: border-box;
background-color: yellow;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 90px;
border-top-left-radius: 60px;
border-top-right-radius: 100px;
content: "";
height: 90px;
left: 34px;
position: absolute;
top: -45px;
width: 80px;


}

#extras {
background-attachment: scroll;
background-clip: border-box;
background-color: yellow;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
bottom: 30px;
height: 25px;
left: 144px;
width: 212px;


}

#extras:after {
-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: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: #000000;
border-bottom-left-radius: 350px 250px;
border-bottom-right-radius: 350px 250px;
border-bottom-style: solid;
border-bottom-width: 100px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #000000;
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: 100px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #000000;
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: 100px;
border-top-color: #000000;
border-top-left-radius: 350px 250px;
border-top-right-radius: 350px 250px;
border-top-style: solid;
border-top-width: 100px;
content: "";
height: 264px;
left: -234px;
position: absolute;
top: -326px;
width: 480px;


}






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

<title>Pure CSS3 Batman Logo</title>

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


</head>

<body>
<h1>Logo de Batman en Css 3</h1>

<p>

<div id="batman-logo">
<div id="yellow-oval"></div>

<div id="bottom-left-yellow"></div>

<div id="bottom-right-yellow"></div>

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

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


</div>


</body>


</html>

[Formateo]

esta excelente te felicito