digezz.ch | CSS Logos

.logo-flickr div {
    position:absolute;
}
.logo-flickr .box {
    background-image:linear-gradient(#F6F6F6 0%, #D1D1D1 100%);
    background-image:-webkit-linear-gradient(#F6F6F6 0%, #D1D1D1 100%);
    background-image:-o-linear-gradient(#F6F6F6 0%, #D1D1D1 100%);
    background-image:-ms-linear-gradient(#F6F6F6 0%, #D1D1D1 100%);
    width:300px;
    height:300px;
    left:20px;
    top:970px;
    border-radius:15%;
    -webkit-border-radius:15%;
    -o-border-radius:15%;
    -ms-border-radius:15%;
    border:solid #CCCCCC;
}
.logo-flickr .left {
    background-color:#0C5995;
    width:106.66666666666667px;
    height:106.66666666666667px;
    left:53.33333333333333px;
    top:1066.66666666666667px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -o-border-radius:100%;
    -ms-border-radius:100%;
}
.logo-flickr .right {
    background-color:#BF0060;
    width:106.66666666666667px;
    height:106.66666666666667px;
    left:183.33333333333333px;
    top:1066.66666666666667px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -o-border-radius:100%;
    -ms-border-radius:100%;
}

.logo-pacman div {
    position:absolute;
}
.logo-pacman .body {
    background-color:#F2F000;
    width:300px;
    height:300px;
    left:20px;
    top:1370px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -o-border-radius:100%;
    -ms-border-radius:100%;
    border:solid black 6px;
}
.logo-pacman .mouth {
    background-color:white;
    width:170px;
    height:170px;
    left:200px;
    top:1445px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    border:solid black 6px;
}
.logo-pacman .eye {
    background-color:black;
    width:30px;
    height:30px;
    left:160px;
    top:1445px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -o-border-radius:100%;
    -ms-border-radius:100%;
}
.logo-pacman .mask-top {
    background-color:white;
    width:10px;
    height:250px;
    left:368px;
    top:1370px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
}
.logo-pacman .mask-bottom {
    background-color:white;
    width:35px;
    height:250px;
    left:350px;
    top:1453px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
}

.logo-olympia div {
    position: absolute;
}
.logo-olympia .ring-one {
    background-color:none;
    width:150px;
    height:150px;
    left:20px;
    top:1790px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -o-border-radius:100%;
    -ms-border-radius:100%;
    border:solid #0085C7 15px;
}
.logo-olympia .ring-two {
    background-color:none;
    width:150px;
    height:150px;
    left:117px;
    top:1870px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -o-border-radius:100%;
    -ms-border-radius:100%;
    border:solid #F4C300 15px;
}
.logo-olympia .ring-three {
    background-color:none;
    width:150px;
    height:150px;
    left:215px;
    top:1790px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -o-border-radius:100%;
    -ms-border-radius:100%;
    border:solid black 15px;
}
.logo-olympia .ring-four {
    background-color:none;
    width:150px;
    height:150px;
    left:312px;
    top:1870px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -o-border-radius:100%;
    -ms-border-radius:100%;
    border:solid #009F3D 15px;
}
.logo-olympia .ring-five {
    background-color:none;
    width:150px;
    height:150px;
    left:410px;
    top:1790px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -o-border-radius:100%;
    -ms-border-radius:100%;
    border: solid #DF0024 15px;
}

Pure CSS Logos