Halloween Icons set (Pure HTML/CSS )

halloween-icons-set-pure-html-css.markdown

Halloween Icons set (Pure HTML/CSS )

A Pen by Natalia Davydova on CodePen.

License.

index.html

<header class="header">
  <h1 class="header__title">Halloween Icons Set</h1>
  <div class="header__btns">
    <a
       href="https://github.com/nat-davydova/halloween-icons"
       class="header__btn"
       target="_blank"
       title="Check On Github"
       >Check On Github</a>
  </div>
</header>
<div class="content">
  <div class="container">

    <!-- PUMPKIN ICON-->
    <div class="pumpkin icon">
      <div class="pumpkin__tail"></div>
      <div class="pumpkin__main">
        <div class="pumpkin__bleak"></div>
        <div class="pumpkin__face">
          <div class="pumpkin__eyes-nose">
            <div class="pumpkin__eye pumpkin__eye--left"></div>
            <div class="pumpkin__nose"></div>
            <div class="pumpkin__eye pumpkin__eye--right"></div>
          </div>
          <div class="pumpkin__mouth"></div>
        </div>
        <div class="pumpkin__body">
          <div class="pumpkin__body-inner"></div>
        </div>
      </div>
    </div>

    <!-- GRAVE ICON-->
    <div class="grave icon">
      <div class="grave__body">
        <div class="skull-wrapper">
          <div class="skull-shadow"></div>
          <div class="skull">
            <div class="skull__face">
              <div class="skull__nose"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- CANDY ICON-->
    <div class="candy icon">
      <div class="candy__main"></div>
      <div class="candy__paper candy__paper--left">
        <div class="candy__paper-shade"></div>
        <div class="candy__paper-shade"></div>
        <div class="candy__paper-shade"></div>
      </div>
      <div class="candy__paper candy__paper--right">
        <div class="candy__paper-shade"></div>
        <div class="candy__paper-shade"></div>
        <div class="candy__paper-shade"></div>
      </div>
    </div>

    <!-- CAULDRON ICON-->
    <div class="cauldron icon">
      <div class="cauldron__brew">
        <div class="cauldron__brew-left"></div>
        <div class="cauldron__brew-right"></div>
      </div>
      <div class="cauldron__main">
        <div class="cauldron__top"></div>
        <div class="cauldron__bleak"></div>
        <div class="cauldron__inner"></div>
      </div>
    </div>

    <!-- BAT ICON-->
    <div class="bat icon">
      <div class="bat__ears"></div>
      <div class="bat__head">
        <div class="bat__face">
          <div class="bat__eyes-and-nose">
            <div class="bat__eye bat__eye--left"></div>
            <div class="bat__nose"></div>
            <div class="bat__eye bat__eye--right"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

style.css

:root {
    --transition-duration: .2s;
    --transition-timing-function: linear;
    --transition-delay: 0s;

    --font-size-default: 18px;
    --font-size-lg: 25px;

    --text-color-default: #2c2c2c;
    --text-color-light: #fff;

    --bg-color-default: #fff;
    --bg-color-dark: #2c2c2c;

    --border-color-default: #2c2c2c;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* DEMO STYLES: YOU DON'T NEED THEM!!! */

body {
    font-family: 'Quicksand', sans-serif;
    font-size: var(--font-size-default);
    color: var(--text-color-default);
}

body a {
    color: inherit;
    text-decoration: none;
}

.header {
    max-width: 500px;
    margin: 50px auto 0;
    text-align: center;
}

.header__btns {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.header__btn {
    transition:
            all
            var(--transition-duration)
            var(--transition-timing-function)
            var(--transition-delay);
    padding: 10px 20px;
    margin-right: 10px;
    background-color: var(--bg-color-default);
    border: 1px solid var(--border-color-default);
    border-radius: 3px;
    cursor: pointer;
    outline: none;
}

.header__btn:hover,
.header__btn.js-active {
    color: var(--text-color-light);
    background-color: var(--bg-color-dark);
}

.header__title {
    margin-bottom: 10px;
    font-weight: 600;
}

.content {
    margin: 50px auto;
}

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    width: 95%;
    max-width: 1000px;
    margin: auto;
    justify-content: center;
}

/* ICON STYLES: YOU DON'T NEED THEM!!! */

.icon {
    /* KEEP IT SQUARE */
    --icon-dimensions: 150px;

    width: var(--icon-dimensions);
    height: var(--icon-dimensions);
}

.icon--bordered {
    border: 2px solid orange;
}

/* PUMPKIN ICON */

.pumpkin {
    --body-color--main: #e57e25;
    --body-color--light: #F29C1F;
    --tail-color: #24AE5F;
    --tail-height: 30%;
    --bleak-color: #FAC176;
    --eyes-color: #802f34;
    --brows-color: #d25627;
    --nose-color: #802f34;
    --mouth-color: #802f34;
    --teeth-color: var(--body-color--light);

    position: relative;
}

.pumpkin__tail {
    position: absolute;
    top: 8%;
    left: 50%;
    width: 15%;
    height: var(--tail-height);
    transform: translateX(-50%) rotate(-33deg);
    background-color: var(--tail-color);
    border-radius: 100% 0% 100% 60% / 100% 0% 100% 0%;
}

.pumpkin__main {
    position: relative;
    top: 22%;
    height: 78%;
}

.pumpkin__bleak {
    position: absolute;
    left: 33%;
    top: 13%;
    height: 20%;
    width: 20%;
    transform: rotate(-56deg);
    border: 6px solid transparent;
    border-top-color: var(--bleak-color);
    border-radius: 100px;
    z-index: 3;
}

.pumpkin__face {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 62%;
    height: 56%;
    transform: translateX(-50%);
    z-index: 4;
}

.pumpkin__eyes-nose {
    height: 40%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.pumpkin__eye {
    position: relative;
    width: 24%;
    height: 100%;
}

.pumpkin__eye:before {
    position: absolute;
    display: block;
    top: 0;
    width: 110%;
    height: 30%;
    content: '';
    background-color: var(--brows-color);
    z-index: 5;
    border-radius: 50px;
}

.pumpkin__eye:after {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 80%;
    height: 100%;
    transform: translateX(-50%);
    content: '';
    background-color: var(--eyes-color);
    border-radius: 50%;
}

.pumpkin__eye--left:before {
    transform: rotate(28deg) translate(8%, -32%);
}
.pumpkin__eye--right:before {
    transform: rotate(-28deg) translate(-8%, -32%);
}

.pumpkin__nose {
    width: 12%;
    height: 44%;
    border-radius: 100% 100% 100% 100% / 100% 0% 100% 100%;
    background-color: var(--nose-color);
    transform: rotate(-46deg);
}

.pumpkin__mouth {
    --teeth-offset: 15%;

    position: relative;
    top: 15%;
    height: 45%;
    width: 50%;
    margin: auto;
    background-color: var(--mouth-color);
    border-radius: 96% 0% 51% 49% / 0% 0% 100% 100%
}

.pumpkin__mouth:before,
.pumpkin__mouth:after {
    position: absolute;
    top: 0;
    width: 15%;
    height: 20%;
    display: block;
    content: '';
    background-color: var(--teeth-color);
    border-radius: 0 0 50px 50px;
}

.pumpkin__mouth:before {
    left: var(--teeth-offset);
}

.pumpkin__mouth:after {
    right: var(--teeth-offset);
}

.pumpkin__body {
    position: relative;
    height: 100%;
}

.pumpkin__body:before,
.pumpkin__body:after {
    position: absolute;
    top: 0;
    display: block;
    width: 55%;
    height: 100%;
    content: '';
    background-color: var(--body-color--main);
    border-radius: 50%;
    z-index: 1;
}

.pumpkin__body:before {
    left: 0;
}

.pumpkin__body:after {
    right: 0;
}

.pumpkin__body-inner {
    position: absolute;
    left: 50%;
    width: 49%;
    height: 100%;
    transform: translateX(-50%);
    background-color: var(--body-color--light);
    border-radius: 50%;
    z-index: 2;
}

/* GRAVE ICON */
.grave {
    --grave-color: #35495E;
    --grave--shadow-color: #2C3E50;
    --skull-color: #ECF0F1;

    position: relative;
}

.grave__body {
    --shadow-offset: 18%;

    position: relative;
    width: 90%;
    height: 100%;
    margin: auto;
    border-radius: 50% 50% 0 0;
    background-color: var(--grave-color);
}

.grave__body:before,
.grave__body:after {
    position: absolute;
    bottom: 0;
    display: block;
    width: 5%;
    height: 15%;
    content: '';
    border-radius: 30px 30px 0 0;
    background-color: var(--grave--shadow-color);
}

.grave__body:before {
    left: var(--shadow-offset);
}

.grave__body:after {
    right: var(--shadow-offset);
}

.skull-wrapper {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 80%;
    height: 75%;
    transform: translateX(-50%);
}

.skull-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--grave--shadow-color);
    border-radius: 50% 50% 35% 35%;
}

.skull {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 80%;
    height: 86%;
    transform: translateX(-50%);
}

.skull:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 80%;
    content: '';
    background-color: var(--skull-color);
    border-radius: 50% 50% 35% 35%;
}

.skull:after {
    position: absolute;
    top: 68%;
    left: 50%;
    display: block;
    width: 60%;
    height: 25%;
    content: '';
    transform: translateX(-50%);
    background-image: radial-gradient(circle closest-side, var(--skull-color) 100%, rgba(255,255,255,0) 0);
    background-size: 33.33% 100%;
    background-repeat: repeat-x;
}

.skull__face {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 65%;
    height: 25%;
    transform: translateX(-50%);
}

.skull__face:before,
.skull__face:after {
    position: absolute;
    top: 0;
    display: block;
    width: 30%;
    height: 100%;
    content: '';
    background-color: var(--grave-color);
    border-radius: 50%;
}

.skull__face:before {
    left: 0;
}

.skull__face:after {
    right: 0;
}

.skull__nose {
    position: absolute;
    top: 95%;
    left: 50%;
    width: 25%;
    height: 45%;
    transform: translateX(-50%) rotate(180deg)}

.skull__nose:before,
.skull__nose:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 80%;
    height: 40%;
    content: '';
    background-color: var(--grave-color);
    border-radius: 30%;
}

.skull__nose:before {
    transform: rotate(-45deg);
    transform-origin: top right;
    left: -1px
}

.skull__nose:after {
    transform: rotate(45deg);
    transform-origin: top left;
    left: 1px
}

/* CANDY ICON */

.candy {
    --candy-main-dimensions: 60%;
    --candy-main-color: #FB7B76;
    --candy-dots-color: #F3D55B;
    --candy-paper-color: #FF5364;
    --candy-paper-shades: #DF4D60;

    position: relative;
}

.candy__main {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -50%);
    background-image:
            radial-gradient(circle closest-side, var(--candy-dots-color) 100%, rgba(255,255,255,0) 0),
            radial-gradient(circle closest-side, var(--candy-dots-color) 100%, rgba(255,255,255,0) 0),
            radial-gradient(circle closest-side, var(--candy-dots-color) 100%, rgba(255,255,255,0) 0),
            radial-gradient(circle closest-side, var(--candy-dots-color) 100%, rgba(255,255,255,0) 0),
            radial-gradient(circle closest-side, var(--candy-dots-color) 100%, rgba(255,255,255,0) 0),
            radial-gradient(circle closest-side, var(--candy-dots-color) 100%, rgba(255,255,255,0) 0),
            radial-gradient(circle closest-side, var(--candy-dots-color) 100%, rgba(255,255,255,0) 0);
    background-size:
            18% 18%,
            13% 13%,
            18% 18%,
            13% 13%,
            18% 18%,
            18% 18%,
            13% 13%;
    background-position:
            35% 17%,
            75% 23%,
            17% 51%,
            52% 53%,
            88% 62%,
            35% 89%,
            66% 83%;
    background-repeat: no-repeat;
    background-color: var(--candy-main-color);
    border-radius: 50%;
    z-index: 3;
}

.candy__paper {
    --candy-paper-dimensions: 40%;
    --candy-paper-waves-width: 30%;

    position: absolute;
    width: var(--candy-paper-dimensions);
    height: var(--candy-paper-dimensions);
    top: 50%;
    transform: translateY(-50%);
}

.candy__paper:before {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: var(--candy-paper-color);
    z-index: 2;
}

.candy__paper:after {
    position: absolute;
    top: 50%;
    display: block;
    width: var(--candy-paper-waves-width);
    height: 99%;
    content: '';
    transform: translateY(-50%);
    background-image: radial-gradient(circle closest-side, var(--candy-paper-color) 100%, rgba(255,255,255,0) 0);
    background-size: 100% 25%;
    background-repeat: repeat-y;
}

.candy__paper--left {
    left: 10%;
}

.candy__paper--left:before {
    transform: rotate(90deg);;
}

.candy__paper--left:after {
    left: -15%;
}

.candy__paper--right {
    right: 10%;
}

.candy__paper--right:before {
    transform: rotate(-90deg);
}

.candy__paper--right:after {
    right: -15%;
}

.candy__paper-shade {
    --candy-paper-shade-rotate-angle: 21deg;

    position: absolute;
    width: 40%;
    height: 7%;
    background-color: var(--candy-paper-shades);
    border-radius: 100px;
    z-index: 5;
}

.candy__paper-shade:nth-child(1) {
    top: 40%;
}

.candy__paper-shade:nth-child(2) {
    top: 50%;
}

.candy__paper-shade:nth-child(3) {
    top: 60%;
}

.candy__paper--left .candy__paper-shade {
    left: 5%;
}

.candy__paper--right .candy__paper-shade {
    right: 5%;
}

.candy__paper--left .candy__paper-shade:nth-child(1) {
    transform: rotate(var(--candy-paper-shade-rotate-angle));
}

.candy__paper--left .candy__paper-shade:nth-child(3) {
    transform: rotate(calc(var(--candy-paper-shade-rotate-angle) * -1));
}

.candy__paper--right .candy__paper-shade:nth-child(1) {
    transform: rotate(calc(var(--candy-paper-shade-rotate-angle) * -1));
}

.candy__paper--right .candy__paper-shade:nth-child(3) {
    transform: rotate(var(--candy-paper-shade-rotate-angle));
}

/* CAULDRON ICON */

.cauldron {
    --cauldron-color: #3F5C6C;
    --cauldron-shadow-color: #314152;
    --cauldron-bleak-color: #547580;
    --cauldron-brew-color: #4FBA6F;

    position: relative;
}

.cauldron__brew {
    position: absolute;
    top: 0;
    left: 50%;
    width: 90%;
    height: 26%;
    transform: translateX(-50%);
    z-index: 5;
}

.cauldron__brew:before,
.cauldron__brew:after {
    position: absolute;
    display: block;
    content: '';
    background-color: var(--cauldron-brew-color);
    border-radius: 50px;
}

.cauldron__brew:before {
    top: 12%;
    left: 43%;
    width: 11%;
    height: 38%;
}

.cauldron__brew:after {
    top: 41%;
    right: 10%;
    width: 18%;
    height: 49%;
}

.cauldron__brew-left {
    position: absolute;
    left: 5%;
    bottom: 0;
    width: 35%;
    height: 40%;
}

.cauldron__brew-left:before,
.cauldron__brew-left:after {
    position: absolute;
    display: block;
    content: '';
    background-color: var(--cauldron-brew-color);
    border-radius: 50px;
}

.cauldron__brew-left:before {
    top: -74%;
    left: 17%;
    width: 62%;
    height: 190%;
}

.cauldron__brew-left:after {
    width: 100%;
    height: 100%;
}

.cauldron__brew-right {
    position: absolute;
    right: 5%;
    bottom: -10%;
    width: 35%;
    height: 40%;
    background-color: var(--cauldron-brew-color);
    border-radius: 50px;
}

.cauldron__brew-right:before {
    top: 0;
    left: 17%;
    width: 30%;
    height: 320%;
}

.cauldron__brew-right:after {
    top: 0;
    right: 17%;
    width: 20%;
    height: 220%;
}

.cauldron__brew-right:before,
.cauldron__brew-right:after {
    position: absolute;
    display: block;
    content: '';
    background-color: var(--cauldron-brew-color);
    border-radius: 50px;
}

.cauldron__main {
    --cauldron-cut-out-percentage: 20%;

    position: absolute;
    top: 10%;
    left: 50%;
    height: 90%;
    width: 90%;
    transform: translateX(-50%);
}

.cauldron__inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--cauldron-color);
    border-radius: 50%;
    clip-path: polygon(0 100%, 100% 100%, 100% var(--cauldron-cut-out-percentage), 0% var(--cauldron-cut-out-percentage));
    z-index: 1;
}

.cauldron__main:before,
.cauldron__main:after {
    --cauldron-legs-x-offset: 15%;

    position: absolute;
    bottom: 0;
    display: block;
    content: '';
    width: 15%;
    height: 25%;
    background-color: var(--cauldron-shadow-color);
    border-radius: 50px;
    z-index: -1;
}

.cauldron__main:before {
    left: var( --cauldron-legs-x-offset);
    transform: rotate(45deg);
}

.cauldron__main:after {
    right: var( --cauldron-legs-x-offset);
    transform: rotate(-45deg);
}

.cauldron__top {
    position: absolute;
    left: 0;
    top: calc(var(--cauldron-cut-out-percentage) / 1.2);
    width: 100%;
    height: 10%;
    background-color: var(--cauldron-shadow-color);
    border-radius: 50px;
    z-index: 3;
}

.cauldron__bleak {
    --cauldron-bleak-width: 12px;

    position: absolute;
    top: 30%;
    left: 10%;
    width: 20%;
    height: 40%;
    border: var(--cauldron-bleak-width) solid transparent;
    border-left-color: var(--cauldron-bleak-color);
    border-radius: 50%;
    z-index: 4;
}

/* BAT ICON */

.bat {
    --bat-head-color: #6A647F;
    --bat-head-shadow-color: #484758;
    --bat-eyes-color: #484758;
    --bat-nose-color: #FFB2C1;
    --bat-nostrils-color: #484758;
    --bat-cheecks-color: #FF889E;
    --bat-ears-color--light: #FFB2C1;
    --bat-ears-color--dark: #FF889E;

    position: relative;
}

.bat__ears {
    position: absolute;
    width: 100%;
    height: 50%;
}

.bat__ears:before,
.bat__ears:after {
    position: absolute;
    top: 0;
    display: block;
    width: 45%;
    height: 100%;
    content: '';
    border: 20px solid var(--bat-head-shadow-color);
}

.bat__ears:before {
    left: 0;
    background-image: linear-gradient(
            to right bottom,
            var(--bat-ears-color--light) 0,
            var(--bat-ears-color--light) 13%,
            var(--bat-ears-color--dark) 13%,
            var(--bat-ears-color--dark) 30%,
            var(--bat-ears-color--light) 30%
    );
    border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
}

.bat__ears:after {
    right: 0;
    border-radius: 100% 0% 100% 0% / 100% 0% 100% 0% ;
    background-image: linear-gradient(
            to left bottom,
            var(--bat-ears-color--light) 0,
            var(--bat-ears-color--light) 13%,
            var(--bat-ears-color--dark) 13%,
            var(--bat-ears-color--dark) 30%,
            var(--bat-ears-color--light) 30%
    );
}

.bat__head {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 90%;
    height: 80%;
    transform: translateX(-50%);
    background-color: var(--bat-head-shadow-color);
    border-radius: 50% 50% 32% 31% / 60% 63% 36% 38%;
    z-index: 3;
}

.bat__head:before {
    position: absolute;
    top: 0;
    left: 7%;
    display: block;
    width: 93%;
    height: 100%;
    content: '';
    background-color: var(--bat-head-color);
    border-radius: inherit;
}

.bat__face {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 65%;
    height: 30%;
    transform: translate(-50%, -50%);
}

.bat__eyes-and-nose {
    width: 100%;
    height: 65%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bat__eye {
    position: relative;
    width: 20%;
    height: 100%;
}

.bat__eye:before {
    position: absolute;
    top: 0;
    display: block;
    width: 50%;
    height: 60%;
    content: '';
    background-color: var(--bat-eyes-color);
    border-radius: 50%;
}

.bat__eye:after {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 30%;
    content: '';
    background-color: var(--bat-cheecks-color);
    border-radius: 50%;
}

.bat__eye--left:before,
.bat__eye--left:after {
    right: 0;
}

.bat__eye--right:before,
.bat__eye--right:after {
    left: 0;
}

.bat__nose {
    position: relative;
    width: 30%;
    height: 100%;
    background-color: var(--bat-nose-color);
    border-radius: 50% 50% 32% 31% / 60% 63% 36% 38%;
}

.bat__nose:before,
.bat__nose:after {
    position: absolute;
    top: 50%;
    display: block;
    width: 30%;
    height: 60%;
    content: '';
    background-color: var(--bat-nostrils-color);
    border-radius: 50%;
}

.bat__nose:before {
    left: 13%;
    transform: translateY(-50%) rotate(20deg);
}

.bat__nose:after {
    right: 13%;
    transform: translateY(-50%) rotate(-20deg);
}

.bat__mouth {
    height: 35%;
}