back to top

info(at)sypo.uk01539 741461

CSS Only Christmas Images

Posted on 7th December, 2018

By Mark Syred. Difficulty level: Intermediate

This post is just for fun. Click/tap and hold on any of the images below and each one had a little surprise in store. The best thing about them, is that all that was used to make them happen was some CSS, and of course some HTML to hang it off. Merry Christmas from SYPO! I hope you enjoy these little gifts!

And, if you're interested to know how it's all done, here's the HTML, followed by the CSS

<div class="christmas">
    <div class="snowman">
        <div id="tophat"></div>
        <div id="hat-rim"></div>
        <div id="face">
            <div id="eyes"></div>
            <div id="nose"></div>
            <div id="mouth"></div>
            <div id="mouth-part"></div>
        </div>
        <div id="scarf"></div>
        <div class="shoulders"></div>
        <div class="large-flakes"></div>
        <div class="medium-flakes"></div>
        <div class="small-flakes"></div>
    </div>
    <div class="santa">
        <div id="hat-top"></div>
        <div id="rim"></div>
        <div class="face"></div>
        <div id="beard"></div>
        <div id="sack"></div>
        <div id="sack-top"></div>
        <div class="shoulders"></div>
        <div class="large-flakes"></div>
        <div class="medium-flakes"></div>
        <div class="small-flakes"></div>
    </div>
    <div class="snowflake">
        <div id="main-flake">
            <div id="vertical-bar"></div>
            <div id="first-diagonal"></div>
            <div id="second-diagonal"></div>
        </div>
    </div>
</div>

The CSS is quite lengthy... and, if you can think of a shorter way of achieving all this, let us know in the comments!

.christmas .santa > div,
.christmas .snowman > div,
.christmas #face > div,*:after,*:before,
.christmas .snowflake > div,
.christmas .snowflake div:after,
.christmas .snowflake div:before,
.christmas #main-flake > div  {
    position: absolute;
}

.christmas *:after,
.christmas *:before {
    content: '';
}

.christmas .santa,
.christmas .snowflake,
.christmas .snowman {
    width: 250px;
    height: 250px;
    position: relative;
    z-index: 1;
    background: #aaf;
    border-radius: 50%;
}

/*== SANTA CSS ====*/

.christmas .santa {
    overflow: hidden;
}

.christmas #hat-top {
    width: 115px;
    height: 50px;
    top: 35px;
    left: 50px;
    background: #ff0a0e;
    border-radius: 0 110px 0 50px/0 50px 0 50px;
    z-index: 3;
}

.christmas #hat-top:before {
    top: -10px;
    left: -5px;
    content: '';
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: #fff;
}

.christmas #hat-top:after {
    width: 130px;
    height: 30px;
    background: #ffc0cb;
    bottom: -45px;
    right: -25px;
    border-radius: 15px;
}

.christmas #rim {
    height: 18px;
    width: 100px;
    top: 75px;
    left: 75px;
    background: #fff;
    border-radius: 9px;
    z-index: 5;
}

.christmas #rim:before,
.christmas #rim:after {
    height: 10px;
    width: 10px;
    border-radius: 5px;
    position: absolute;
    bottom: -17px;
    background: #000;
}

.christmas #rim:before {
    left: 30px;
}

.christmas #rim:after {
    right: 30px;
}

.christmas .santa .face {
    width: 100px;
    height: 100px;
    border-radius: 50px/100px;
    background: #ffe0bd;
    top: 75px;
    left: 75px;
    z-index: 4;
}

.christmas #beard {
    width: 150px;
    height: 100px;
    border-radius: 0 50px 50px 100px;
    background: white;
    left: 40px;
    top: 125px;
    z-index: 7;
}

.christmas #beard:before,
.christmas #beard:after {
    left: 65px;
    width: 40px;
    height: 20px;
}

.christmas #beard:after {
    top: -8px;
    border-radius: 40px/20px;
    background: #ffc0cb;
}

.christmas #beard:before {
    top: 20px;
    border-radius: 0 0 20px 20px;
    background: black;
}

.christmas .santa .shoulders {
    position: absolute;
    top: 175px;
    left: 25px;
    width: 200px;
    height: 75px;
    background: #ff0a0e;
    z-index: 4;
    border-radius: 50px 50px 0 0;
}

.christmas .santa .shoulders:before {
    content: '';
    width: 14px;
    background: #ffbf00;
    position: absolute;
    left: 93px;
    height: 14px;
    bottom: 8px;
    border-radius: 50%;
}

.christmas #sack {
    background: #a55d35;
    border-radius: 60px;
    height: 120px;
    width: 120px;
    z-index: 2;
    position: absolute;
    left: 0;
    bottom: 15px;
}

.christmas #sack-top {
    height: 0;
    width: 0;
    border-right: 60px solid #a55d35;
    border-bottom: 80px solid transparent;
    bottom: 0px;
    left: 20px;
    z-index: 5;
}

.christmas #sack-top:after {
    height: 40px;
    width: 50px;
    border-radius: 25px 25px 0 0;
    bottom: -80px;
    left: 25px;
    background: #000;
}

.christmas .large-flakes,
.christmas .medium-flakes,
.christmas .small-flakes {
    border-radius: 50%;
    background: #fff;
    z-index: 200;
}

.christmas .large-flakes {
    top: 220px;
    right: 45px;
    width: 8px;
    height: 8px;
    box-shadow: 0 -140px #fff,
        0 -280px #fff,
        -20px -50px #fff,
        -20px -190px #fff,
        -20px -330px #fff,
        30px -70px #fff,
        30px -210px #fff,
        -50px -90px #fff,
        -50px -230px #fff,
        -70px -20px #fff,
        -70px -160px #fff,
        -70px -300px #fff,
        -100px -200px #fff,
        -100px -340px #fff,
        -120px -110px #fff,
        -120px -250px #fff,
        -150px 0 #fff,
        -150px -140px #fff,
        -150px -280px #fff,
        -170px -60px #fff,
        -170px -200px #fff;
    /* There's actually no limit to the number of box-shadows that an element can have,
        so I could have had many, many more snow flakes */
}

.christmas .medium-flakes {
    top: 230px;
    right: 85px;
    width: 6px;
    height: 6px;
    box-shadow: 0 -110px #fff,
        0 -220px #fff,
        0 -330px #fff,
        55px -20px #fff,
        55px -130px #fff,
        55px -240px #fff,
        -15px -75px #fff,
        -15px -185px #fff,
        -15px -295px #fff,
        -80px -55px #fff,
        -80px -165px #fff,
        -80px -275px #fff,
        -145px -30px #fff,
        -145px -140px #fff,
        -145px -250px #fff;
}

.christmas .small-flakes {
    top: 160px;
    right: 55px;
    width: 4px;
    height: 4px;
    box-shadow: 0 -90px #fff,
        0 -180px #fff,
        30px -30px#fff,
        30px -120px #fff,
        -80px 50px#fff,
        -80px -40px #fff,
        -80px -130px #fff,
        -80px -220px #fff,
        -160px 40px #fff,
        -160px -50px #fff,
        -160px -140px #fff;
}

.christmas .santa:active .large-flakes,
.christmas .snowman:active .large-flakes {
    top: 360px;
    transition: 1.2s linear;
}

.christmas .santa:active .medium-flakes,
.christmas .snowman:active .medium-flakes {
    top: 340px;
    transition: 1.2s linear;
}

.christmas .santa:active .small-flakes,
.christmas .snowman:active .small-flakes {
    top: 250px;
    transition: 1.2s linear;
}

/*== END SANTA CSS ====*/

/*== SNOWMAN CSS ====*/

.christmas #tophat {
    width: 100px;
    height: 75px;
    top: 15px;
    left: 80px;
    background: #000;
    z-index: 7;
    transform: rotate(5deg);
}

.christmas #tophat:after {
    width: 100px;
    height: 12px;
    background: #ff0a0e;
    bottom: 0px;
}

.christmas #hat-rim {
    height: 10px;
    width: 120px;
    top: 90px;
    left: 67px;
    background: #000;
    z-index: 8;
    transform: rotate(5deg);
}

.christmas #hat-rim:before,
.christmas #hat-rim:after {
    height: 75px;
    width: 10px;
    border-radius: 5px;
    top: -75px;
    background: #aaf;
}

.christmas #hat-rim:before {
    left: 7px;
    border-radius: 0 10px 0 0/0 75px 0 0;
}

.christmas #hat-rim:after {
    right: 9px;
    border-radius: 10px 0 0 0/75px 0 0 0;
}

.christmas #face {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: #fff;
    top: 75px;
    left: 75px;
    z-index: 5;
}

.christmas #eyes {
    height: 20px;
    width: 10px;
    background: #000;
    border-radius: 50%;
    z-index: 9;
    top: 27px;
    left: 30px;
    box-shadow: 30px 0 #000;
}

.christmas #eyes:before,
.christmas #eyes:after {
    width: 2px;
    height: 2px;
    background: #fff;
    top: 6px;
    border-radius: 50%;
}

.christmas #eyes:before {
    left: 6px;
}

.christmas #eyes:after {
    left: 36px;
}

.christmas #nose {
    width: 0;
    height: 0;
    border-right:  50px solid #ff9600;
    border-bottom: 12px solid transparent;
    border-top: 12px solid transparent;
    border-radius: 50%;
    top: 45px;
    left: 10px;
}

.christmas #mouth,
.christmas #mouth:after,
.christmas #mouth:before,
.christmas #mouth-part,
.christmas #mouth-part:before {
    border-radius: 50%;
    width: 4px;
    height: 4px;
    background: #000;
}

.christmas #mouth {
    top: 80px;
    left: 45px;
}

.christmas #mouth:after {
    left: -9px;
    top: -6px;
}

.christmas #mouth:before {
    left: 10px;
    top: -2px;
}

.christmas #mouth-part {
    left: 64px;
    top: 74px;
}

.christmas #mouth-part:before {
    left: 8px;
    top: -8px;
}

.christmas #scarf {
    width: 110px;
    height: 40px;
    border-radius: 50%;
    background: #ff0a0e;
    left: 70px;
    top: 155px;
    z-index: 4;
}

.christmas #scarf:before {
    right: 10px;
    top: 10px;
    width: 30px;
    height: 80px;
    background: #ff0a0e;
    transform: rotate(-5deg);
}

.christmas .snowman .shoulders {
    position: absolute;
    top: 175px;
    left: 25px;
    width: 200px;
    height: 75px;
    background: #fff;
    z-index: 3;
    border-radius: 100px 100px 0 0/75px 75px 0 0;
}

.christmas .snowman .shoulders:before,
.christmas .snowman .shoulders:after {
    width: 20px;
    background: #000;
    left: 90px;
    height: 20px;
    border-radius: 10px;
}

.christmas .snowman  .shoulders:before {
    bottom: 6px;
}

.christmas .snowman .shoulders:after {
    bottom: 36px;
}

.christmas #eyes:before,
.christmas #eyes:after,
.christmas #nose,
.christmas #mouth:after,
.christmas #mouth:before,
.christmas #mouth-part,
.christmas #mouth-part:before,
.christmas #eyes:before,
.christmas #eyes:after {
    transition: .2s;
}

.christmas .snowman:active #mouth:after,
.christmas .snowman:active #mouth:before,
.christmas .snowman:active #mouth-part:before {
    top: 0;
    left: 0;
    opacity: 0;
    transition: left 0.2s,top 0.2s,opacity 0s 0.2s;
}

.christmas .snowman:active #mouth-part {
    top: 80px;
    left: 45px;
    transition: 0.2s;
}

.christmas .snowman:active #mouth {
    left: 43px;
    top: 78px;
    width: 8px;
    height: 8px;
    transition: 0.2s 0.1s;
}

.christmas .snowman:active #nose {
    transform: rotate(-540deg);
    transition: 0.2s;
    top: 200px;
}

.christmas .snowman:active #eyes:before,
.christmas .snowman:active #eyes:after {
    top: 16px;
    transition: 0.2s;
}

.christmas .snowman:active #eyes:before {
    left: 4px;
}

.christmas .snowman:active #eyes:after {
    left: 33px;
}

/*== END SNOWMAN CSS ====*/

/*== SNOWFLAKE CSS ====*/

.christmas .snowflake > div,
.christmas .snowflake div:after,
.christmas .snowflake div:before,
.christmas #main-flake > div {
    background: #fff;
}

.christmas #main-flake {
    width: 4px;
    height: 200px;
    top: 25px;
    left: 123px;
    z-index: 2;
}

.christmas #main-flake:after,
.christmas #main-flake:before {
    height: 200px;
    width: 4px;
    top: 0;
    left: 0;
}

.christmas #main-flake:before,
.christmas #first-diagonal {
    transform: rotate(60deg);
}

.christmas #main-flake:after {
    transform: rotate(120deg);
}

.christmas #main-flake > div {
    width: 4px;
    height: 40px;
}

.christmas #vertical-bar {
    top: 30px;
    left: -51px;
    z-index: 3;
    box-shadow: 102px 0 #fff,0 100px #fff,102px 100px #fff;
}

.christmas #first-diagonal {
    top: 60px;
    left: -68px;
    z-index: 4;
    box-shadow: 103px -100px #fff,0 -100px #fff,104px 0px #fff;
}

.christmas #second-diagonal {
    top: 11px;
    left: -17px;
    transform: rotate(300deg);
    z-index: 5;
    background: black;
    box-shadow: 0 100px #fff,-104px 100px #fff,-102px 0 #fff;
}

.christmas #main-flake,
.christmas #main-flake:active {
    transition: 1.5s;
}

.christmas #main-flake:active,
.christmas .snowflake:active #main-flake {
    opacity: 0;
}

/*== END SNOWFLAKE CSS ====*/

This website uses cookies to deliver the best experience whilst browsing. More info

Accept