CS - FUN WITH BORDERS

create the Chicago Cubs emblem using nothing but HTML & CSS!


Code Library »

The Finished Product

CSS Border & Border-Radius At Work

Putting the border & border-radius properties to work creating this cool simple image.

HINT:

Did you try hovering over the image above? A little something-something for Cubs fans...

How It's Done

HTML

<div id="ellipses">
    <div id="blue-ellipse"></div>
    <div id="white-ellipse"></div>
    <div id="red-ellipse"></div>
    <p class="ellipses-text"></p>
</div>

HINT:

What makes this possible is the #red-eliptical statement and a lot of absolute positioning.

Notice the border-right: 100px solid transparent;? This is how I make the red 'pacman' like shape.

CSS

#ellipses {
    display: block;
    margin: 50px 0;
    width: 400px;
    height: 400px;
    position: relative;
    cursor: pointer;
}
#blue-ellipse {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background: #0e3386;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#white-ellipse {
    display: block;
    width: 80%;
    height: 80%;
    background: #ffffff;
    position: absolute;
    border-radius: 50%;
    top: 10%;
    left: 10%;
    z-index: 2;
}
#red-ellipse {
    display: block;
    width: 70%;
    height: 70%;
    border-right: 80px solid transparent;
    border-top: 80px solid #d82427;
    border-left: 80px solid #d82427;
    border-bottom: 80px solid #d82427;
    border-radius: 50%;
    position: absolute;
    top: 15%;
    left: 15%;
    z-index: 3;
}
#ellipses p.ellipses-text {
    color: #d82427;
    font-size: 75px;
    font-family: 'Coda Caption';
    text-shadow: 2px 2px 6px #242424;
    text-transform: uppercase;
    position: absolute;
    top: 145px;
    left: 164px;
    z-index: 4;
}

JavaScript

$(document).ready(function() {
    var el = $('.ellipses-text');
    el.text('ubs');
    $('#ellipses').on('mouseover', function() {
        el.fadeOut(800, function() {
            el.text('suk').fadeIn(800);
        });
    });
    $('#ellipses').on('mouseout', function() {
        el.fadeOut(800, function() {
            el.text('ubs').fadeIn(800);
        });
    });
});