Skip to content

Instantly share code, notes, and snippets.

@j6k4m8

j6k4m8/shanatova.html

Created September 15, 2015 16:28
Show Gist options
  • Save j6k4m8/0c351dc7b06bcd117d00 to your computer and use it in GitHub Desktop.
Save j6k4m8/0c351dc7b06bcd117d00 to your computer and use it in GitHub Desktop.
Download ZIP
apples and honey in pure CSS.
Raw
shanatova.html
<html>
<head>
<style media="screen">
* {
box-sizing: border-box;
}
html, body {
background: beige;
}
.apple {
border-left: 2em solid red;
height: 10em;
border-bottom-left-radius: 12em;
border-top-left-radius: 12em;
background-color: orange;
width: 4.5em;
box-shadow: 0 0 10px black;
transform: rotateZ(-14deg);
}
.apple:after {
content: "''";
position: absolute;
font-family: sans-serif;
font-weight: bolder;
letter-spacing: .3em;
color: brown;
font-size: 1.5em;
text-shadow: 0 3px 4px white;
left: .9rem;
top: 4rem;
transform: rotateZ(89deg);
}
.apple-position {
position: absolute;
left: 3em;
top: 3em;
z-index: 99;
}
.ref-apple-position {
position: absolute;
left: 3em;
top: 13em;
z-index: 99;
}
.honey {
border-radius: 50%;
background-color: #cea122;
border-bottom: 7em solid #bebebe;
border-left: 1em solid #bcbcbc;
border-right: 1em solid #bcbcbc;
border-top: 0.5em solid #cecece;
width: 21em;
height: 17em;
transform: rotateX(75deg);
}
.honey-position {
position: absolute;
top: 6.5em;
left: 2em;
}
.ref {
height: 2em;
width: 10em;
overflow-y: hidden;
}
.ref .apple {
transform: rotateZ(14deg);
opacity: 0.2;
}
</style>
</head>
<body>
<div class="page">
<div class="apple apple-position"></div>
<div class="ref ref-apple-position">
<div class="apple"></div>
</div>
<div class="honey honey-position"></div>
</div>
</body>
</html>
@j6k4m8
Copy link
Author

j6k4m8 commented Sep 15, 2015

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment