Skip to content

Instantly share code, notes, and snippets.

/Apple-Mice.markdown

Created October 27, 2013 10:32
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Oct 27, 2013.
    7 changes: 7 additions & 0 deletions Apple-Mice.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Apple Mice
    ----------
    A homage to all the Apple Mice over the years (made with pure CSS).

    A [Pen](http://codepen.io/joshbader/pen/fKjra) by [Josh Bader](http://codepen.io/joshbader) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/joshbader/pen/fKjra/license).
    21 changes: 21 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <h1>Apple Mice</h1>

    <div class="mouse magic">
    <div class="cable">
    <i></i><i></i><i></i><i></i><i></i>
    </div>
    <div class="logo">&#63743;</div>
    <div class="button"></div>
    <div class="top"></div>
    </div>

    <ul data-mouse="magic mouse">
    <li data-mouse="lisa">&bull;</li>
    <li data-mouse="macintosh">&bull;</li>
    <li data-mouse="adb">&bull;</li>
    <li data-mouse="adb2">&bull;</li>
    <li data-mouse="imac">&bull;</li>
    <li data-mouse="pro">&bull;</li>
    <li data-mouse="mighty">&bull;</li>
    <li class="active" data-mouse="magic">&bull;</li>
    </ul>
    7 changes: 7 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    $('li').on('click', function() {
    var self = $(this);
    $('.active').removeClass('active');
    self.addClass('active');
    self.closest('ul').attr('data-mouse', self.data('mouse') + ' mouse');
    $('.mouse').removeAttr('class').addClass('mouse ' + self.data('mouse'));
    });
    369 changes: 369 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,369 @@
    * {
    padding: 0; margin: 0;
    -webkit-transition: all 0.25s; -moz-transition: all 0.25s; transition: all 0.25s; }

    body { background: #eee; }

    h1 {
    position: absolute; top: 20px; left: 20px;
    color: #ccc; font-family: 'Helvetica Neue', Helvetica, Arial; font-weight: 100; font-size: 40px; text-transform: uppercase; text-align: center; }

    ul { text-align: center; width: 100%; position: absolute; top: 500px; }
    li { display: inline; margin: 0 3px; color: #ccc; font-size: 30px; cursor: pointer; }
    li.active { color: #999; }
    ul:after {
    content: attr(data-mouse); display: block;
    color: #ccc; font-family: 'Helvetica Neue', Helvetica, Arial; font-weight: 100; font-size: 40px; text-transform: uppercase; text-align: center; }


    /* Lisa */

    .lisa.mouse, .lisa.mouse .top {
    background: #cbc9b8;
    box-shadow: inset 0 0 0 rgba(0,0,0,0), inset 0 3px 2px 1px rgba(255,255,255,0.4), inset 0 -20px 3px -1px rgba(0,0,0,0.15), 0 8px 0 rgba(0,0,0,0.06); }

    .lisa.mouse {
    width: 180px; height: 270px; padding: 20px; margin: 100px auto; position: relative;
    border: 0px solid transparent;
    border-radius: 25px 25px 3px 3px; }

    .lisa.mouse .top {
    width: 130px; height: 250px; padding: 25px; position: absolute; top: 20px; left: 20px;
    border-radius: 10px 10px 3px 3px; }

    .lisa .cable, .lisa .cable i, .lisa .button { background: #8f9382; }

    .lisa .cable {
    width: 10px; height: 120px; position: absolute; top: -120px; left: 105px;
    box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.15); }

    .lisa .cable i {
    position: absolute;
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 2px rgba(0,0,0,0.08);
    border-radius: 4px 4px 0 0; }

    .lisa .cable i:nth-child(1) { width: 80px; height: 20px; top: 100px; left: -35px; }
    .lisa .cable i:nth-child(2) { width: 60px; height: 10px; top: 90px; left: -25px; }
    .lisa .cable i:nth-child(3) { width: 50px; height: 10px; top: 80px; left: -20px; }
    .lisa .cable i:nth-child(4) { width: 40px; height: 10px; top: 70px; left: -15px; }
    .lisa .cable i:nth-child(5) { width: 30px; height: 10px; top: 60px; left: -10px; }

    .lisa .button {
    width: 156px; height: 50px; position: absolute; top: 32px; left: 30px; z-index: 10;
    box-shadow: inset 0 2px 2px 1px rgba(255,255,255,0.4), inset 0 -3px 2px rgba(0,0,0,0.15);
    border: 2px solid #535139;
    border-radius: 8px; }

    .lisa .logo {
    padding: 2px 6px; position: absolute; top: 245px; left: 25px; z-index: 20;
    color: #cbc9b8; font-size: 25px;
    border-width: 2px; border-style: solid; border-color: rgba(0,0,0,0.05); border-top-color: rgba(0,0,0,0.15); border-bottom-color: rgba(255,255,255,0.4);
    border-radius: 3px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 -2px 0 rgba(255,255,255,0.4); }


    /* Mac */

    .macintosh.mouse, .macintosh.mouse .top { background: #e3daac; }

    .macintosh.mouse {
    width: 140px; height: 155px; padding: 20px; margin: 100px auto 105px; position: relative;
    box-shadow: 0 20px 0 0 #c1b992, 0 25px 0 rgba(0,0,0,0.06);
    border-top: 50px solid rgba(255,255,255,0.4); border-bottom: 60px solid rgba(0,0,0,0.1); border-left: 20px solid rgba(0,0,0,0.05); border-right: 20px solid rgba(0,0,0,0.05);
    border-radius: 10px; }

    .macintosh.mouse .top {
    width: 190px; height: 220px; padding: 0; position: absolute; top: -10px; left: -5px;
    border-radius: 5px; }

    .macintosh .cable, .macintosh .cable i, .macintosh .button { background: #beaf69; }

    .macintosh .cable {
    width: 10px; height: 120px; position: absolute; top: -170px; left: 85px;
    box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.15); }

    .macintosh .cable i {
    position: absolute;
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 2px rgba(0,0,0,0.08);
    border-radius: 3px 3px 0 0; }

    .macintosh .cable i:nth-child(1) { width: 80px; height: 0; top: 120px; left: -35px; }
    .macintosh .cable i:nth-child(2) { width: 50px; height: 10px; top: 110px; left: -20px; }
    .macintosh .cable i:nth-child(3) { width: 40px; height: 10px; top: 100px; left: -15px; }
    .macintosh .cable i:nth-child(4) { width: 30px; height: 10px; top: 90px; left: -10px; }
    .macintosh .cable i:nth-child(5) { width: 20px; height: 10px; top: 80px; left: -5px; }

    .macintosh .button {
    width: 146px; height: 100px; position: absolute; top: -35px; left: 15px; z-index: 10;
    box-shadow: inset 0 20px 2px 1px rgba(255,255,255,0.2), inset 0 -3px 2px -1px rgba(0,0,0,0.15);
    border: 2px solid #75672f;
    border-radius: 8px; }

    .macintosh .logo {
    padding: 2px 6px; position: absolute; top: 155px; left: 15px; z-index: 20;
    color: #e3daac; font-size: 25px;
    border-width: 2px; border-style: solid; border-color: rgba(0,0,0,0.05); border-top-color: rgba(0,0,0,0.15); border-bottom-color: rgba(255,255,255,0.4);
    border-radius: 3px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 -2px 0 rgba(255,255,255,0.4); }


    /* ADB */

    .adb.mouse {
    width: 180px; height: 0; padding: 0; margin: 110px auto 195px; position: relative;
    box-shadow: 0 -25px 0 -19px #dfddcf;
    border-width: 20px; border-style: solid; border-color: transparent; border-top-width: 0; border-bottom-width: 205px; border-bottom-color: #d6d4c6;
    border-radius: 30px 30px 0 0; }

    .adb.mouse .top {
    width: 220px; height: 110px; padding: 0; position: absolute; top: 205px; left: -20px;
    background: #cccaba;
    box-shadow: inset 0 0 0 rgba(0,0,0,0), inset 0 0 0 rgba(0,0,0,0), inset 0 1px 5px 2px #d6d4c6, 0 5px 0 rgba(0,0,0,0.06);
    border-radius: 0 0 10px 10px; }

    .adb .cable, .adb .cable i { background: #bbb4a1; }

    .adb .cable {
    width: 10px; height: 120px; position: absolute; top: -125px; left: 83px;
    box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.15); }

    .adb .cable i {
    position: absolute;
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 2px rgba(0,0,0,0.08);
    border-radius: 3px 3px 0 0; }

    .adb .cable i:nth-child(1) { width: 80px; height: 0; top: 120px; left: -35px; }
    .adb .cable i:nth-child(2) { width: 50px; height: 0px; top: 120px; left: -20px; }
    .adb .cable i:nth-child(3) { width: 36px; height: 10px; top: 110px; left: -13px; }
    .adb .cable i:nth-child(4) { width: 26px; height: 10px; top: 100px; left: -8px; }
    .adb .cable i:nth-child(5) { width: 16px; height: 10px; top: 90px; left: -3px; }

    .adb .button {
    width: 136px; height: 100px; position: absolute; top: 15px; left: 20px; z-index: 10;
    background: #d6d4c6;
    box-shadow: inset 0 3px 2px 1px rgba(255,255,255,0.2), inset 0 -2px 2px -1px rgba(0,0,0,0.15);
    border: 2px solid #a09f8a;
    border-radius: 8px; }

    .adb .logo {
    padding: 2px 6px; position: absolute; top: 265px; left: 0; z-index: 20;
    color: #cccaba; font-size: 30px;
    border: 0px solid transparent;
    border-radius: 3px;
    text-shadow: 0 -2px 0 rgba(0,0,0,0.15), 0 2px 0 rgba(255,255,255,0.4); }


    /* ADB2 */

    .adb2.mouse {
    width: 182px; height: 0; padding: 0; margin: 170px auto 218px; position: relative;
    box-shadow: 0 -12px 0 -8px rgba(0,0,0,0.45);
    border-width: 15px; border-style: solid; border-color: transparent; border-top-width: 0; border-bottom-width: 122px; border-bottom-color: #d6d4c6;
    border-radius: 50% 50% 0 0; }

    .adb2.mouse .top {
    width: 216px; height: 240px; padding: 0; position: absolute; top: 28px; left: -17px;
    background: #d6d4c6;
    box-shadow: inset 0 -30px 40px -10px rgba(0,0,0,0.1), 0 8px 0 rgba(0,0,0,0.06);
    border-radius: 50%; }

    .adb2 .cable, .adb2 .cable i { background: #bbb4a1; }

    .adb2 .cable {
    width: 10px; height: 120px; position: absolute; top: -205px; left: 83px; z-index: -10;
    box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.15); }

    .adb2 .cable i {
    position: absolute;
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 2px rgba(0,0,0,0.08);
    border-radius: 50% 50% 0 0; }

    .adb2 .cable i:nth-child(1) { width: 80px; height: 0; top: 120px; left: -35px; }
    .adb2 .cable i:nth-child(2) { width: 50px; height: 0px; top: 120px; left: -20px; }
    .adb2 .cable i:nth-child(3) { width: 36px; height: 10px; top: 110px; left: -13px; }
    .adb2 .cable i:nth-child(4) { width: 26px; height: 10px; top: 102px; left: -8px; z-index: -5; }
    .adb2 .cable i:nth-child(5) { width: 16px; height: 10px; top: 94px; left: -3px; z-index: -10; }

    .adb2 .button {
    width: 140px; height: 0; position: absolute; top: -84px; left: -4px; z-index: -10;
    background: transparent;
    box-shadow: 0 -16px 0 -13px #e9e7da;
    border-width: 25px; border-style: solid; border-color: transparent; border-top-width: 0; border-bottom-width: 120px; border-bottom-color: #d6d4c6;
    border-radius: 50% 50% 0 0; }

    .adb2 .logo {
    padding: 2px 6px; position: absolute; top: 163px; left: 68px; z-index: 20;
    color: #d6d4c6; font-size: 34px;
    border: 0px solid transparent;
    border-radius: 3px;
    text-shadow: 0 -2px 0 rgba(0,0,0,0.15), 0 2px 0 rgba(255,255,255,0.4); }


    /* iMac */

    .imac.mouse {
    width: 220px; height: 220px; padding: 0; margin: 120px auto 170px; position: relative;
    background: #00b2c5;
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0), inset 0 3px 10px -2px rgba(255,255,255,1), inset 0 -3px 10px -2px rgba(0,0,0,0.3), 0 8px 0 rgba(0,0,0,0.06);
    border: 0px solid transparent;
    border-radius: 50%; }

    .imac.mouse .top {
    width: 174px; height: 130px; padding: 0; position: absolute; top: 91px; left: 23px;
    background: #ebeee9;
    box-shadow: inset 0 -3px 20px -10px rgba(0,0,0,0.1), inset 0 -20px 30px -5px #ebeee9, inset 0 -20px 40px -10px rgba(130,190,180,0.5), 0 -40px 0 #ebeee9;
    border-radius: 50%; }

    .imac .cable {
    width: 10px; height: 140px; position: absolute; top: -135px; left: 105px; z-index: 10;
    background: #ebeee9;
    box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.15); }

    .imac .cable i:nth-child(1) {
    width: 174px; height: 130px; position: absolute; top: 134px; left: -83px; z-index: 10;
    background: #ebeee9;
    box-shadow: inset 0 20px 30px -5px #ebeee9, inset 0 20px 40px -10px rgba(130,190,180,0.5);
    border-radius: 50%; }

    .imac .cable i:nth-child(2) {
    width: 30px; height: 45px; position: absolute; top: 215px; left: -101px; z-index: 10;
    background: #00b2c5;
    border-radius: 50% 100% 50% 50%; }

    .imac .cable i:nth-child(3) {
    width: 30px; height: 45px; position: absolute; top: 215px; left: 79px; z-index: 10;
    background: #00b2c5;
    border-radius: 100% 50% 50% 50%; }

    .imac .cable i:nth-child(4) {
    width: 30px; height: 45px; position: absolute; top: 233px; left: -101px; z-index: 10;
    background: #00b2c5;
    border-radius: 50% 50% 100% 50%; }

    .imac .cable i:nth-child(5) {
    width: 30px; height: 45px; position: absolute; top: 233px; left: 79px; z-index: 10;
    background: #00b2c5;
    border-radius: 50% 50% 50% 100%; }

    .imac .button {
    width: 144px; height: 80px; position: absolute; top: 0; left: 37px; z-index: 10;
    background: #ebeee9;
    box-shadow: inset 0 3px 10px -5px rgba(0,0,0,0.1), inset 0 -3px 20px -5px rgba(0,0,0,0.05), 0 3px 10px -2px rgba(255,255,255,0.5), inset 0 20px 30px -5px #ebeee9, inset 0 20px 40px -10px rgba(130,190,180,0.5);
    border: 0px solid transparent;
    border-radius: 50%; }

    .imac .logo {
    padding: 4px 10px; position: absolute; top: 90px; left: 85px; z-index: 20;
    color: #e0e6e2; font-size: 34px;
    background: rgba(130,190,180,0.1);
    box-shadow: 0 -2px 2px rgba(0,0,0,0.05), 0 2px 2px rgba(255,255,255,0.5), 0 -20px 40px 10px rgba(130,190,180,0.1), 0 20px 40px 10px rgba(130,190,180,0.1);
    border: 0px solid transparent;
    border-radius: 50%;
    text-shadow: 0 -2px 0 rgba(0,0,0,0.08), 0 2px 0 rgba(255,255,255,0.4); }


    /* Pro */

    .pro.mouse {
    width: 170px; height: 320px; padding: 0; margin: 100px auto 90px; position: relative;
    background: #f5f5f5;
    box-shadow: inset 0 3px 20px -5px rgba(255,255,255,1), inset 0 -3px 50px -15px rgba(0,0,0,0.6);
    border: 0px solid transparent;
    border-radius: 85px; }

    .pro.mouse .top {
    width: 200px; height: 350px; padding: 0; position: absolute; top: -15px; left: -15px; z-index: 20;
    background: rgba(255,255,255,0.4);
    box-shadow: inset 0 0 0 rgba(255,255,255,0), inset 0 0 0 rgba(0,0,0,0), inset 0 0 0 rgba(0,0,0,0), 0 8px 0 rgba(0,0,0,0.02);
    border-radius: 100px; }

    .pro .cable {
    width: 10px; height: 140px; position: absolute; top: -140px; left: 80px; z-index: 10;
    background: #f5f5f5;
    box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.08); }

    .pro .cable i {
    position: absolute;
    background: #f9f9f9;
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 5px rgba(0,0,0,0.08); }

    .pro .cable i:nth-child(1) { width: 0; height: 0; top: 120px; left: 5px; }
    .pro .cable i:nth-child(2) { width: 30px; height: 70px; top: 220px; left: -95px; border-radius: 0 50px 50px 0; }
    .pro .cable i:nth-child(3) { width: 30px; height: 70px; top: 220px; left: 75px; border-radius: 50px 0 0 50px; }
    .pro .cable i:nth-child(4) { width: 0; height: 0; top: 120px; left: 5px; }
    .pro .cable i:nth-child(5) { width: 0; height: 0; top: 120px; left: 5px; }

    .pro .button { width: 0; height: 0; position: absolute; top: 0; left: 80px; z-index: 10; }

    .pro .logo {
    position: absolute; top: 190px; left: 70px; z-index: 30;
    color: #ddd; font-size: 34px; }


    /* Mighty */

    .mighty.mouse {
    width: 170px; height: 320px; padding: 0; margin: 95px auto; position: relative;
    border: 0px solid transparent;
    border-radius: 85px; }

    .mighty.mouse .top {
    width: 200px; height: 350px; padding: 0; position: absolute; top: -15px; left: -15px; z-index: 20;
    background: #f9f9f9;
    box-shadow: inset 0 3px 30px -5px rgba(255,255,255,1), inset 0 -3px 60px -15px rgba(0,0,0,0.5), inset 0 0 0 rgba(0,0,0,0), 0 8px 0 rgba(0,0,0,0.02);
    border-radius: 100px; }

    .mighty .cable { width: 0; height: 0; position: absolute; top: 0; left: 85px; }

    .mighty .cable i {
    width: 0; height: 0; position: absolute; top: 120px; left: 0;
    background: #f9f9f9;
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 5px rgba(0,0,0,0.08); }

    .mighty .button {
    width: 14px; height: 14px; position: absolute; top: 40px; left: 75px; z-index: 30;
    background: #ddd;
    box-shadow: inset 0 3px 8px rgba(255,255,255,0.8), inset 0 -3px 8px rgba(0,0,0,0.2), 0 3px 2px rgba(0,0,0,0.07);
    border: 1px solid #ddd;
    border-radius: 50%; }

    .mighty .logo {
    position: absolute; top: 190px; left: 70px; z-index: 30;
    color: #f7f7f7; font-size: 34px;
    text-shadow: 0 -2px 0 rgba(0,0,0,0.08), 0 2px 0 rgba(255,255,255,1); }


    /* Magic */

    .magic.mouse {
    width: 200px; height: 420px; padding: 0; margin: 45px auto; position: relative;
    background: #fff;
    border: 0px solid transparent;
    border-radius: 75px;
    -webkit-transform: scaleY(0.85); -moz-transform: scaleY(0.85); transform: scaleY(0.85); }

    .magic.mouse .top {
    width: 200px; height: 423px; padding: 0; position: absolute; top: -2px; left: 0; z-index: 20;
    background: #f7f7f7;
    box-shadow: inset 0 20px 50px 10px rgba(255,255,255,1), inset 0 0 0 rgba(0,0,0,0), inset 0 0 0 rgba(0,0,0,0), 0 10px 0 rgba(0,0,0,0.02);
    border-radius: 90px; }

    .magic .cable { width: 0; height: 0; position: absolute; top: 0; left: 100px; }

    .magic .cable i {
    width: 0; height: 0; position: absolute; top: 120px; left: 0;
    background: #f9f9f9;
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 5px rgba(0,0,0,0.08); }

    .magic .button { width: 0; height: 0; position: absolute; top: 0; left: 100px; z-index: 10; }

    .magic .logo {
    position: absolute; top: 290px; left: 82px; z-index: 30;
    color: #ddd; font-size: 45px;
    -webkit-transform: scaleY(1.15); -moz-transform: scaleY(1.15); transform: scaleY(1.15) }

    /* Media Queries */

    @media (max-width: 500px) {
    h1 { display: none; }
    }