Oreon-Lime-R2/oreon-logos/oreon-logos-9/css3/demo.html

227 lines
5.4 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS3 Fedora Logo</title>
<style type="text/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;
}
</style>
</head>
<body>
<!--
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 id="fedora">
<div id="fedora-f"></div>
<div id="fedora-f-top"></div>
<div id="fedora-f-bottom"></div>
</div>
</body>
</html>