Oreon-Lime-R2/oreon-logos/oreon-logos-9/css3/fedora-logo.css

192 lines
3.9 KiB
CSS
Raw Normal View History

/**
* Fedora CSS3 Logo
* Copyright (C) 2012 Red Hat, Inc.
* Original CSS3 code created by Daniel Rodríguez
* http://sadasant.com/
*
* Fedora®, the Fedora word design, and the Infinity
* design logo, either separately or in combination,
* are hereinafter referred to as "Fedora Trademarks"
* and are trademarks of Red Hat, Inc., registered in
* the United States and other countries.
*
* For licensing terms on this file, see: COPYING (as
* included with the fedora-logos source)
*/
div {
background: #fff;
margin: 50px auto;
}
#fedora {
background: #294172;
width: 196px;
height: 196px;
-moz-border-radius: 150px 150px 150px 30px;
border-radius: 150px 150px 150px 30px;
box-shadow: 0 5px 10px rgba(0,0,0,.3);
}
#fedora:before {
content: "";
position: absolute;
margin-top:96px;
margin-left:10px;
width: 50px;
height: 50px;
border: 20px solid #3c6eb4;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#fedora:after {
content: "";
position: absolute;
margin-top:26px;
margin-left:80px;
width: 50px;
height: 50px;
border: 20px solid #3c6eb4;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#fedora-f {
position: absolute;
top: 97px;
margin-left: 50px;
background: white;
width: 80px;
height: 19px;
-moz-border-radius: 50px;
border-radius: 50px;
z-index:2;
}
#fedora-f:after {
content: "";
position: absolute;
top: -46px;
margin-left: 32px;
background: white;
width: 20px;
height: 20px;
-moz-border-radius: 50px;
border-radius: 50px;
z-index:1;
}
#fedora-f:before {
content: "";
position: absolute;
top: 45px;
margin-left: 28px;
background: white;
width: 20px;
height: 20px;
-moz-border-radius: 50px;
border-radius: 50px;
z-index:1;
}
#fedora-f-top {
position:absolute;
top: 23px;
margin-left: 80px;
width : 100px;
height: 54px;
background:transparent;
border: 20px solid white;
border-color:transparent transparent transparent white;
-moz-border-radius: 50px 0 0 0;
border-radius: 50px 0 0 0;
z-index:1;
}
#fedora-f-top:before {
content: "";
position:absolute;
top:-17px;
margin-left:-19px;
width: 45px;
height: 45px;
border:20px solid white;
-moz-border-radius: 50px;
border-radius:50px;
border-color: white transparent transparent transparent;
-webkit-transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
-ms-transform: rotate(-29deg);
-o-transform: rotate(-29deg);
transform: rotate(-29deg);
}
#fedora-f-top:after {
content: "";
position: absolute;
top: -16px;
margin-left: 23px;
background: white;
width: 20px;
height: 20px;
-moz-border-radius: 50px;
border-radius: 50px;
z-index:1;
}
#fedora-f-bottom {
position:absolute;
top: 96px;
margin-left: -40px;
width : 100px;
height: 54px;
background:transparent;
border: 20px solid white;
border-color:transparent white transparent transparent;
-moz-border-radius: 0 0 50px 0;
border-radius: 0 0 50px 0;
z-index:1;
}
#fedora-f-bottom:before {
content: "";
position:absolute;
top:-14px;
margin-left:34px;
width: 45px;
height: 45px;
border: 20px solid white;
-moz-border-radius: 50px;
border-radius:50px;
border-color: transparent transparent white transparent;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
#fedora-f-bottom:after {
content: "";
position: absolute;
top: 50px;
margin-left: 58px;
background: white;
width: 20px;
height: 20px;
-moz-border-radius: 50px;
border-radius: 50px;
z-index:1;
}