Social Media Icons

Made of delicious CSS (with exception of the bird and the tube)

by Nick Iaconis

HTML

<div class="row">

<a href="javascript:void()">
    <div class="social-wrap">
        <div class="social-bg social-negative">
            <div class="social-icon social-mail-wrap">
                <div class="social-positive social-mail-out"></div>
                <div class="social-negative social-mail-in"></div>
                <div class="social-positive social-mail-baseline social-mail-baseleft"></div>
                <div class="social-positive social-mail-baseline social-mail-baseright"></div>
                <div class="social-positive social-mail-flapline social-mail-flapleft"></div>
                <div class="social-positive social-mail-flapline social-mail-flapright"></div>
            </div>
        </div>
    </div>
</a>

<a href="javascript:void()">
    <div class="social-wrap">
        <div class="social-bg social-negative">
            <div class="social-icon social-twit-wrap">
                <img class="social-twit-img" src="https://dl-web.dropbox.com/get/Public/twitter-bird-logo-2012-white.svg?w=AABlWkM6V50weGHvovxMJa5shPd-uck3vjprKxji83-ykw" alt="apologies if this svg doesn't load" />
            </div>
        </div>
    </div>
</a>

<a href="javascript:void()">
    <div class="social-wrap">
        <div class="social-bg social-negative">
            <div class="social-icon social-face-wrap">
                <div class="social-positive social-face-stem"></div>
                <div class="social-positive social-face-cross"></div>
                <div class="social-positive social-face-loop social-face-out"></div>
                <div class="social-negative social-face-loop social-face-in"></div>
                <div class="social-positive social-face-extra"></div>
            </div>
        </div>
    </div>
</a>
    
</div>

<div class="row">

<a href="javascript:void()">
    <div class="social-wrap">
        <div class="social-bg social-negative">
            <div class="social-icon social-youtube-wrap">
                <img...

CSS

.social-twit-wrap {
    position: absolute;
    width: 60%;
    height: 50%;
    top: 25%;
    left: 20%;
}

.social-twit-img {
    width: 100%;
}

.social-youtube-wrap {
    position: relative;
    width: 60%;
    height: 70.5%;
    top: 14.75%;
    left: 20%;
}

.social-youtube-img {
    width: 100%;
}

.social-face-wrap {
    position: relative;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 20%;
}

.social-face-stem {
    position: absolute;
    top: 40%;
    left: 40%;
    bottom: -50%;
    width: 30%;
}

.social-face-cross {
    position: absolute;
    top: 45%;
    left: 20%;
    width: 80%;
    height: 30%;
}

.social-face-loop {
    position: absolute;
    bottom: 60%;
    right: 10%;
    -webkit-border-radius: 80% 0 0 0;
}

.social-face-out {
    width: 50%;
    height: 50%;
    z-index: 1;
}

.social-face-in {
    width: 20%;
    height: 20%;
    z-index: 2;
}

.social-face-extra {
    position: absolute;
    right: 0;
    bottom: 80%;
    width: 10%;
    height: 30%;
}

.social-mail-wrap {
    position: relative;
    width: 70%;
    height: 45%;
    top: 27.5%;
    left: 15%;
}

.social-mail-out {
    position: absolute;
    width: 100%;
    height: 100%;
}

.social-mail-in {
    position: absolute;
    top: 15%;
    right: 10%;
    bottom: 10%;
    left: 10%;
}

.social-mail-flapline {
    position: absolute;
    top: 32.5%;
    width: 59%;
    height: 15%;
}

.social-mail-flapleft {
    -webkit-transform: rotate(37.5deg);
}

.social-mail-flapright {
    right: 0;
    -webkit-transform: rotate(-37.5deg);
}

.social-mail-baseline {
    position: absolute;
    bottom: 22.5%;
    width: 45%;
    height: 10%;
}

.social-mail-baseleft {
    -webkit-transform: rotate(-33.75deg);
}

.social-mail-baseright {
    right: 0;
    -webkit-transform: rotate(33.75deg);
}

.social-in-wrap {
    position: relative;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
}

.social-in-idot {
    position: absolute;
    left: -2%;
    top: -9%;
   ...