fruit – Thingography.com

fruit – Thingography.com https://thingography.com More than a Photo Gallery Mon, 18 Feb 2019 23:20:01 +0000 en-US hourly 1 Bowl of Fruit with Pure CSS https://thingography.com/css-fruit/ https://thingography.com/css-fruit/#respond Sun, 18 Feb 2018 20:42:07 +0000 http://thingography.com/my-things/?p=110 .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

]]> https://thingography.com/css-fruit/feed/ 0