Easter-eggs in CSS3 ... and a bit of jQuery

I know it's a bit late, Easter is gone but I'm still digesting tons and tons of casatiello (a delicious neapolitan salt cake) and coding is a good idea to help my stomach.

Ok, let's try to draw an easter-egg just using CSS3 and jQuery.

I need to obtain at least an egg, a ribbon and a cockade; everything has to be resizable with the page.

First: design the egg.

Looking at http://www.css3shapes.com/, in a comment I find a useful info about shapes for an egg:

/* width has to be 70% of height */
/* could use width:70%; in a square container */

I create a class called .egg, this is the first container, it is a square and it is measured on the page height, then I add four egg quarters inside the container defining four shapes using border-radius and the ribbon using border-width.

The CSS

I) the container

.egg{
 position: absolute;
 top:0;
 left:0;
 border:1px solid yellow;
 background-color:#89B151;
 padding-top:0.5%;
 }

II) the quarters

 
.top-left-quarter-container{
 width:50%;
 height:58%;
 float:left;
 }
 
.top-right-quarter-container{
 width:50%;
 height:58%;
 float:right;
 }
 
.bottom-left-quarter-container{
 width:50%;
 height:38%;
 float:left;
 }

.bottom-right-quarter-container{
 width:50%;
 height:38%;
 float:right;
 }

III) the egg edges

.inegg{
 display:block;
 width:70%;
 height:100%;
 background-color:#CCC; 
 }
  
.inegg-tl {
 float:right; 
 border-right-style:solid;
 border-bottom-style:solid;
 border-radius:97% 0 0 0/99% 0 0 0;    
 }

.inegg-tr {
 float:left; 
    border-left-style:solid;
 border-bottom-style:solid;
 border-radius:0 97% 0 0/0 99% 0 0;
 }

.inegg-bl {
 float:right; 
 border-right-style:solid;
 border-top-style:solid;
 border-radius:0 0 0 90%/0 0 0 99%;
 }

.inegg-br {
 float:left;
 border-left-style:solid;
 border-top-style:solid;
 border-radius:0 0 90% 0/0 0 99% 0;
 }

The jQuery

    //Reload on resizing: needs to calculate proportions
 $(window).bind('resize',function(){
  window.location.href = window.location.href;
 });
    
    //Set the egg and the ribbon containers in a square of 90% of window height
    $(".egg,.ribbon").css("height", ($(window).height()/10)*9 + "px");
    $(".egg,.ribbon").css("width", ($(window).height()/10)*9 + "px");
    
    //Set the inner borders of egg quarters at more or less 3.33% of egg height 
 $(".inegg-tl, .inegg-bl").css("borderRightWidth", ($(".inegg-tl").height()/30)*1 + "px");  
    $(".inegg-tl, .inegg-bl").css("borderRightColor", '#F4DDBE'); 
    
    $(".inegg-tl, .inegg-tr").css("borderBottomWidth", ($(".inegg-tl").height()/30)*1 + "px");  
    $(".inegg-tl, .inegg-tr").css("borderBottomColor", '#F4DDBE');  

    $(".inegg-tr, .inegg-br").css("borderLeftWidth", ($(".inegg-tl").height()/30)*1 + "px");  
    $(".inegg-tr, .inegg-br").css("borderLeftColor", '#F4DDBE'); 
    
    $(".inegg-bl, .inegg-br").css("borderTopWidth", ($(".inegg-tl").height()/30)*1 + "px");  
    $(".inegg-bl, .inegg-br").css("borderTopColor", '#F4DDBE');
    

The HTML

See the result:

http://www.nelsonweb.it/eastereggcss/indexnoribbon.html

Then I create the ribbon and the cockade with DIV shaped as ellipses, squares and rectangles, just with CSS3 I translate them to center properly, rotate and add features like shadows.

The CSS

I) the container

.ribbon{
 position: absolute;
 top:0;
 left:0;
 z-index:100; 
 padding-top:0.5%;
 }

II) the top and the bottom part of the ribbon

.top-ribbon{
 position: absolute; 
 top:47%; 
 width: 200px; 
 height: 100px;
 background: transparent; 
 border-style:solid;
 border-color:#85D4E3;
 border-width:10px;
 -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 }

.top-ribbon-left { 
 left:39%;
 border-radius:99%; 
 -moz-transform: translate(-50%, -50%) rotate(45deg);
 -webkit-transform: translate(-50%, -50%) rotate(45deg);
 -ms-transform: translate(-50%, -50%) rotate(45deg);
 -o-transform: translate(-50%, -50%) rotate(45deg);
 transform: translate(-50%, -50%) rotate(45deg);
}

.top-ribbon-right {
 left:61%;
 border-radius:99%; 
 -moz-transform: translate(-50%, -50%) rotate(-45deg);
 -webkit-transform: translate(-50%, -50%) rotate(-45deg);
 -ms-transform: translate(-50%, -50%) rotate(-45deg);
 -o-transform: translate(-50%, -50%) rotate(-45deg);
 transform: translate(-50%, -50%) rotate(-45deg);
}

/* bottom ribbon style */
.ribbon-wrapper{
 width: 150px;
 position: absolute;
 top:65%;

 }
 
.ribbon-wrapper span{
 color:#fff;
 font-weight:bolder;
 }
 
.ribbon-wrapper-left {
 left:45%;
 -webkit-transform: translate(-55%, -40%) rotate(-45deg);
 transform: translate(-55%, -40%) rotate(-45deg);
}

.ribbon-wrapper-right {
 left:55%;
 -webkit-transform: translate(-45%, -40%) rotate(225deg);
 transform: translate(-45%, -40%) rotate(225deg);
}

  .ribbon-front {
 background-color: #85D4E3; 
 height: 40px;
 position: relative;
 font-size:1.6em;
 left:-10px;
 z-index: 2;
 -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

.ribbon-edge{
 position: absolute;
 z-index: 1;
 border-style:solid;
 height:0px;
 width:0px;
 left: -10px;
 border-color: transparent #99c transparent transparent;
 }

  .ribbon-edge-left
 {
 top: -10px;
 border-width: 10px 10px 0 0;
}

 .ribbon-edge-right
 {
 border-width: 0 10px 10px 0;
}

 .ribbon-back{
  position: absolute;
  left: -30px;
  width: 30px;
  height: 40px;
  background-color: #85D4E3; 
  z-index: 0;
  }

 .ribbon-back-left {
 top: -10px;
}

  .ribbon-back-right{
 top: 10px;
 }

The jQuery

    //.top-ribbon, 40%
    $(".top-ribbon").css("height", ($(".inegg-tl").width()/10)*4 + "px");
    $(".top-ribbon").css("width", ($(".top-ribbon").height())*2 + "px");
    $(".top-ribbon").css("borderWidth", ($(".ribbon").height()/30)*1 + "px");
        
    //set the Happy easter ribbons at x% of .ribbon box 
    $(".ribbon-wrapper, .ribbon-front").css("width", ($(".ribbon").width()/10)*2 + "px");
    $(".ribbon-front").css("height", ($(".ribbon").height()/20)*1 + "px");
    
    //set the ribbon-back height in function of ribbon-front   
    $(".ribbon-back").css("height", $(".ribbon-front").height() + "px");

The HTML

   

  

  

  

    

    

    

  
  

    

    

    

  
...

See the result:

http://www.nelsonweb.it/eastereggcss/indexnostar.html

Then add the cockade to close the ribbon

The CSS

.star, .star-two, .star-three{
 width:60px;
 height:60px;
 background: #1B346C;
 position: absolute;
 top:59%; left:50%;
 -moz-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 } 

.star {  
   z-index:110;
 }
 
.star-two {
 z-index:111;
 background: #01ABE9;
   /* Rotate */
   -moz-transform: translate(-50%, -50%) rotate(30deg);
   -webkit-transform: translate(-50%, -50%) rotate(30deg);
   -ms-transform: translate(-50%, -50%) rotate(30deg);
   -o-transform: translate(-50%, -50%) rotate(30deg);
   transform: translate(-50%, -50%) rotate(30deg);
}

.star-three {
 z-index:112;
 background: #85D4E3;
   /* Rotate */
   -moz-transform: translate(-50%, -50%) rotate(-30deg);
   -webkit-transform: translate(-50%, -50%) rotate(-30deg);
   -ms-transform: translate(-50%, -50%) rotate(-30deg);
   -o-transform: translate(-50%, -50%) rotate(-30deg);
   transform: translate(-50%, -50%) rotate(-30deg);
}

The HTML to add inside the .ribbon DIV:

The jQuery:

    //set the star at 10% of .ribbon box height
    $(".star, .star-two, .star-three").css("width", ($(".ribbon").height()/10)*1 + "px");
    $(".star, .star-two, .star-three").css("height", ($(".ribbon").height()/10)*1 + "px");

Just a final touch, add a gradient background to the egg quarters;

/*gradient by http://www.colorzilla.com/gradient-editor/ */
.inegg-tl, .inegg-tr{
 background: #90d5ec; /* Old browsers */
background: -moz-linear-gradient(top,  #90d5ec 0%, #c9eaf5 65%, #e5fffe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#90d5ec), color-stop(65%,#c9eaf5), color-stop(100%,#e5fffe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #90d5ec 0%,#c9eaf5 65%,#e5fffe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #90d5ec 0%,#c9eaf5 65%,#e5fffe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #90d5ec 0%,#c9eaf5 65%,#e5fffe 100%); /* IE10+ */
background: linear-gradient(to bottom,  #90d5ec 0%,#c9eaf5 65%,#e5fffe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#90d5ec', endColorstr='#e5fffe',GradientType=0 ); /* IE6-9 */

 }
 

.inegg-bl, .inegg-br{
 background: #e5fffe; /* Old browsers */
 background: -moz-linear-gradient(top,  #e5fffe 0%, #c9eaf5 35%, #90d5ec 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5fffe), color-stop(35%,#c9eaf5), color-stop(100%,#90d5ec)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #e5fffe 0%,#c9eaf5 35%,#90d5ec 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #e5fffe 0%,#c9eaf5 35%,#90d5ec 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #e5fffe 0%,#c9eaf5 35%,#90d5ec 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #e5fffe 0%,#c9eaf5 35%,#90d5ec 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5fffe', endColorstr='#90d5ec',GradientType=0 ); /* IE6-9 */ 
 }

See the result:

http://www.nelsonweb.it/eastereggcss/index.html

Download the code: https://github.com/orazionelson/easteregg

Sources & Tools:
http://www.css3shapes.com/
http://www.css3d.net/ribbon-generator/
http://www.colorzilla.com/gradient-editor/
http://wesandersonpalettes.tumblr.com/