Cookie & Milk w/ Pure CSS

HTML
<div class="bag"> <div class="label"> <p>We're using cookies!</p> </div> <div class="sticker"><a href="#!">read more</a></div> <div class="cookie"> <div class="box"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 744.033 755.063"> <g> <path fill="#D39756" d="M379.635,729.164c-51.657,0-118.328-15.708-151.999-52.696c-41.98-46.116-87.898-62.119-132.667-103.971 c-46-43.003-80-99.728-80-166.667c0-39.335,19.998-139.997,39.674-178.664c23.864-46.898,80.883-68.962,110.991-111.333 c17.21-24.219,48.011-62.667,94.667-78.667c76.198-26.131,111.716-30.67,194.631-22.003c48.127,5.031,92.295,27.945,122.703,54.003 c16.694,14.307,28.572,32.121,38,50c16.522,31.333,36.667,22.834,52.667,53.75c27.61,53.35,56,134.372,56,215.583 c0,40.246-4.955,83.46-16.075,123.748l11.407-0.913l14.983,5.331c12.128-41.156,9.067-96.982,9.067-140.664 c0-96.188-73.754-243.089-102.551-250c-25-6-32.292-55.307-57-72c-59.3-40.063-125.049-54-202-54c-77.924,0-157,23-212,75 c-62.486,59.077-128.679,88.509-157,172C0.583,284-1.196,341.256,0.583,376c2.866,55.954,5.173,106.521,27.551,154 c21.059,44.682,85.203,85.671,124,114c29.677,21.67,31.219,70.91,70,88c59,26,126.47,22.883,182,23 c0.246,0,0.478-0.007,0.722-0.007l12.067-30.926C404.504,727.226,391.907,729.164,379.635,729.164z"/> <path fill="#DEA45B" d="M668.302,172.916c-16-30.916-36.145-22.416-52.667-53.75c-9.428-17.879-21.306-35.693-38-50 c-30.408-26.058-74.576-48.972-122.703-54.003c-82.916-8.667-118.434-4.127-194.631,22.003c-46.656,16-77.457,54.448-94.667,78.667 c-30.108,42.371-87.126,64.435-110.991,111.333C34.967,265.833,14.969,366.495,14.969,405.83c0,66.939,34,123.664,80,166.667 c44.769,41.852,90.687,57.854,132.667,103.971c33.671,36.988,100.342,52.696,151.999,52.696c12.271,0,24.869-1.938,37.288-5.097 l5.461-13.993L410.092,629.5l24.375-35.414l-4.157-47.426l26.088-19.929l37.569-31.564h27.667l10-8l37.333,2.667l28,3.333 l36.667,6.583l29.833,15.5l39.5-2.583l5.26-0.421c11.12-40.288,16.075-83.502,16.075-123.748 C724.302,307.287,695.913,226.266,668.302,172.916z"/> </g> <g> <path class="crack" fill="#D39756" d="M731.134,527c1.287-3.32,2.436-6.779,3.483-10.336l-14.983-5.331l-11.407,0.913 c-20.351,73.727-61.368,137.646-130.592,155.584c-33.333,8.638-74,20-108.666,36.667c-15.892,7.641-33.776,14.925-52.046,19.57 l-12.067,30.926c49.4-0.076,63.222-18.399,102.429-32.556C608.164,686.011,662.134,705,731.134,527z"/> <path class="crack" fill="#DEA45B" d="M663.467,515.25l-29.833-15.5l-36.667-6.583l-28-3.333l-37.333-2.667l-10,8h-27.667l-37.569,31.564 L430.31,546.66l4.157,47.426L410.092,629.5l12.292,80.574l-5.461,13.993c18.27-4.646,36.154-11.93,52.046-19.57 c34.666-16.667,75.333-28.029,108.666-36.667c69.224-17.938,110.241-81.857,130.592-155.584l-5.26,0.421L663.467,515.25z"/> </g> <path fill="#533619" d="M279.967,173.5c-1.552,18.159-6.75,31.5-25.5,30.25c-18.185-1.212-37.5-9.75-40.5-30.25 c-2.639-18.034,11.274-31.5,29.5-31.5c6.599,0,12.383,6.994,19,6.5C270.842,147.875,281.217,158.875,279.967,173.5z"/> <path fill="#533619" d="M627.217,223c1.743,12.55,10.75,32.75-1,42.75c-7.39,6.289-16.693,9.568-24.5,14 c-5.793,3.29-11.712,10.123-18.25,10.5c-30.876,1.781-56.315-33.428-59.75-56.75c-4.75-32.25,19-57.75,52.25-59 C606.874,173.338,622.217,187,627.217,223z"/> <path class="crack" fill="#533619" d="M588.634,493.833c-0.441,13.407-18.5,26.334-22.667,39c-6.698,20.359-22.963,30.667-46,30.667 c-36.451,0-62.575-16.884-67.5-53c-1.5-11,9.926-29.731,11.167-36.5c5.166-28.167,27.641-34.5,56.833-34.5 C556.918,439.5,589.967,453.333,588.634,493.833z"/> <path class="crack" fill="#533619" d="M493.967,660.5c0,17.121-11.712,15.667-28.833,15.667s-29.167,4.166-34.333-18.5 c-3.805-16.693,15.045-28.167,32.166-28.167C490.801,629.5,493.967,643.379,493.967,660.5z"/> <path fill="#533619" d="M271.967,423.834c9.085,30.717-30.967,44.666-63,44.666s-44.223-20.018-46-52c-2-36,30.301-55,62.333-55 S264.967,400.167,271.967,423.834z"/> <path fill="#533619" d="M439.967,309.5c1.5,24.5-13.408,29.75-35.5,29.75s-44.5-7.659-44.5-29.75s12-42.75,36.75-40 C418.674,271.939,438.618,287.45,439.967,309.5z"/> <path fill="#533619" d="M264.801,604.5c0,21.539-10.89,33.03-31.833,28c-34-8.167-31.833-29.628-31.833-51.167 s10.294-26.833,31.833-26.833S264.801,582.961,264.801,604.5z"/> <path fill="#533619" d="M111.467,280.5c-3.75,15.002-16.036,23-31.5,23c-8.755,0-12.75-6.5-20.75-8.25 c-6.32-1.382-4.25-16.541-4.25-23.25c0-15.464,9.536-24.5,25-24.5S115.467,264.5,111.467,280.5z"/> <path fill="#533619" d="M482.967,78.5c4.334,17.833-12.983,29-29,29s-27.746-5.495-27.746-21.511s8.08-34.823,27.746-36.489 C469.926,48.147,479.185,62.937,482.967,78.5z"/> <path fill="#392515" d="M271.257,421.392c-7.891,18.029-37.49,26.393-62.29,26.393c-29.154,0-41.868-16.585-45.258-43.676 c-0.712,3.877-0.985,8.006-0.742,12.392c1.777,31.982,13.967,52,46,52s72.085-13.949,63-44.666 C271.731,423.037,271.495,422.221,271.257,421.392z"/> <path fill="#D39756" d="M152.467,463c0,0,30-6.5,44.5-11s47.5-2.5,59.5,0s23.5,10.5,34.5,11c0,0-41.5,4.5-48.5,5.5s-53,3-60,2.5 S165.467,467,152.467,463z"/> <path class="crack" fill="#392515" d="M565.807,508.333c-6.698,20.359-22.963,30.667-46,30.667c-32.618,0-56.953-13.532-65.242-42.255 c-1.691,4.972-2.79,9.851-2.258,13.755c4.925,36.116,31.049,53,67.5,53c23.037,0,39.302-10.308,46-30.667 c4.167-12.666,22.226-25.593,22.667-39c0.21-6.383-0.438-12.101-1.814-17.209C581.901,487.448,569.214,497.978,565.807,508.333z"/> <path class="crack" fill="#D39756" d="M458.967,557c0,0,35-3,43-2.5s32-1.5,39.5-6s30.75-24.5,40.25-24.5c0,0-1.795,11.156-7,20.695 c-5.611,10.284-19.25,25.805-54.215,24.555C494.958,568.337,462.133,557.667,458.967,557z"/> <path class="crack" fill="#392515" d="M465.134,666.542c-16.96,0-28.935,4.071-34.181-17.882c-0.771,2.78-0.884,5.796-0.152,9.007 c5.166,22.666,17.212,18.5,34.333,18.5s28.833,1.454,28.833-15.667c0-2.126-0.049-4.202-0.188-6.208 C492.24,667.783,481.018,666.542,465.134,666.542z"/> <path class="crack" fill="#D39756" d="M434.467,674.5c0,0,11-2,16.75-1.25s18.25,1.082,23.5,0.541s13.75-3.291,19.25-2.041s32,10,42.25,10 c0,0-11.75,3.707-18.75,3.479s-32-4.729-39.25-4.979S441.467,677.75,434.467,674.5z"/> <path fill="#392515" d="M232.967,617.167c-27.158-6.523-31.237-21.53-31.78-38.282c-0.032,0.794-0.053,1.604-0.053,2.448 c0,21.539-2.167,43,31.833,51.167c20.943,5.03,31.833-6.461,31.833-28c0-2.623-0.156-5.35-0.462-8.114 C262.073,613.192,251.429,621.602,232.967,617.167z"/> <path fill="#D39756" d="M269.217,633.673c0,0-13.25-8.173-21.5-8.173s-31.75,2.5-40.5,1.25s-57.129-14.646-70.189-20.948 c0,0,21.763,19.698,25.851,21.448s30.366,4.846,38.227,6.423S236.967,636,243.217,635S264.717,631.846,269.217,633.673z"/> <path fill="#392515" d="M79.967,292.5c-8.755,0-12.75-6.5-20.75-8.25c-2.831-0.619-3.976-4.005-4.38-8.155 c-0.333,7.417-0.854,18.01,4.38,19.155c8,1.75,11.995,8.25,20.75,8.25c15.464,0,27.75-7.998,31.5-23 c0.822-3.288,0.616-6.615-0.343-9.831C107.033,284.904,95.017,292.5,79.967,292.5z"/> <path fill="#D39756" d="M50.967,295.833c0,0,8.667-5.334,12.667-4.167s7,6.833,11.667,8.333s21.5,2,25.167,0.833 s8.333-1.167,12.667-1.167c0,0-10,3-13.5,3.833s-22.666,3.833-26.833,1.5S58.134,294.833,50.967,295.833z"/> <path fill="#392515" d="M254.467,193.583c-17.942-1.196-36.973-9.532-40.36-29.444c-0.546,2.933-0.622,6.07-0.14,9.361 c3,20.5,22.315,29.038,40.5,30.25c18.75,1.25,23.948-12.091,25.5-30.25c0.212-2.48,0.083-4.853-0.308-7.086 C277.771,182.977,272.139,194.762,254.467,193.583z"/> <path fill="#D39756" d="M214.801,183.333c0,0,13.667,12.833,19,13.833s21.167,2.5,25.5,3.667s11.167-0.333,14-1 s10.666-2.333,12.333-2.333c0,0-5.667,5.667-9.667,7.5s-21.458,5.708-29.625,4.375S220.468,201.333,214.801,183.333z"/> <path fill="#392515" d="M439.418,305.031c-3.029,15.538-16.474,19.219-34.951,19.219c-19.877,0-40.001-6.207-43.838-23.541 c-0.437,2.87-0.662,5.816-0.662,8.791c0,22.091,22.408,29.75,44.5,29.75s37-5.25,35.5-29.75 C439.875,307.977,439.684,306.489,439.418,305.031z"/> <path fill="#D39756" d="M359.134,329.833c0,0,16.667-1.5,20-0.833s21.333,6.667,27.333,6.833s26.5-2.5,30-1.833 c0,0-7.667,2.833-13,4.5s-31,3.167-35.833,1.667S365.968,329.667,359.134,329.833z"/> <path fill="#392515" d="M453.967,100c-14.86,0-26.023-4.736-27.559-18.211c-0.123,1.412-0.188,2.817-0.188,4.201 c0,16.016,11.729,21.511,27.746,21.511c15.528,0,32.278-10.497,29.335-27.389C480.985,92.552,467.045,100,453.967,100z"/> <path fill="#D39756" d="M422.384,97.5c0,0,12.083-5.125,16.083-1.625s6.625,8.875,12.75,9.375s18.471-5.557,21.375-5.309 s14.25,0.559,16.125-0.566c0,0-9.875,4-13.125,4.875s-14.625,4.25-16.375,5.125s-20.08,1.853-23.5-0.375 C430.217,105.417,431.134,97.875,422.384,97.5z"/> <path fill="#392515" d="M626.217,248.434c-7.39,6.289-16.693,9.568-24.5,14c-5.793,3.29-11.712,10.123-18.25,10.5 c-30.598,1.765-55.843-32.789-59.639-56.109c-0.885,5.272-0.968,10.862-0.111,16.675c3.435,23.322,28.874,58.531,59.75,56.75 c6.538-0.377,12.457-7.21,18.25-10.5c7.807-4.432,17.11-7.711,24.5-14c6.936-5.903,6.638-15.36,4.872-24.7 C630.188,243.842,628.654,246.359,626.217,248.434z"/> <path fill="#D39756" d="M536.717,270.875c0,0,17.375,9.375,26,10s18.875,4.875,28-0.875s23.942-10.638,28-11.125 s7.125-0.5,10.375-1.875c0,0-3.458,5-6.958,9.5c-2.551,3.28-15.5,12-19.833,13.815c-2.953,1.237-27.708,7.195-41.833,3.445 S537.842,271.375,536.717,270.875z"/> <path fill="#D39756" d="M539.301,370.16c0,0,45.667-13.993,63-13.66s39.666,6.333,49.333,9s31.667,8,37,6c0,0-15.666,4.333-30.333,4 s-45-6.681-55-5.34S552.301,371.153,539.301,370.16z"/> <path fill="#D39756" d="M371.967,162.75c0,0,70-9,92.5-4.25s54.25,9.5,62,8c0,0-28.25,7.581-46.75,6.416 S382.717,162.25,371.967,162.75z"/> <path fill="#D39756" d="M223.217,49.414c0,0,20.75-6.414,30.25-6.414s22.25,6.077,30.5,6.414c0,0-9,3.836-17,4.336 S227.717,48.577,223.217,49.414z"/> <path fill="#D39756" d="M663.467,515.25c0,0,33.25-5,40.25-4.75s15.5-4,18.25-7.75s-2.75-18.5-2.75-18.5s-24.5,8-28,12.75 S668.967,514.25,663.467,515.25z"/> <path fill="#D39756" d="M18.967,331c0,0,16.25-1.5,25.5,2.5s25,4.5,29.25,4.5c0,0-21.75-5.75-25-8.5s-23.5-10.25-27.25-7 S18.967,331,18.967,331z"/> </svg> </div> </div> <div class="piece"> <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 154.667 47" enable-background="new 0 0 154.667 47" xml:space="preserve"> <polygon fill="#DEA459" points="90.667,47 126.667,47 154.667,34 132.667,0 102.475,6 "/> <polygon fill="#DEA459" points="39.333,47 23.333,30 11.333,30 3.333,38.5 0,47 "/> <polygon fill="#D19654" points="147.101,22.308 121.917,34 94.411,34 90.667,47 126.667,47 154.667,34 "/> <polygon fill="#D19654" points="3.333,38.5 0,47 39.333,47 31.333,38.5 "/> </svg> </div> </div>
SCSS
$bg: rgb(231, 76, 60); $bag: #E3D0B9; html, body { height: 100%; width: 100%; } body { background: rgba($bg, 1); } .bag { width: 150px; height: 200px; background: $bag; position: absolute; margin: auto; bottom: 10vh; left: 2vw; box-shadow: inset 0 -5px 0 0 darken($bag, 10); border-radius: 0 0 10px 10px; &:before { content: ''; position: absolute; margin: auto; border-bottom: 40px solid lighten($bag, 5); border-left: 20px solid transparent; border-right: 20px solid transparent; height: 0; width: 110px; top: -40px; } &:after { content: ''; position: absolute; margin: auto; width: 110px; height: 15px; background: darken($bag, 5); background: repeating-linear-gradient(90deg, #d6c3af 0, #d6c3af 20%, #E3D0B9 20%, #E3D0B9 100%); background-size: auto .1em; left:0; right:0; top: -55px; } &:hover .cookie svg .crack { transform: translate(50px,30px); } & .label { position: absolute; margin: auto; left: 0; right: 0; top: 50px; width: 100px; min-height: 50px; background: #fff; background-image: linear-gradient(90deg, transparent 79px, transparent 81px), linear-gradient(#eee .1em, transparent .1em); background-size: 100% 1.2em; border-radius: 10px; & p { margin: 0; color: hsl(0, 0%, 40%); text-align: center; padding: 4px 4px 8px 4px; font-size: 12px; line-height: 19px; font-weight: 800; } } & .sticker { position: absolute; margin: auto; width: fit-content; height: 20px; line-height: 20px; font-size: 14px; border: 1px solid darken($bg,10); border-radius: 5px; padding: 0 4px; bottom: 50px; left: 20px; background: lighten($bg, 20); transform: rotate(-14deg); font-weight: 600; overflow: hidden; transition: all 200ms cubic-bezier(.25,.75,.5,1); &:before { content: ''; width: 0; height: 0; background: darken($bg, 10); position: absolute; margin: auto; top: 0; right: 0; border-radius: 0 0 0 5px; transition: all 200ms cubic-bezier(.25,.75,.5,1); } &:hover { border-radius: 5px 20px 5px 5px; &:before { width: 15px; height: 15px; } } & a { text-decoration: none; color: $bg; } } & .cookie { width: 100px; position: absolute; margin: auto; right: -50px; bottom: -30px; & svg { overflow: visible; & .crack { transform: translate(-2px,-2px); transition: all 100ms cubic-bezier(.25,.75,.5,1); } } } & .piece { width: 40px; position: absolute; margin: auto; right: -65px; bottom: -30px; } }
JAVASCRIPT
Expand for more options Login