Blue Marble

Blue Marble.markdown

Blue Marble

A demonstration of using border-radius, linear-gradient, and box-shadow to create a convincing 3D sphere from a 2D box.

Forked from Rob Glazebrook's Pen Blue Marble.

A Pen by Alan Wynn on CodePen.

License.

index.html

<div class="ball">
    <b></b>
    <span>42</span>
</div>

style.css

body {
    background-color: #191919;
    padding-top: 15%;
    
    & > * {
        margin: 30px auto 0;
    }
}

.ball {
    $size: 300px;

    position: relative;
    display: block;
    width: $size;
    height: $size;

    b {
        display: block;
        background-color: #3b4ba3;
        width: $size;
        height: $size;
        border-radius: 50%;
        box-shadow: inset -25px -25px 40px rgba(0, 0, 0, .5);
        background-image: linear-gradient(to bottom right, rgba(255, 255, 220, .2) 0%, transparent 100%);
        position: absolute;
    
        &:before {
            content: " ";
            display: block;
            backgound-color: #000;
            position: absolute;
            top: 30%;
            left: 30%;
            margin-top: -12.5%;
            margin-left: -12.5%;
            height: 0;
            width: 0;
            border: ($size / 3.05) solid #fff;
            border-radius: 50%;
        }
    
        &:after {
            content: " ";
            display: block;
            backgound-color: #000;
            position: absolute;
            top: 25%;
            left: 25%;
            margin-top: -12.5%;
            margin-left: -12.5%;
            height: ($size / 1.43);
            width: ($size / 1.43);
            border: ($size / 40) solid #fff;
            border-radius: 50%;
        }
    
        & + span {
            position: absolute;
            font-family: Lato;
            color: #000;
            text-align: center;
            line-height: ($size / 1.1);
            text-decoration: underline;
            font-size: ($size / 2.5);
            font-variant: normal;
            font-weight: 100;
            display: block;
            width: $size;
            height: $size;
        }
    }
}

styles

<link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet" />