191 lines
3.9 KiB
CSS
191 lines
3.9 KiB
CSS
/**
|
|
* 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;
|
|
}
|