Skip to content

Instantly share code, notes, and snippets.

@Visible-Radio

Visible-Radio/CSS_skull.html

Created October 5, 2020 21:37
Show Gist options
  • Save Visible-Radio/c18d1dae91ab71b69d1431462350e542 to your computer and use it in GitHub Desktop.
Save Visible-Radio/c18d1dae91ab71b69d1431462350e542 to your computer and use it in GitHub Desktop.
Download ZIP
CSS battle skull
Raw
CSS_skull.html
<!--
CSS Battle skull drawing.
linked to CSS battle from ZTM
watched tutorial at youtube link.
https://cssbattle.dev/play/4
https://www.youtube.com/watch?v=acNZ5RUzxdU&ab_channel=GalGur
-->
<style>
body {
display:flex;
flex-flow:column wrap;
justify-content:center;
align-items:center;
background-color:#191919;
}
.skull {
position:relative;
width: 120px;
height: 100px;
background-color: #4F77FF;
border-radius:60px 60px 10px 10px;
top:77;
display:flex;
justify-content:center;
align-items:center;
}
.jaw {
position:relative;
width:80px;
height:35px;
background-color:#4F77FF;
top:72;
border-radius:0px 0px 20px 20px;
display:flex;
justify-content:center;
align-items:flex-end;
}
.eye {
position:relative;
background-color:#191919;
height:40px;
width:40px;
border-radius:50%;
top:23px;
z-index:1;
margin-left:5;
margin-right:5;
}
.eyeball {
position:relative;
background-color:red;
height:15px;
width:15px;
border-radius:50%;
top:-11px;
right:-8px;
z-index:2;
margin-left:5;
margin-right:5;
}
.white {
position:relative;
background-color:white;
height:25px;
width:25px;
border-radius:50%;
top:8px;
right:-3px;
z-index:1;
margin-left:5;
margin-right:5;
}
.nose {
position:absolute;
background-color:#191919;
height:20px;
width:20px;
border-radius:50%;
top:176px;
z-index:1;
margin-left:5;
margin-right:5;
}
.teeth {
position:relative;
background-color:#191919;
height:10px;
width:10px;
border-radius:5px 5px 0 0;
top:0px;
z-index:1;
margin-left:2.5;
margin-right:2.5;
}
</style>
<body>
<div class="skull">
<div class="eye"><div class="white"></div><div class="eyeball"></div></div>
<div class="eye"><div class="white"></div><div class="eyeball"></div></div>
</div>
<div class="nose"></div>
<div class="jaw">
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment