Show DevBest Geometric Parrot

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
I saw a neat little illustration on Dribbble and wanted to code it up in CSS form. This is my result... would be a lot smoother if I spent more time on it but I knocked it up in about 10 minutes so it's only a quick one.

I've always wanted to do an illustration>CSS mock up but never found one that looks simple enough until this one

I wanted to do it with as little divs as I could. I managed 3:
  1. The main parrot body container which is the blue/off-purple background
  2. The head which is the circular part split in 2 (pink part is ::before, yellow part is ::after. The head div also has an box-shadow to create the curvature on the parrot's body
  3. And the eye which is originally pink but has a white box-shadow to match the design. It also has an ::after to make the bottom part of the yellow beak seem transparent

:
IKyswM2VlZD3.png


:
moagsHOtkZD3.png


CSS:
PHP:
.parrot {
    height: 200px;
    width: 200px;
    background-color: #323656;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

    .head {
        position: absolute;
        top: 20px; right: 7px;
        height: 110px;
        width: 110px;
        border-radius: 50%;
        overflow: hidden;
        transform: rotate(45deg);
        box-shadow: 70px -76px 0 20px #f8f6f4;
        border: none;
    }

    .head::before {
        background-color: #ff587a;
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        content: '';
        display: block;
    }

    .head::after {
        background-color: #ffca78;
        position: absolute;
        top: 0; left: calc(50% - 1px);
        width: 100%;
        height: 100%;
        content: '';
        display: block;
    }

    .eye {
        position: absolute;
        height: 15px;
        width: 15px;
        top: 27px; left: 25px;
        box-shadow: 0 0 0 8px #fff;
        background-color: #ff587a;
        border-radius: 50%;
    }

    .eye::after {
        background-color: #f8f6f4;
        height: 110px;
        width: 110px;
        position: absolute;
        border-radius: 50%;
        z-index: 2;
        top: 25px; left: 30px;
        content: '';
        display: block;
    }

body {
    background-color: #f8f6f4;
    margin: 0;
    position: relative;
    height: 100vh;
}

.bird-cage {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

HTML:
PHP:
<div class="bird-cage">
    <div class="parrot">
        <div class="head">
            <div class="eye"></div>
        </div>
    </div>
</div>

Thoughts? And how would you have done it differently in order to curve out the body.
 

Users who are viewing this thread

Top