Bands, dots and stars - what could make your Easter egg even more awesome? What's the spirit of Easter? Why, hope and renewal of course. And for that, we need to add a rainbow to your egg.
If you've gone through the web tutorial for the
CSS Rainbowlizer, this is pretty similar. One div with seven other divs nested within it. Here's what we add to the
egg_wrapper div.
<div id="egg_wrapper">
<div id="egg">
<div id="band1" class="band"></div>
<div id="band2" class="band"></div>
<div id="band3" class="band"></div>
<div id="polkadot1" class="polkadot"></div>
<div id="polkadot2" class="polkadot"></div>
<div id="polkadot3" class="polkadot"></div>
<div id="polkadot4" class="polkadot"></div>
<div id="polkadot5" class="polkadot"></div>
<div id="star_wrapper1" class="star_wrapper">
<div id="star1_part1" class="star_part1"></div>
<div id="star1_part2" class="star_part2"></div>
<div id="star1_part3" class="star_part3"></div>
</div>
<div id="star_wrapper2" class="star_wrapper">
<div id="star2_part1" class="star_part1"></div>
<div id="star2_part2" class="star_part2"></div>
<div id="star2_part3" class="star_part3"></div>
</div>
<div id="star_wrapper3" class="star_wrapper">
<div id="star3_part1" class="star_part1"></div>
<div id="star3_part2" class="star_part2"></div>
<div id="star3_part3" class="star_part3"></div>
</div>
<div id="star_wrapper4" class="star_wrapper">
<div id="star4_part1" class="star_part1"></div>
<div id="star4_part2" class="star_part2"></div>
<div id="star4_part3" class="star_part3"></div>
</div>
<div id="star_wrapper5" class="star_wrapper">
<div id="star5_part1" class="star_part1"></div>
<div id="star5_part2" class="star_part2"></div>
<div id="star5_part3" class="star_part3"></div>
</div>
<div id="rainbow_wrapper">
<div id="rainbowband1" class="rainbowband"></div>
<div id="rainbowband2" class="rainbowband"></div>
<div id="rainbowband3" class="rainbowband"></div>
<div id="rainbowband4" class="rainbowband"></div>
<div id="rainbowband5" class="rainbowband"></div>
<div id="rainbowband6" class="rainbowband"></div>
<div id="rainbowband7" class="rainbowband"></div>
</div>
</div>
</div>
Here are the CSS styles for the rainbow. The
rainbow_wrapper div is rotated around its middle and positioned over the egg much the same was as the bands. Each div inside the
rainbow_wrapper div is styled by
rainbowband. The
position property is
absolute because they all overlap each other, and the
border-radius property is set to 50% because they are all ellipses. However, they will appear only as curved bands because the rest of it is truncated by the
rainbow_wrapper div's
overflow property, which is set to
hidden.
And of course, each individual band's background is transparent and its border set to 10 pixels, each of a different color.
.star_part1
{
position: absolute;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 15px solid red;
border-left: 20px solid transparent;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
.star_part2
{
position: absolute;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 15px solid red;
border-left: 20px solid transparent;
-webkit-transform:rotate(70deg);
transform:rotate(70deg);
}
.star_part3
{
position: absolute;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 15px solid red;
border-left: 20px solid transparent;
-webkit-transform:rotate(-70deg);
transform:rotate(-70deg);
}
#rainbowband1{background:transparent;border:10px solid #FF0000;}
#rainbowband2{background:transparent;border:10px solid #FF9900;}
#rainbowband3{background:transparent;border:10px solid #FFFF00;}
#rainbowband4{background:transparent;border:10px solid #00FF00;}
#rainbowband5{background:transparent;border:10px solid #0000FF;}
#rainbowband6{background:transparent;border:10px solid #440044;}
#rainbowband7{background:transparent;border:10px solid #FF00FF;}
#rainbow_wrapper
{
width:1000px;
height:100px;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
overflow:hidden;
position:absolute;
}
.rainbowband
{
border-radius:50%;
position:absolute;
}
You should be seeing this now. The rainbow appears as just a
pink dot because we haven't positioned the individual bands properly. This will be fixed via JavaScript.
Hide the rainbow by adding this line.
#rainbow_wrapper
{
width:1000px;
height:100px;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
overflow:hidden;
display:none;
position:absolute;
}
Then add this code to your
dashboard_wrapper div. As with all the others, it's a set of controls to manipulate your rainbow. The functions are pretty much the same as those used for bands. There's a hidden field,
hid_thickness_rainbow, which stores the thickness of the rainbow bands.
<fieldset>
<legend>Star Settings <input type="checkbox"
id="cb_pnlStars" onclick="setvisible('pnlStars');"></legend>
<div id="pnlStars">
<table>
<tr>
<td rowspan="4">
<input type="checkbox"
id="cb_star_wrapper1" onclick="setvisible('star_wrapper1');"><br
/>
<div class="verticaltext">Star 1</div>
</td>
<td><label for="col_star1">Color</label></td>
<td><input type="color" id="col_star1"
value="#05F044" onchange="setstar('star1');"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="rng_size_star1">Size</label></td>
<td><input type="range"
id="rng_size_star1" class="smallslider" value="20" min="20" max="100"
step="20" onchange="setstchaar('star1');"></td>
<td> </td>
<td><label for="rng_rotate_star_wrapper1">Rotation</label></td>
<td><input type="range"
id="rng_rotate_star_wrapper1" class="smallslider" value="0" min="-180"
max="180" step="10"
onchange="setrotation('star_wrapper1');"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="rng_x_star_wrapper1">X</label></td>
<td><input type="range"
id="rng_x_star_wrapper1" class="smallslider" value="150" min="0"
max="200" step="10" onchange="setx('star_wrapper1');"></td>
<td> </td>
<td><label for="rng_y_star_wrapper1">Y</label></td>
<td><input type="range"
id="rng_y_star_wrapper1" class="smallslider" value="150" min="0"
max="200" step="10" onchange="sety('star_wrapper1');"></td>
<td> </td>
<td><label for="rng_z_star_wrapper1">Z</label></td>
<td><input type="range"
id="rng_z_star_wrapper1" class="smallslider" value="160" min="20"
max="500" step="10" onchange="setz('star_wrapper1');"></td>
</tr>
</table>
<table>
<tr>
<td rowspan="4">
<input type="checkbox"
id="cb_star_wrapper2" onclick="setvisible('star_wrapper2');"><br
/>
<div class="verticaltext">Star 2</div>
</td>
<td><label for="col_star2">Color</label></td>
<td><input type="color" id="col_star2"
value="#EE0088" onchange="setstar('star2');"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="rng_size_star2">Size</label></td>
<td><input type="range"
id="rng_size_star2" class="smallslider" value="40" min="20" max="100"
step="20" onchange="setstar('star2');"></td>
<td> </td>
<td><label for="rng_rotate_star_wrapper2">Rotation</label></td>
<td><input type="range"
id="rng_rotate_star_wrapper2" class="smallslider" value="0" min="-180"
max="180" step="10"
onchange="setrotation('star_wrapper2');"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="rng_x_star_wrapper2">X</label></td>
<td><input type="range"
id="rng_x_star_wrapper2" class="smallslider" value="150" min="0"
max="200" step="10" onchange="setx('star_wrapper2');"></td>
<td> </td>
<td><label for="rng_y_star_wrapper2">Y</label></td>
<td><input type="range"
id="rng_y_star_wrapper2" class="smallslider" value="250" min="0"
max="200" step="10" onchange="sety('star_wrapper2');"></td>
<td> </td>
<td><label for="rng_z_star_wrapper2">Z</label></td>
<td><input type="range"
id="rng_z_star_wrapper2" class="smallslider" value="170" min="20"
max="500" step="10" onchange="setz('star_wrapper2');"></td>
</tr>
</table>
<table>
<tr>
<td rowspan="4">
<input type="checkbox"
id="cb_star_wrapper3" onclick="setvisible('star_wrapper3');"><br
/>
<div class="verticaltext">Star 3</div>
</td>
<td><label for="col_star3">Color</label></td>
<td><input type="color" id="col_star3"
value="#FF9966" onchange="setstar('star3');"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="rng_size_star3">Size</label></td>
<td><input type="range"
id="rng_size_star3" class="smallslider" value="20" min="20" max="100"
step="20" onchange="setstar('star3');"></td>
<td> </td>
<td><label for="rng_rotate_star_wrapper3">Rotation</label></td>
<td><input type="range"
id="rng_rotate_star_wrapper3" class="smallslider" value="0" min="-180"
max="180" step="10"
onchange="setrotation('star_wrapper3');"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="rng_x_star_wrapper3">X</label></td>
<td><input type="range"
id="rng_x_star_wrapper3" class="smallslider" value="50" min="0"
max="200" step="10" onchange="setx('star_wrapper3');"></td>
<td> </td>
<td><label for="rng_y_star_wrapper3">Y</label></td>
<td><input type="range"
id="rng_y_star_wrapper3" class="smallslider" value="280" min="0"
max="200" step="10" onchange="sety('star_wrapper3');"></td>
<td> </td>
<td><label for="rng_z_star_wrapper3">Z</label></td>
<td><input type="range"
id="rng_z_star_wrapper3" class="smallslider" value="180" min="20"
max="500" step="10" onchange="setz('star_wrapper3');"></td>
</tr>
</table>
<table>
<tr>
<td rowspan="4">
<input type="checkbox"
id="cb_star_wrapper4" onclick="setvisible('star_wrapper4');"><br
/>
<div class="verticaltext">Star 4</div>
</td>
<td><label for="col_star4">Color</label></td>
<td><input type="color" id="col_star4"
value="#0055FF" onchange="setstar('star4');"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="rng_size_star4">Size</label></td>
<td><input type="range"
id="rng_size_star4" class="smallslider" value="80" min="20" max="100"
step="20" onchange="setstar('star4');"></td>
<td> </td>
<td><label for="rng_rotate_star_wrapper4">Rotation</label></td>
<td><input type="range"
id="rng_rotate_star_wrapper4" class="smallslider" value="0" min="-180"
max="180" step="10"
onchange="setrotation('star_wrapper4');"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="rng_x_star_wrapper4">X</label></td>
<td><input type="range"
id="rng_x_star_wrapper4" class="smallslider" value="150" min="0"
max="200" step="10" onchange="setx('star_wrapper4');"></td>
<td> </td>
<td><label for="rng_y_star_wrapper4">Y</label></td>
<td><input type="range"
id="rng_y_star_wrapper4" class="smallslider" value="50" min="0"
max="200" step="10" onchange="sety('star_wrapper4');"></td>
<td> </td>
<td><label for="rng_z_star_wrapper4">Z</label></td>
<td><input type="range"
id="rng_z_star_wrapper4" class="smallslider" value="190" min="20"
max="500" step="10" onchange="setz('star_wrapper4');"></td>
</tr>
</table>
<table>
<tr>
<td rowspan="4">
<input type="checkbox"
id="cb_star_wrapper5" onclick="setvisible('star_wrapper5');"><br
/>
<div class="verticaltext">Star 5</div>
</td>
<td><label for="col_star5">Color</label></td>
<td><input type="color" id="col_star5"
value="#040444" onchange="setstar('star5');"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="rng_size_star5">Size</label></td>
<td><input type="range"
id="rng_size_star5" class="smallslider" value="20" min="40" max="100"
step="20" onchange="setstar('star5');"></td>
<td> </td>
<td><label for="rng_rotate_star_wrapper5">Rotation</label></td>
<td><input type="range"
id="rng_rotate_star_wrapper5" class="smallslider" value="0" min="-180"
max="180" step="10"
onchange="setrotation('star_wrapper5');"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="rng_x_star_wrapper5">X</label></td>
<td><input type="range"
id="rng_x_star_wrapper5" class="smallslider" value="50" min="0"
max="200" step="10" onchange="setx('star_wrapper5');"></td>
<td> </td>
<td><label for="rng_y_star_wrapper5">Y</label></td>
<td><input type="range"
id="rng_y_star_wrapper5" class="smallslider" value="100" min="0"
max="200" step="10" onchange="sety('star_wrapper5');"></td>
<td> </td>
<td><label for="rng_z_star_wrapper5">Z</label></td>
<td><input type="range"
id="rng_z_star_wrapper5" class="smallslider" value="200" min="20"
max="500" step="10" onchange="setz('star_wrapper5');"></td>
</tr>
</table>
</div>
</fieldset>
<fieldset>
<legend>Rainbow Settings <input type="checkbox" id="cb_pnlRainbow" onclick="setvisible('pnlRainbow');"></legend>
<div id="pnlRainbow">
<table>
<tr>
<td rowspan="2">
<input type="checkbox" id="cb_rainbow_wrapper" onclick="setvisible('rainbow_wrapper');"><br />
<div class="verticaltext">Rainbow</div>
</td>
<td><label for="rng_height_rainbow_wrapper">Height</label><input type="hidden" id="hid_thickness_rainbow" value="10"></td>
<td><input type="range" id="rng_height_rainbow_wrapper" class="smallslider" value="100" min="20" max="500" step="20" onchange="setheight('rainbow_wrapper');"></td>
<td> </td>
<td><label for="rng_width_rainbow_wrapper">Width</label></td>
<td><input type="range" id="rng_width_rainbow_wrapper" class="smallslider" value="500" min="500" max="1500" step="10" onchange="setwidth('rainbow_wrapper');"></td>
<td> </td>
<td><label for="rng_rotate_rainbow_wrapper">Rotation</label></td>
<td><input type="range" id="rng_rotate_rainbow_wrapper" class="smallslider" value="0" min="-180" max="180" step="10" onchange="setrotation('rainbow_wrapper');"></td>
</tr>
<tr>
<td><label for="rng_y_rainbow_wrapper">Y</label></td>
<td><input type="range" id="rng_y_rainbow_wrapper" class="smallslider" value="60" min="0" max="500" step="10" onchange="sety('rainbow_wrapper');"></td>
<td> </td>
<td><label for="rng_z_rainbow_wrapper">Z</label></td>
<td><input type="range" id="rng_z_rainbow_wrapper" class="smallslider" value="150" min="20" max="500" step="10" onchange="setz('rainbow_wrapper');"></td>
</tr>
</table>
</div>
</fieldset>
Now, modify your JavaScript. The
setwidth() function requires some tweaking for the rainbow. When the
rainbow_wrapper div's width is changed, its
margin-left property needs to be adjusted relative to the width of the egg, so it will always be in the middle of the egg.
function setwidth(varid)
{
$("#"+varid).width($("#rng_width_"+varid).val());
if (varid=="egg")
{
var marginleft=($("#egg_wrapper").width()-$("#egg").width())/2;
$("#egg").css("margin-left", marginleft+"px");
}
if (varid=="rainbow_wrapper")
{
$("#rainbow_wrapper").css("margin-left","-"+(($("#rainbow_wrapper").width()-$("#egg").width())/2)+"px");
}
}
Also, each rainbow band's width is adjusted at the same time to cater for the thickness of the rainbow band. Remember each rainbow band is an ellipse? Therefore if the border thickness adds to its width, we have to offset this
twice - one time for each side that will be affected.
function setwidth(varid)
{
$("#"+varid).width($("#rng_width_"+varid).val());
if (varid=="egg")
{
var marginleft=($("#egg_wrapper").width()-$("#egg").width())/2;
$("#egg").css("margin-left", marginleft+"px");
}
if (varid=="rainbow_wrapper")
{
$("#rainbow_wrapper").css("margin-left","-"+(($("#rainbow_wrapper").width()-$("#egg").width())/2)+"px");
$(".rainbowband").width($("#rng_width_"+varid).val()-($("#hid_thickness_rainbow").val()*2));
}
}
Next, we modify the
setheight() function to cater for the
rainbow_wrapper div. Changing the height will affect the height of each rainbow band, which is set at
twice the height of the
rainbow_wrapper div.
function setheight(varid)
{
$("#"+varid).height($("#rng_height_"+varid).val());
if (varid=="egg")
{
var margintop=($("#egg_wrapper").height()-$("#egg").height())/2;
$("#egg").css("margin-top", margintop+"px");
}
if (varid=="rainbow_wrapper")
{
$(".rainbowband").height($("#rainbow_wrapper").height()*2);
}
}
The thickness is also affected - and it's set at 1/20th of the
rainbow_wrapper div's height.
if (varid=="rainbow_wrapper")
{
$(".rainbowband").height($("#rainbow_wrapper").height()*2);
$("#hid_thickness_rainbow").val($("#rainbow_wrapper").height()/20);
$(".rainbowband").each(function()
{
$(this).css("border-width", $("#hid_thickness_rainbow").val()+"px");
});
}
And after that, each rainbow band's
margin-top property needs to be set so that they align on top of each other neatly, taking the border thickness of each rainbow band into account.
if (varid=="rainbow_wrapper")
{
$(".rainbowband").height($("#rainbow_wrapper").height()*2);
$("#hid_thickness_rainbow").val($("#rainbow_wrapper").height()/20);
$(".rainbowband").each(function()
{
$(this).get(0).style.borderWidth=$("#hid_thickness_rainbow").val()+"px";
});
$("#rainbowband1").css("margin-top", "0px";
$("#rainbowband2").css("margin-top", $("#hid_thickness_rainbow").val()+"px");
$("#rainbowband3").css("margin-top", ($("#hid_thickness_rainbow").val()*2)+"px");
$("#rainbowband4").css("margin-top", ($("#hid_thickness_rainbow").val()*3)+"px");
$("#rainbowband5").css("margin-top", ($("#hid_thickness_rainbow").val()*4)+"px");
$("#rainbowband6").css("margin-top", ($("#hid_thickness_rainbow").val()*5)+"px");
$("#rainbowband7").css("margin-top", ($("#hid_thickness_rainbow").val()*6)+"px");
}
And of course, since all this has been changed, we'll need to run the
setwidth() function to properly align the entire
rainbow_wrapper div.
if (varid=="rainbow_wrapper")
{
$(".rainbowband").height($("#rainbow_wrapper").height()*2);
$("#hid_thickness_rainbow").val($("#rainbow_wrapper").height()/20);
$(".rainbowband").each(function()
{
$(this).get(0).style.borderWidth=$("#hid_thickness_rainbow").val()+"px";
});
$("#rainbowband1").css("margin-top", "0px";
$("#rainbowband2").css("margin-top", $("#hid_thickness_rainbow").val()+"px");
$("#rainbowband3").css("margin-top", ($("#hid_thickness_rainbow").val()*2)+"px");
$("#rainbowband4").css("margin-top", ($("#hid_thickness_rainbow").val()*3)+"px");
$("#rainbowband5").css("margin-top", ($("#hid_thickness_rainbow").val()*4)+"px");
$("#rainbowband6").css("margin-top", ($("#hid_thickness_rainbow").val()*5)+"px");
$("#rainbowband7").css("margin-top", ($("#hid_thickness_rainbow").val()*6)+"px");
setwidth("rainbow_wrapper");
}
Finally, the
setvisible() function needs to be tweaked.
function setvisible(varid)
{
if ($("#cb_"+varid).prop("checked"))
{
$("#"+varid).show();
if (varid.indexOf("band")==0)
{
setcolor(varid);
setheight(varid);
setrotation(varid);
sety(varid);
setz(varid);
}
if (varid.indexOf("polkadot")==0)
{
setcolor(varid);
setheight(varid);
setwidth(varid);
setx(varid);
sety(varid);
setz(varid);
}
if (varid.indexOf("star")==0)
{
setstar(varid.replace("_wrapper",""));
setx(varid);
sety(varid);
setz(varid);
}
if (varid=="rainbow_wrapper")
{
setheight("rainbow_wrapper");
setrotation("rainbow_wrapper");
sety("rainbow_wrapper");
setz("rainbow_wrapper");
}
}
else
{
$("#"+varid).hide();
}
}
Modify as shown to hide the controls initially.
#pnlBands,#pnlPolkadots,#pnlStars,#pnlRainbow{display:none;}
Let's take a look at what we have so far. Try the controls. Do they work?
Well, we've added bands, dots, stars and a rainbow. Give yourself a pat on the back; that was an insane amount of work on a text editor! If you set the
overflow property of the
egg div to
hidden, you should see the full effects now.
#egg
{
width:250px;
height:350px;
border:1px solid #888888;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
overflow:hidden;
position:absolute;
z-index:10;
}
Now
when you add the bands, polkadots, stars and rainbow, they no longer
stick out of the egg! You'll also see that when you start expanding all
the panels in the
dashboard div, the screen expands but the egg stays in
one place. That's because of the
position propety of the
egg_wrapper
div, which was set to
fixed.
Next
Some final touches, a fix or two. Watch this space!
