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:
CSS:
HTML:
Thoughts? And how would you have done it differently in order to curve out the body.
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:
- The main parrot body container which is the blue/off-purple background
- 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
- 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
You must be registered for see links
:
You must be registered for see links
: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.
You must be registered for see links