Logo de Pepsi en CSS

Wolfans · escribió 17/11/11 18:59 hs

El logo de Pepsi es muy conocido y fue variando a lo largo de los años. Ahora tiene un diseño mas joven y renovado y lo podemos realizar con puro CSS solamente sin necesidad de utilizar imágenes, así que aprovechen con el código que les dejo realizarlo fácilmente si quieren implementarlo para algún diseños web de bebidas o comidas.

asi les va a quedar en cada uno de los navegadores

Este es el 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;

}

#pepsi-logo {
height: 400px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 400px;

}

#pepsi-logo div {
position: absolute;

}

#red {
-moz-transform: rotate(-40deg);
background-attachment: scroll;
background-clip: border-box;
background-color: #ED262B;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 500px 300px;
border-bottom-right-radius: 500px 300px;
border-top-left-radius: 500px 300px;
border-top-right-radius: 500px 300px;
height: 400px;
left: -190px;
top: -110px;
width: 480px;

}

#blue {
background-attachment: scroll;
background-clip: border-box;
background-color: #2C5492;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
height: 400px;
width: 400px;

}

#white {
-moz-transform: rotate(-15deg);
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: 150px;
border-bottom-right-radius: 150px;
border-top-left-radius: 150px;
border-top-right-radius: 150px;
height: 300px;
left: -120px;
width: 490px;

}

#outside {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-bottom-color: #FFFFFF;
border-bottom-left-radius: 285px;
border-bottom-right-radius: 285px;
border-bottom-style: solid;
border-bottom-width: 85px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #FFFFFF;
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: 85px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #FFFFFF;
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: 85px;
border-top-color: #FFFFFF;
border-top-left-radius: 285px;
border-top-right-radius: 285px;
border-top-style: solid;
border-top-width: 85px;
height: 400px;
left: -85px;
top: -85px;
width: 400px;

}

Este es el HTML

<!DOCTYPE html>

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

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

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

</head>

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

<p>

<div id="pepsi-logo">

</body>

</html>

Logo de Pepsi en CSS

Participa en el tema Logo de Pepsi en CSS en el foro Diseño Web de la categoría Webmasters.El logo de Pepsi es muy conocido y fue variando a lo largo de los años. Ahora tiene un diseño ...

Participa en el tema Logo de Pepsi en CSS en el foro Diseño Web de la categoría Webmasters.
El logo de Pepsi es muy conocido y fue variando a lo largo de los años. Ahora tiene un diseño ...