CSS3 - FUN WITH BORDERS

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


Tuts 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

         <script>
            $(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);
                  });
               });
            });
         </script>