.ani-box {height: 500px; width: 100%;}
#size {
transform: scale(0.6);
margin-top: -270px;
position: relative;
width: 100%;
height: 800px;
}
@media screen and (max-width: 760px) {
#size {transform: scale(0.5);}
}
@media screen and (max-width: 540px) {
#size {transform: scale(0.3);}
}
@media screen and (max-width: 320px) {
#size {transform: scale(0.2);}
}
/* ======== The Bowl ======= */
.bowl {
width: 610px;
height: 205px;
left: 50%;
top: 50%;
margin-left: -305px;
margin-top: 30px;
position: absolute;
box-sizing: content-box;
}
/* ===== The Outside of the Bowl ===== */
#bowl-out {
height: 200px;
width: 600px;
border-radius: 0 0 400px 400px;
background: #996633;
position: absolute;
margin-top:0px;
margin-left: 0px;
border: 5px solid #333333;
box-shadow: 0 5px 50px 12px #999999;
box-sizing: content-box;
background: #996633;
background: -moz-linear-gradient(top, #996633 0%, #994900 0%, #994900 13%, #996633 25%, #994900 38%, #996633 51%, #994900 64%, #996633 76%, #994900 92%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#996633), color-stop(0%,#994900), color-stop(13%,#994900), color-stop(25%,#996633), color-stop(38%,#994900), color-stop(51%,#996633), color-stop(64%,#994900), color-stop(76%,#996633), color-stop(92%,#994900));
background: -webkit-linear-gradient(top, #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%);
background: -o-linear-gradient(top, #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%);
background: -ms-linear-gradient(top, #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%);
background: linear-gradient(to bottom, #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#996633', endColorstr='#994900',GradientType=0 );
}
/* ===== The IN-side or Top of the Bowl ===== */
#bowl-in {
width: 586px;
height: 200px;
position: absolute;
margin-top: -110px;
margin-left: 0px;
border: 10px solid #888888;
border-radius: 50%;
transform: rotateX(75deg);
background-color: #795128;
box-shadow:0 0px 5px 10px #333333 inset, 0 0 5px 2px #333333;
box-sizing: content-box;
background: #996633;
background: -moz-linear-gradient(top, #996633 0%, #823e00 0%, #754212 45%, #754212 50%, #754212 55%, #823e00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#996633), color-stop(0%,#823e00), color-stop(45%,#754212), color-stop(50%,#754212), color-stop(55%,#754212), color-stop(100%,#823e00));
background: -webkit-linear-gradient(top, #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%);
background: -o-linear-gradient(top, #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%);
background: -ms-linear-gradient(top, #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%);
background: linear-gradient(to bottom, #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#996633', endColorstr='#823e00',GradientType=0 );
}
/* =========================================== The Orange ============================================================= */
.orange {
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -275px;
width: 226px;
height: 240px;
position: absolute;
z-index: 0;
transform: scale(0.7);
-moz-transform: scale(0.7);
-webkit-transform:scale(0.7);
-o-transform: scale(0.7);
-ms-transform: scale(0.7);
}
/* === Orange shaded Outline === */
.orange2 {
margin: 40px 0 0px -37px;
position: absolute;
width: 251px;
height: 233px;
z-index: 1;
}
.side1b, .side2b {
width: 160px;
height: 235px;
position: absolute;
background-color: #D35100;
top: -35px;
}
/* === Orange === */
.orange1 {
margin: 40px 0px 0px -41px;
position: relative;
width: 248px;
height: 231px;
z-index: 3;
}
.side1, .side2 {
top: -30px;
width: 150px;
height: 225px;
position: absolute;
background-color:#FF6A00;
background-image:radial-gradient(#FF893A 9px, transparent 11px), repeating-radial-gradient(#FF893A 0, #FF893A 4px, transparent 5px, transparent 5px, #FF893A 15px, #FF893A 15px, transparent 5px, transparent 5px);
background-size: 16px 16px, 20px 20px;
background-position: 50px 50px;
}
.side1 {
background-color:#FF6A00;
background-image:radial-gradient(#FF893A 9px, transparent 11px), repeating-radial-gradient(#FF893A 0, #FF893A 4px, transparent 5px, transparent 5px, #FF893A 15px, #FF893A 15px, transparent 5px, transparent 5px);
background-size: 16px 16px, 20px 20px;
background-position: 50px 50px;
}
/* === Basic Orange Shape === */
.side1, .side1b {
border-radius: 100% 70% 80% 100%;
left: 45px;
transform: rotate(-6deg);
}
.side2, .side2b {
border-radius: 70% 100% 100% 80%;
left: 100px;
transform: rotate(6deg);
}
#stem {
border-radius: 70px 0 0 0;
width: 70px;
height: 70px;
border: 10px solid #7a5230;
border-color: transparent transparent transparent #926239;
position: absolute;
top: -18px;
left: 115px;
z-index: 2;
}
/* ============================================= Banana ONE ================================================= */
.banana {
width: 460px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: 250px;
box-sizing: content-box;
transform: rotateX(180deg) scale(1.1);
}
.main {
border-style: hidden hidden solid hidden;
width: 450px;
height: 150px;
border-width: 80px;
border-radius: 0 0 150px 150px;
position: absolute;
background: transparent;
margin-left: -260px;
left: 250px;
top: 0px;
border-bottom-color: #FBFB00;
box-sizing: content-box;
}
/* === Shadow - adds an outline to the banana - as the main-body is made from "border" === */
.main-shadow {
border-style: hidden hidden solid hidden;
width: 440px;
height: 190px;
border-width: 83px;
border-radius: 0 0 140px 140px;
position: absolute;
background: transparent;
margin-left: -260px;
left: 255px;
top: -41px;
border-bottom-color: #C6C600;
box-sizing: content-box;
}
/* ===== Line appears different in Firefox ===== */
.lineb1, .lineb2 {
left: 6px;
top: 60px;
width: 420px;
height: 150px;
border-bottom-color: #EEEE00;
border-style: hidden hidden solid hidden;
border-width: 0px 0px 4px 0px;
border-radius: 0 0 50% 50%;
z-index: 5;
position: absolute;
}
.lineb2 {
left: 25px;
top: 15px;
width: 380px;
height: 150px;
border-radius: 0 0 30% 30%;
}
/* === Left end used to cover up the pointy part of the 'Main' body and give end Color === */
.left-end {
width: 36px;
height: 80px;
background: #FFFFFF;
position: absolute;
top: 62px;
left: -30px;
box-shadow: 0px 15px 6px -5px #70424e;
transform: rotatez(-40deg);
}
/* === Stem used to cover up the pointy part of the 'Main' body and make the stem === */
.banana-stem {
width: 28px;
height: 60px;
background: #4f4c35;
position: absolute;
top: 82px;
left: 420px;
border-radius: 30% 40% 0 0;
background: -moz-linear-gradient(top, #4f4c35 0%, #69844b 44%, #fbfb00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f4c35), color-stop(44%,#69844b), color-stop(100%,#fbfb00));
background: -webkit-linear-gradient(top, #4f4c35 0%,#69844b 44%,#fbfb00 100%);
background: -o-linear-gradient(top, #4f4c35 0%,#69844b 44%,#fbfb00 100%);
background: -ms-linear-gradient(top, #4f4c35 0%,#69844b 44%,#fbfb00 100%);
background: linear-gradient(to bottom, #4f4c35 0%,#69844b 44%,#fbfb00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4c35', endColorstr='#fbfb00',GradientType=0 );
transform: rotatez(40deg);
}
/* ============================================ The PEAR ============================================================= */
.pear {
width: 174px;
height: 207px;
left: 50%;
top: 50%;
margin-left: 0px;
margin-top: -225px;
position: absolute;
transform: rotateZ(5deg) scale(0.8);
}
.pear-up {
width: 140px;
height: 136px;
border-radius: 70% 70% 30% 30% / 100% 100% 20% 20%;
position: absolute;
margin-top: 0px;
margin-left: 15px;
background: #d1d642;
background: -moz-linear-gradient(left, #d1d642 1%, #c0c52b 50%, #c0c52b 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#d1d642), color-stop(50%,#c0c52b), color-stop(100%,#c0c52b));
background: -webkit-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%);
background: -o-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%);
background: -ms-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%);
background: linear-gradient(to right, #d1d642 1%,#c0c52b 50%,#c0c52b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d642', endColorstr='#c0c52b',GradientType=1 );
}
.pear-down {
border: 1px solid #969696;
width: 170px;
height: 136px;
border-radius: 50% 50% 60% 60% / 70% 70% 60% 60% ;
position: absolute;
margin-top: 68px;
margin-left: 1px;
background: #d1d642;
background: -moz-linear-gradient(left, #d1d642 1%, #c0c52b 50%, #c0c52b 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#d1d642), color-stop(50%,#c0c52b), color-stop(100%,#c0c52b));
background: -webkit-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%);
background: -o-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%);
background: -ms-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%);
background: linear-gradient(to right, #d1d642 1%,#c0c52b 50%,#c0c52b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d642', endColorstr='#c0c52b',GradientType=1 );
}
#pear-stem {
border-radius: 0 50px 0 0;
width: 70px;
height: 70px;
border: 10px solid #7a5230;
border-color: transparent transparent transparent #926239;
position: absolute;
top: -35px;
left: 78px;
}
/* ========================================= The Green Apple =============================================== */
.green-apple {
left: 50%;
top: 50%;
margin-left: -550px;
margin-top: -200px;
width: 255px;
height: 280px;
position: absolute;
transform: rotateY(180deg) scale(0.8);
}
/* === Apple for Shaded Right Side Outline === */
.green-apple2 {
margin: 80px 0 0px -33px;
position: absolute;
width: 251px;
height: 233px;
z-index: 1;
}
.green-applel2, .green-appler2 {
width: 160px;
height: 235px;
position: absolute;
background-color: #618E33;
top: -35px;
}
/* === Green Apple === */
.green-apple1 {
margin: 80px 0px 0px -37px;
position: relative;
width: 248px;
height: 231px;
z-index: 3;
}
.green-applel, .green-appler {
width: 150px;
height: 225px;
position: absolute;
background: linear-gradient(to right, #629632 0%,#629632 100%);
top: -30px;
}
.green-applel {
background: linear-gradient(to right, #61c419 0%,#629632 42%,#629632 94%);
}
/* === Basic Shape of Green Apple and Shaded Right Side === */
.green-applel, .green-applel2 {
border-radius: 100% 70% 80% 100%;
left: 45px;
transform: rotate(-16deg);
}
.green-appler, .green-appler2 {
border-radius: 70% 100% 100% 80%;
left: 120px;
transform: rotate(16deg);
}
#green-apple-stem {
border-radius: 25px 0 0 0;
width: 70px;
height: 70px;
border: 10px solid #7a5230;
border-color: transparent transparent transparent #926239;
position: absolute;
top: 10px;
left: 115px;
z-index: 2;
}
/* ======== Peach ======== */
.peach {
left: 50%;
top: 50%;
margin-left: 300px;
margin-top: 100px;
width: 255px;
height: 280px;
position: absolute;
}
/* === Right side darker Shaded Outline === */
.peach2 {
margin: 80px 0 0px -33px;
position: absolute;
width: 251px;
height: 233px;
z-index: 1;
}
.peach2l, .peach2r {
width: 160px;
height: 235px;
position: absolute;
background-color: #7F1D25;
top: -35px;
}
/* === Peach === */
.peach1 {
margin: 80px 0px 0px -37px;
position: relative;
width: 248px;
height: 231px;
z-index: 3;
}
.peach1l, .peach1r {
width: 150px;
height: 225px;
position: absolute;
background: #a90329;
background: -moz-radial-gradient(center, ellipse cover, #a90329 0%, #eade00 0%, #a90329 66%, #7f1d23 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a90329), color-stop(0%,#eade00), color-stop(66%,#a90329), color-stop(100%,#7f1d23));
background: -webkit-radial-gradient(center, ellipse cover, #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%);
background: -o-radial-gradient(center, ellipse cover, #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%);
background: -ms-radial-gradient(center, ellipse cover, #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%);
background: radial-gradient(ellipse at center, #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#7f1d23',GradientType=1 );
top: -30px;
}
.peach1l {
background: #a90329;
background: -moz-linear-gradient(left, #a90329 0%, #f9f100 0%, #a90329 37%, #7f1d23 87%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(0%,#f9f100), color-stop(37%,#a90329), color-stop(87%,#7f1d23));
background: -webkit-linear-gradient(left, #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%);
background: -o-linear-gradient(left, #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%);
background: -ms-linear-gradient(left, #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%);
background: linear-gradient(to right, #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#7f1d23',GradientType=1 );
}
/* === Basic Shape of Peach & Outline === */
.peach1l, .peach2l {
border-radius: 100% 70% 80% 100%;
left: 45px;
transform: rotate(-6deg);
}
.peach1r, .peach2r {
border-radius: 70% 100% 100% 80%;
left: 120px;
transform: rotate(6deg);
}
#peach-stem {
border-radius: 70px 0 0 0;
width: 70px;
height: 70px;
border: 10px solid #7a5230;
border-color: transparent transparent transparent #926239;
position: absolute;
top: 8px;
left: 115px;
z-index: 2;
}
/* ====== The RED Apple ====== */
.apple {
left: 50%;
top: 50%;
margin-left: -550px;
margin-top: 100px;
width: 255px;
height: 280px;
position: absolute;
}
/* === Shaded Border Outline === */
.apple2 {
margin: 80px 0 0px -33px;
position: absolute;
width: 251px;
height: 233px;
z-index: 1;
}
.apple2l, .apple2r {
width: 160px;
height: 235px;
position: absolute;
background-color: #70191E;
top: -35px;
}
/* === RED Apple === */
.apple1 {
margin: 80px 0px 0px -37px;
position: relative;
width: 248px;
height: 231px;
z-index: 3;
}
.apple1l, .apple1r {
width: 150px;
height: 225px;
position: absolute;
background: #a90329;
background: -moz-linear-gradient(left, #a90329 82%, #7f1d23 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(82%,#a90329), color-stop(100%,#7f1d23));
background: -webkit-linear-gradient(left, #a90329 82%,#7f1d23 100%);
background: -o-linear-gradient(left, #a90329 82%,#7f1d23 100%);
background: -ms-linear-gradient(left, #a90329 82%,#7f1d23 100%);
background: linear-gradient(to right, #a90329 82%,#7f1d23 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#7f1d23',GradientType=1 );
top: -30px;
}
.apple1l {
background: #7f1d23;
background: -moz-linear-gradient(left, #7f1d23 0%, #a90329 43%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7f1d23), color-stop(43%,#a90329));
background: -webkit-linear-gradient(left, #7f1d23 0%,#a90329 43%);
background: -o-linear-gradient(left, #7f1d23 0%,#a90329 43%);
background: -ms-linear-gradient(left, #7f1d23 0%,#a90329 43%);
background: linear-gradient(to right, #7f1d23 0%,#a90329 43%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f1d23', endColorstr='#a90329',GradientType=1 );
}
/* === Basic Shape of apple & shade outline === */
.apple1l, .apple2l {
border-radius: 100% 70% 80% 100%;
left: 45px;
transform: rotate(-16deg);
}
.apple1r, .apple2r {
border-radius: 70% 100% 100% 80%;
left: 120px;
transform: rotate(16deg);
}
#apple-stem {
border-radius: 70px 0 0 0;
width: 70px;
height: 70px;
border: 10px solid #7a5230;
border-color: transparent transparent transparent #926239;
position: absolute;
top: -18px;
left: 115px;
z-index: 2;
box-sizing: content-box;
}
/* ====== Banana 2 - The Circle Method ======= */
.banana2 {
position: absolute;
width: 420px;
height: 264px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: 200px;
overflow: hidden;
transform: rotateZ(45deg) scale(0.8);
}
.part1, .part2 {
width: 400px;
height: 400px;
border-radius: 50% 50% 60% 60% ;
position: absolute;
top: 50%;
left: 50%;
border-style: hidden hidden solid hidden;
border-width: 0px 0px 0.1em 0px;
border-color: #FFFFFF #FFFFFF #999999 #FFFFFF;
}
/* ========= part 1 is the body of the banana - created by hiding the top area with part 2 ========== */
.part1 {
margin-top: -270px;
margin-left: -200px;
background-color: #FFFF00;
box-shadow: 0 0 70px 1px #D1CA06 inset;
}
/* ========= Part 2 hides most of part1 to create a curved banana body ========== */
.part2 {
background-color: #FFFFFF; /* +++++ CHANGE TO BACKGROUND COLOR +++++ */
margin-top: -360px;
margin-left: -200px;
}
/* ===== Left end created to hide pointy end of body and add color to End ===== */
.left-end2 {
top: 129px;
left: -24px;
width: 37px;
height: 80px;
background: #FFFFFF; /* +++++ CHANGE TO BACKGROUND COLOR +++++ */
position: absolute;
margin-top: -140px;
margin-left: 10px;
box-shadow: 0px 15px 6px -5px #70424e;
transform: rotatez(-21deg);
}
/* ========= obvious part - also hides the pointy right end ========== */
.banana2-stem {
width: 28px;
height: 75px;
background: linear-gradient(to bottom, #4f4c35 0%,#69844b 44%,#fbfb00 100%);
position: absolute;
top: 145px;
left: 390px;
margin-top: -140px;
border-radius: 30% 40% 0 0;
transform: rotatez(14deg);
}
/* ========= Adds dimensions and that little edge in a banana ========== */
.line {
margin-top: -320px;
margin-left: -200px;
width: 400px;
height: 400px;
border-radius: 50% 50% 60% 60% ;
position: absolute;
top: 50%;
left: 50%;
border-style: hidden hidden solid hidden;
border-width: 0px 0px 1px 0px;
border-color: #FFFFFF #FFFFFF #999999 #FFFFFF;
}
Bowl of Fruit made with Pure CSS
]]>