/** * 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; }