{"id":110,"date":"2018-02-18T20:42:07","date_gmt":"2018-02-18T20:42:07","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=110"},"modified":"2019-02-18T23:20:01","modified_gmt":"2019-02-18T23:20:01","slug":"css-fruit","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-fruit\/","title":{"rendered":"Bowl of Fruit with Pure CSS"},"content":{"rendered":"<style>\n.ani-box {height: 500px; width: 100%;}\n#size {\n\ttransform: scale(0.6);\n\tmargin-top: -270px;\n\tposition: relative;\n\twidth: 100%;\n\theight: 800px;\n}\n@media screen and (max-width: 760px) {\n    #size {transform: scale(0.5);}\n}\n@media screen and (max-width: 540px) {\n    #size {transform: scale(0.3);}\n}\n@media screen and (max-width: 320px) {\n    #size {transform: scale(0.2);}\n}\n\/* ======== The Bowl ======= *\/\n.bowl {\n\twidth: 610px;\n\theight: 205px;\n\tleft: 50%;\n\ttop: 50%;\n\tmargin-left: -305px;\n\tmargin-top: 30px;\n\tposition: absolute;\nbox-sizing: content-box;\n}\n\/* ===== The Outside of the Bowl ===== *\/\n#bowl-out {\n\theight: 200px;\n\twidth: 600px;\n\tborder-radius: 0 0 400px 400px;\n\tbackground: #996633;\n\tposition: absolute;\n\tmargin-top:0px;\n\tmargin-left: 0px;\n\tborder: 5px solid #333333;\n\tbox-shadow: 0 5px 50px 12px #999999;\nbox-sizing: content-box;\n\tbackground: #996633; \n\tbackground: -moz-linear-gradient(top,  #996633 0%, #994900 0%, #994900 13%, #996633 25%, #994900 38%, #996633 51%, #994900 64%, #996633 76%, #994900 92%);\n\tbackground: -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));\n\tbackground: -webkit-linear-gradient(top,  #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%); \n\tbackground: -o-linear-gradient(top,  #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%); \n\tbackground: -ms-linear-gradient(top,  #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%); \n\tbackground: linear-gradient(to bottom,  #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#996633', endColorstr='#994900',GradientType=0 );\n}\n\/* ===== The IN-side or Top of the Bowl ===== *\/\n#bowl-in {\n\twidth: 586px;\n\theight: 200px;\n\tposition: absolute;\n\tmargin-top: -110px;\n\tmargin-left: 0px;\n\tborder: 10px solid #888888;\n\tborder-radius: 50%;\n\ttransform: rotateX(75deg);\n\tbackground-color: #795128;\n\tbox-shadow:0 0px 5px 10px #333333 inset, 0 0 5px 2px #333333;\nbox-sizing: content-box;\n\tbackground: #996633;\n\tbackground: -moz-linear-gradient(top,  #996633 0%, #823e00 0%, #754212 45%, #754212 50%, #754212 55%, #823e00 100%);\n\tbackground: -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)); \n\tbackground: -webkit-linear-gradient(top,  #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%);\n\tbackground: -o-linear-gradient(top,  #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%);\n\tbackground: -ms-linear-gradient(top,  #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%); \n\tbackground: linear-gradient(to bottom,  #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#996633', endColorstr='#823e00',GradientType=0 );\n}\n\/* =========================================== The Orange  ============================================================= *\/\n.orange  {\n\tleft: 50%;\n\ttop: 50%;\n\tmargin-left: -300px;\n\tmargin-top: -275px;\n\twidth: 226px;\n\theight: 240px;\n\tposition: absolute;\n\tz-index: 0;\n\ttransform:        scale(0.7);\n\t-moz-transform:   scale(0.7);\n\t-webkit-transform:scale(0.7);\n\t-o-transform:     scale(0.7);\n\t-ms-transform:    scale(0.7);\n}\n\/* === Orange shaded Outline  === *\/\n.orange2 {\n\tmargin: 40px 0 0px -37px;\n\tposition: absolute;\n\twidth: 251px;\n\theight: 233px;\n\tz-index: 1;\n}\n.side1b, .side2b {\n\twidth: 160px;\n\theight: 235px;\n\tposition: absolute;\n\tbackground-color: #D35100;\n\ttop: -35px;\n}\n\/* === Orange === *\/\n.orange1 {\n\tmargin: 40px 0px 0px -41px;\n\tposition: relative;\n\twidth: 248px;\n\theight: 231px;\n\tz-index: 3;\n}\n.side1, .side2 {\n\ttop: -30px;\n\twidth: 150px;\n\theight: 225px;\n\tposition: absolute;\n\tbackground-color:#FF6A00;\n\tbackground-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);    \n\tbackground-size: 16px 16px, 20px 20px; \n\tbackground-position: 50px 50px;\t\n}\n.side1 {\n\tbackground-color:#FF6A00;\n\tbackground-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);    \n\tbackground-size: 16px 16px, 20px 20px; \n\tbackground-position: 50px 50px;\t\n}\n\/* === Basic Orange Shape  === *\/\n.side1, .side1b {\n\tborder-radius: 100% 70% 80% 100%;\n\tleft: 45px;\n\ttransform: rotate(-6deg);\n}\n.side2, .side2b {\n\tborder-radius: 70% 100% 100% 80%;\n\tleft: 100px;\n\ttransform: rotate(6deg);\n}\n#stem {\n\tborder-radius: 70px 0 0 0;\n\twidth: 70px;\n\theight: 70px;\n\tborder: 10px solid #7a5230;\n\tborder-color: transparent transparent transparent #926239;\n\tposition: absolute;\n\ttop: -18px;\n\tleft: 115px;\n\tz-index: 2;\n}\n\/*  =============================================  Banana ONE ================================================= *\/\n.banana {\n\twidth: 460px;\n\theight: 300px;\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 50%;\n\tmargin-left: -200px;\n\tmargin-top: 250px;\nbox-sizing: content-box;\n\ttransform: rotateX(180deg) scale(1.1);\n}\n.main {\n\tborder-style: hidden hidden solid hidden;\n\twidth: 450px;\n\theight: 150px;\n\tborder-width: 80px;\n\tborder-radius: 0 0 150px 150px;\n\tposition: absolute;\n\tbackground: transparent;\n\tmargin-left: -260px;\n\tleft: 250px;\n\ttop: 0px;\n\tborder-bottom-color: #FBFB00;\nbox-sizing: content-box;\n}\n\/*  === Shadow - adds an outline to the banana - as the main-body is made from \"border\" === *\/\n.main-shadow  {\n\tborder-style: hidden hidden solid hidden;\n\twidth: 440px;\n\theight: 190px;\n\tborder-width: 83px;\n\tborder-radius: 0 0 140px 140px;\n\tposition: absolute;\n\tbackground: transparent;\n\tmargin-left: -260px;\n\tleft: 255px;\n\ttop: -41px;\n\tborder-bottom-color: #C6C600;\nbox-sizing: content-box;\n}\n\/*  ===== Line appears different in  Firefox  ===== *\/\n.lineb1, .lineb2 {\n\tleft: 6px;\n\ttop: 60px;\n\twidth: 420px;\n\theight: 150px;\n\tborder-bottom-color: #EEEE00;\n\tborder-style: hidden hidden solid hidden;\n\tborder-width: 0px 0px 4px 0px;\n\tborder-radius: 0 0 50% 50%;\n\tz-index: 5;\n\tposition: absolute;\n}\n.lineb2 {\n\tleft: 25px;\n\ttop: 15px;\n\twidth: 380px;\n\theight: 150px;\n\tborder-radius: 0 0 30% 30%;\n}\t\n\/*  === Left end used to cover up the pointy part of the 'Main' body and give end Color === *\/\n.left-end {\n\twidth: 36px;\n\theight: 80px;\n\tbackground: #FFFFFF;\n\tposition: absolute;\n\ttop: 62px;\n\tleft: -30px;\n\tbox-shadow: 0px 15px 6px -5px #70424e;\n\ttransform: rotatez(-40deg);\n}\n\/*  === Stem used to cover up the pointy part of the 'Main' body and make the stem === *\/\n.banana-stem {\n\twidth: 28px;\n\theight: 60px;\n\tbackground: #4f4c35;\n\tposition: absolute;\n\ttop: 82px;\n\tleft: 420px;\n\tborder-radius: 30% 40% 0 0;\n\tbackground: -moz-linear-gradient(top,  #4f4c35 0%, #69844b 44%, #fbfb00 100%); \n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f4c35), color-stop(44%,#69844b), color-stop(100%,#fbfb00)); \n\tbackground: -webkit-linear-gradient(top,  #4f4c35 0%,#69844b 44%,#fbfb00 100%); \n\tbackground: -o-linear-gradient(top,  #4f4c35 0%,#69844b 44%,#fbfb00 100%);\n\tbackground: -ms-linear-gradient(top,  #4f4c35 0%,#69844b 44%,#fbfb00 100%); \n\tbackground: linear-gradient(to bottom,  #4f4c35 0%,#69844b 44%,#fbfb00 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4c35', endColorstr='#fbfb00',GradientType=0 ); \n\ttransform:        rotatez(40deg);\n}\n\/*  ============================================ The PEAR ============================================================= *\/\n.pear {\n\twidth: 174px;\n\theight: 207px;\n\tleft: 50%;\n\ttop: 50%;\n\tmargin-left: 0px;\n\tmargin-top: -225px;\n\tposition: absolute;\n\ttransform: rotateZ(5deg) scale(0.8);\n}\n.pear-up {\n\twidth: 140px;\n\theight: 136px;\n\tborder-radius: 70% 70% 30% 30% \/ 100% 100% 20% 20%;\n\tposition: absolute;\n\tmargin-top: 0px;\n\tmargin-left: 15px;\n\tbackground: #d1d642; \n\tbackground: -moz-linear-gradient(left,  #d1d642 1%, #c0c52b 50%, #c0c52b 100%); \n\tbackground: -webkit-gradient(linear, left top, right top, color-stop(1%,#d1d642), color-stop(50%,#c0c52b), color-stop(100%,#c0c52b));\n\tbackground: -webkit-linear-gradient(left,  #d1d642 1%,#c0c52b 50%,#c0c52b 100%); \n\tbackground: -o-linear-gradient(left,  #d1d642 1%,#c0c52b 50%,#c0c52b 100%); \n\tbackground: -ms-linear-gradient(left,  #d1d642 1%,#c0c52b 50%,#c0c52b 100%); \n\tbackground: linear-gradient(to right,  #d1d642 1%,#c0c52b 50%,#c0c52b 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d642', endColorstr='#c0c52b',GradientType=1 );\n}\n.pear-down {\n\tborder: 1px solid #969696;\n\twidth: 170px;\n\theight: 136px;\n\tborder-radius: 50% 50% 60% 60% \/ 70% 70% 60% 60% ;\n\tposition: absolute;\n\tmargin-top: 68px;\n\tmargin-left: 1px;\n\tbackground: #d1d642; \n\tbackground: -moz-linear-gradient(left,  #d1d642 1%, #c0c52b 50%, #c0c52b 100%); \n\tbackground: -webkit-gradient(linear, left top, right top, color-stop(1%,#d1d642), color-stop(50%,#c0c52b), color-stop(100%,#c0c52b)); \n\tbackground: -webkit-linear-gradient(left,  #d1d642 1%,#c0c52b 50%,#c0c52b 100%); \n\tbackground: -o-linear-gradient(left,  #d1d642 1%,#c0c52b 50%,#c0c52b 100%); \n\tbackground: -ms-linear-gradient(left,  #d1d642 1%,#c0c52b 50%,#c0c52b 100%); \n\tbackground: linear-gradient(to right,  #d1d642 1%,#c0c52b 50%,#c0c52b 100%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d642', endColorstr='#c0c52b',GradientType=1 );\n}\n#pear-stem {\n\tborder-radius: 0 50px 0 0;\n\twidth: 70px;\n\theight: 70px;\n\tborder: 10px solid #7a5230;\n\tborder-color: transparent transparent transparent #926239;\n\tposition: absolute;\n\ttop: -35px;\n\tleft: 78px;\n}\n\/*  ========================================= The Green Apple =============================================== *\/\n.green-apple  {\n\tleft: 50%;\n\ttop: 50%;\n\tmargin-left: -550px;\n\tmargin-top: -200px;\n\twidth: 255px;\n\theight: 280px;\n\tposition: absolute;\n\ttransform: rotateY(180deg) scale(0.8);\n}\n\/* === Apple for Shaded Right Side Outline  === *\/\n.green-apple2 {\n\tmargin: 80px 0 0px -33px;\n\tposition: absolute;\n\twidth: 251px;\n\theight: 233px;\n\tz-index: 1;\n}\n.green-applel2, .green-appler2 {\n\twidth: 160px;\n\theight: 235px;\n\tposition: absolute;\n\tbackground-color: #618E33;\n\ttop: -35px;\n}\n\/* === Green Apple === *\/\n.green-apple1 {\n\tmargin: 80px 0px 0px -37px;\n\tposition: relative;\n\twidth: 248px;\n\theight: 231px;\n\tz-index: 3;\n}\n.green-applel, .green-appler {\n\twidth: 150px;\n\theight: 225px;\n\tposition: absolute;\n\tbackground: linear-gradient(to right, #629632 0%,#629632 100%);\n\ttop: -30px;\n}\n.green-applel {\n\tbackground: linear-gradient(to right, #61c419 0%,#629632 42%,#629632 94%);\t\n}\n\/* === Basic Shape of Green Apple and Shaded Right Side  === *\/\n.green-applel, .green-applel2 {\n\tborder-radius: 100% 70% 80% 100%;\n\tleft: 45px;\n\ttransform: rotate(-16deg);\n}\n.green-appler, .green-appler2 {\n\tborder-radius: 70% 100% 100% 80%;\n\tleft: 120px;\n\ttransform: rotate(16deg);\n}\n#green-apple-stem {\n\tborder-radius: 25px 0 0 0;\n\twidth: 70px;\n\theight: 70px;\n\tborder: 10px solid #7a5230;\n\tborder-color: transparent transparent transparent #926239;\n\tposition: absolute;\n\ttop: 10px;\n\tleft: 115px;\n\tz-index: 2;\n}\n\/* ======== Peach ======== *\/\n.peach  {\n\tleft: 50%;\n\ttop: 50%;\n\tmargin-left: 300px;\n\tmargin-top: 100px;\n\twidth: 255px;\n\theight: 280px;\n\tposition: absolute;\n}\n\/* === Right side darker Shaded Outline  === *\/\n.peach2 {\n\tmargin: 80px 0 0px -33px;\n\tposition: absolute;\n\twidth: 251px;\n\theight: 233px;\n\tz-index: 1;\n}\n.peach2l, .peach2r {\n\twidth: 160px;\n\theight: 235px;\n\tposition: absolute;\n\tbackground-color: #7F1D25;\n\ttop: -35px;\n}\n\/* === Peach === *\/\n.peach1 {\n\tmargin: 80px 0px 0px -37px;\n\tposition: relative;\n\twidth: 248px;\n\theight: 231px;\n\tz-index: 3;\n}\n.peach1l, .peach1r {\n\twidth: 150px;\n\theight: 225px;\n\tposition: absolute;\n\tbackground: #a90329; \n\tbackground: -moz-radial-gradient(center, ellipse cover,  #a90329 0%, #eade00 0%, #a90329 66%, #7f1d23 100%);\n\tbackground: -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)); \n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%);\n\tbackground: -o-radial-gradient(center, ellipse cover,  #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%);\n\tbackground: -ms-radial-gradient(center, ellipse cover,  #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%); \n\tbackground: radial-gradient(ellipse at center,  #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#7f1d23',GradientType=1 );\n\ttop: -30px;\n}\n.peach1l {\t\n\tbackground: #a90329;\n\tbackground: -moz-linear-gradient(left,  #a90329 0%, #f9f100 0%, #a90329 37%, #7f1d23 87%);\n\tbackground: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(0%,#f9f100), color-stop(37%,#a90329), color-stop(87%,#7f1d23)); \n\tbackground: -webkit-linear-gradient(left,  #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%); \n\tbackground: -o-linear-gradient(left,  #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%);\n\tbackground: -ms-linear-gradient(left,  #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%); \n\tbackground: linear-gradient(to right,  #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#7f1d23',GradientType=1 );\n}\n\/* === Basic Shape of Peach & Outline  === *\/\n.peach1l, .peach2l {\n\tborder-radius: 100% 70% 80% 100%;\n\tleft: 45px;\n\ttransform: rotate(-6deg);\n}\n.peach1r, .peach2r {\n\tborder-radius: 70% 100% 100% 80%;\n\tleft: 120px;\n\ttransform: rotate(6deg);\n}\n#peach-stem {\n\tborder-radius: 70px 0 0 0;\n\twidth: 70px;\n\theight: 70px;\n\tborder: 10px solid #7a5230;\n\tborder-color: transparent transparent transparent #926239;\n\tposition: absolute;\n\ttop: 8px;\n\tleft: 115px;\n\tz-index: 2;\n}\n\/* ====== The RED Apple  ====== *\/\n.apple  {\n\tleft: 50%;\n\ttop: 50%;\n\tmargin-left: -550px;\n\tmargin-top: 100px;\n\twidth: 255px;\n\theight: 280px;\n\tposition: absolute;\n}\n\/* === Shaded Border Outline  === *\/\n.apple2 {\n\tmargin: 80px 0 0px -33px;\n\tposition: absolute;\n\twidth: 251px;\n\theight: 233px;\n\tz-index: 1;\n}\n.apple2l, .apple2r {\n\twidth: 160px;\n\theight: 235px;\n\tposition: absolute;\n\tbackground-color: #70191E;\n\ttop: -35px;\n}\n\/* === RED Apple === *\/\n.apple1 {\n\tmargin: 80px 0px 0px -37px;\n\tposition: relative;\n\twidth: 248px;\n\theight: 231px;\n\tz-index: 3;\n}\n.apple1l, .apple1r {\n\twidth: 150px;\n\theight: 225px;\n\tposition: absolute;\n\tbackground: #a90329; \n\tbackground: -moz-linear-gradient(left,  #a90329 82%, #7f1d23 100%);\n\tbackground: -webkit-gradient(linear, left top, right top, color-stop(82%,#a90329), color-stop(100%,#7f1d23));\n\tbackground: -webkit-linear-gradient(left,  #a90329 82%,#7f1d23 100%); \n\tbackground: -o-linear-gradient(left,  #a90329 82%,#7f1d23 100%); \n\tbackground: -ms-linear-gradient(left,  #a90329 82%,#7f1d23 100%); \n\tbackground: linear-gradient(to right,  #a90329 82%,#7f1d23 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#7f1d23',GradientType=1 );\n\ttop: -30px;\n}\n.apple1l {\n\tbackground: #7f1d23;\n\tbackground: -moz-linear-gradient(left,  #7f1d23 0%, #a90329 43%);\n\tbackground: -webkit-gradient(linear, left top, right top, color-stop(0%,#7f1d23), color-stop(43%,#a90329));\n\tbackground: -webkit-linear-gradient(left,  #7f1d23 0%,#a90329 43%);\n\tbackground: -o-linear-gradient(left,  #7f1d23 0%,#a90329 43%); \n\tbackground: -ms-linear-gradient(left,  #7f1d23 0%,#a90329 43%); \n\tbackground: linear-gradient(to right,  #7f1d23 0%,#a90329 43%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f1d23', endColorstr='#a90329',GradientType=1 ); \n}\n\/* === Basic Shape of apple & shade outline  === *\/\n.apple1l, .apple2l {\n\tborder-radius: 100% 70% 80% 100%;\n\tleft: 45px;\n\ttransform: rotate(-16deg);\n}\n.apple1r, .apple2r {\n\tborder-radius: 70% 100% 100% 80%;\n\tleft: 120px;\n\ttransform: rotate(16deg);\n}\n#apple-stem {\n\tborder-radius: 70px 0 0 0;\n\twidth: 70px;\n\theight: 70px;\n\tborder: 10px solid #7a5230;\n\tborder-color: transparent transparent transparent #926239;\n\tposition: absolute;\n\ttop: -18px;\n\tleft: 115px;\n\tz-index: 2;\nbox-sizing: content-box;\n}\n\/* ====== Banana 2 - The Circle Method ======= *\/\n.banana2 {\n\tposition: absolute;\n\twidth: 420px;\n\theight: 264px;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -200px;\n\tmargin-left: 200px;\n\toverflow: hidden;\n\ttransform: rotateZ(45deg) scale(0.8);\n}\n.part1, .part2 {\n\twidth: 400px;\n\theight: 400px;\n\tborder-radius: 50% 50% 60% 60% ;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tborder-style: hidden hidden solid hidden;\n\tborder-width: 0px 0px 0.1em 0px;\n\tborder-color: #FFFFFF #FFFFFF #999999 #FFFFFF;\n}\n\/* ========= part 1 is the body of the banana - created by hiding the top area with part 2 ========== *\/\n.part1 {\n\tmargin-top: -270px;\n\tmargin-left: -200px;\n\tbackground-color: #FFFF00;\n\tbox-shadow: 0 0 70px 1px #D1CA06 inset;\n}\n\/* ========= Part 2 hides most of part1 to create a curved banana body ========== *\/\n.part2 {\n\tbackground-color: #FFFFFF; \/* +++++ CHANGE TO BACKGROUND COLOR  +++++ *\/\n\tmargin-top: -360px;\n\tmargin-left: -200px;\n}\n\/* ===== Left end created to hide pointy end of body and add color to End ===== *\/\n.left-end2 {\t\t\n\ttop: 129px;\n\tleft: -24px;\n\twidth: 37px;\n\theight: 80px;\n\tbackground: #FFFFFF;\t\/* +++++ CHANGE TO BACKGROUND COLOR  +++++ *\/\n\tposition: absolute;\n\tmargin-top: -140px;\n\tmargin-left: 10px;\n\tbox-shadow: 0px 15px 6px -5px #70424e;\n\ttransform: rotatez(-21deg);\n}\n\/* ========= obvious part - also hides the pointy right end  ========== *\/\n.banana2-stem {\n\twidth: 28px;\n\theight: 75px;\n\tbackground: linear-gradient(to bottom, #4f4c35 0%,#69844b 44%,#fbfb00 100%);\t\n\tposition: absolute;\n\ttop: 145px;\n\tleft: 390px;\n\tmargin-top: -140px;\n\tborder-radius: 30% 40% 0 0;\n\ttransform: rotatez(14deg);\n}\n\/* ========= Adds dimensions and that little edge in a banana ========== *\/\n.line {\n\tmargin-top: -320px;\n\tmargin-left: -200px;\n\twidth: 400px;\n\theight: 400px;\n\tborder-radius: 50% 50% 60% 60% ;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tborder-style: hidden hidden solid hidden;\n\tborder-width: 0px 0px 1px 0px;\n\tborder-color: #FFFFFF #FFFFFF #999999 #FFFFFF;\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"size\">\n<div class=\"bowl\">\n<div id=\"bowl-out\"><\/div>\n<div id=\"bowl-in\"><\/div>\n<\/p><\/div>\n<div class=\"orange\">\n<div class=\"orange2\"> <!-- Right-side darker shade --><\/p>\n<div class=\"side1b\"><\/div>\n<div class=\"side2b\"><\/div>\n<\/p><\/div>\n<div class=\"orange1\"><!-- Orange --><\/p>\n<div class=\"side1\"><\/div>\n<div class=\"side2\"><\/div>\n<\/p><\/div>\n<p>  <!-- Close Orange1 -->\n\t\t\t\t<\/div>\n<p> <!-- Close orange -->\t<\/p>\n<div class=\"banana\">\n<div class=\"main-shadow\"><\/div>\n<div class=\"main\"><\/div>\n<div class=\"lineb1\"><\/div>\n<div class=\"lineb2\"><\/div>\n<div class=\"left-end\"><\/div>\n<div class=\"banana-stem\"><\/div>\n<\/p><\/div>\n<div class=\"banana2\">\n<div class=\"part1\"><\/div>\n<div class=\"part2\"><\/div>\n<div class=\"line\"><\/div>\n<div class=\"left-end2\"><\/div>\n<div class=\"banana2-stem\"><\/div>\n<\/p><\/div>\n<div class=\"pear\">\n<div id=\"pear-stem\"><\/div>\n<div class=\"pear-down\"><\/div>\n<div class=\"pear-up\"><\/div>\n<\/p><\/div>\n<div class=\"green-apple\">\n<div class=\"green-apple2\"> <!--  To create Shaded Right --><\/p>\n<div class=\"green-applel2\"><\/div>\n<div class=\"green-appler2\"><\/div>\n<\/p><\/div>\n<div class=\"green-apple1\"><!-- Green Apple --><\/p>\n<div class=\"green-applel\"><\/div>\n<div class=\"green-appler\"><\/div>\n<\/p><\/div>\n<p>  <!-- Close Green-Apple1 --><\/p>\n<div id=\"green-apple-stem\"><\/div>\n<\/p><\/div>\n<p> <!-- Close Green-Apple -->\t<\/p>\n<div class=\"peach\">\n<div class=\"peach2\"> <!--  To create Shaded Right side --><\/p>\n<div class=\"peach2l\"><\/div>\n<div class=\"peach2r\"><\/div>\n<\/p><\/div>\n<div class=\"peach1\"><!-- Peach --><\/p>\n<div class=\"peach1l\"><\/div>\n<div class=\"peach1r\"><\/div>\n<\/p><\/div>\n<p>  <!-- Close Peach1 --><\/p>\n<div id=\"peach-stem\"><\/div>\n<\/p><\/div>\n<p> <!-- Close Peach -->\t<\/p>\n<div class=\"apple\">\n<div class=\"apple2\"> <!--  To create Shaded Right side --><\/p>\n<div class=\"apple2l\"><\/div>\n<div class=\"apple2r\"><\/div>\n<\/p><\/div>\n<div class=\"apple1\"><!-- RED apple --><\/p>\n<div class=\"apple1l\"><\/div>\n<div class=\"apple1r\"><\/div>\n<\/p><\/div>\n<p>  <!-- Close Apple1 --><\/p>\n<div id=\"apple-stem\"><\/div>\n<\/p><\/div>\n<p> <!-- Close Apple -->\n\t\t\t<\/div>\n<p><!-- Close SIZE --><\/p><\/div>\n<p> <!-- Ani-box  --><\/p>\n<div class=\"below-ani\">Bowl of Fruit made with Pure CSS<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Bowl of Fruit made with Pure CSS<\/p>\n","protected":false},"author":2,"featured_media":2586,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,20,16],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/110"}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=110"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/110\/revisions"}],"predecessor-version":[{"id":2867,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/110\/revisions\/2867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2586"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}