Skip to content

Instantly share code, notes, and snippets.

@jacrys

jacrys/css-jacrys.markdown

Created June 20, 2018 20:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jacrys/161e05a540381e3d9ff762328895d417 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jacrys/161e05a540381e3d9ff762328895d417 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Jacrys
Raw
css-jacrys.markdown
Raw
index.html
<div class="container">
<div class="profile">
<div class="group">
<div class="hair"></div>
<div class="ear left"></div>
<div class="ear right"></div>
<div class="fringe"></div>
<div class="face"></div>
<div class="eyebrow left"></div>
<div class="eyebrow right"></div>
<div class="eye"></div>
<div class="blush"></div>
<div class="nose"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
<div class="neck"></div>
<div class="body"></div>
<div class="arm left"></div>
<div class="hand left"></div>
<div class="pommel left"></div>
<div class="sword left"></div>
<div class="tip left"></div>
<div class="arm right"></div>
<div class="hand right"></div>
<div class="pommel right"></div>
<div class="sword right"></div>
<div class="tip right"></div>
<div class="cape"></div>
</div>
</div>
</div>
<!--<footer><p>Forked from <a href="https://codepen.io/sashatran/full/BpPdMb">CSS Girl</a> by <a href="https://codepen.io/sashatran/">@Sashatran</a>. Arms and swords are mine.</p><p>Altered some colors and a few elements from base project.</p></footer>-->
Raw
style.css
.container,
.face,
.hair,
.nose,
.ear,
.neck,
.body,
.arm,
.hand,
.sword,
.pommel,
.tip,
.crease,
.cape,
.logo,
.group,
.fringe,
.eye,
.profile-card,
.yes,
.no,
.info,
.tongue,
.profile-wrap,
.name,
.mouth,
.eyebrow, .blush {
position: absolute;
}
body {
background: #EBD8D0;
}
.container {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 200px;
height: 200px;
}
.profile {
position: relative;
width: 200px;
height: 200px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border: 2px solid #FFF;
overflow: hidden;
background: #E8E9EB;
}
.group {
left: -7px;
}
.face {
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
z-index: 20;
top: 50px;
left: 69px;
width: 80px;
height: 100px;
background: #F0BEAF;
}
.hair {
z-index: 3;
top: 30px;
left: 48px;
width: 120px;
height: 200px;
border-radius: 100px 100px 0 0;
background: #FCFCE8;
}
.hair:before, .hair:after {
position: absolute;
content: '';
}
.ear.left {
z-index: 4;
top: 86px;
left: 59px;
width: 30px;
height: 30px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background: #F0BEAF;
transform: rotate(-80deg);
-webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
}
.ear.left:before {
position: absolute;
top: 5px;
left: 4px;
content: '';
width: 20px;
height: 20px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
background: #ED8A80;
}
.ear.right {
z-index: 4;
top: 86px;
left: 127px;
width: 30px;
height: 30px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
transform: rotate(4deg);
background: #F0BEAF;
-webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
}
.ear.right:before {
position: absolute;
top: 5px;
left: 4px;
content: '';
width: 20px;
height: 20px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
background: #ED8A80;
}
.fringe {
z-index: 99;
top: 53px;
left: 90px;
width: 69px;
height: 35px;
background: #FCFCE8;
border-radius: 0 0 100px 100px;
transform: rotate(30deg);
}
.fringe:before {
position: absolute;
content: '';
top: 5px;
left: -24px;
width: 57px;
height: 50px;
background: #FCFCE8;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
transform: rotate(10deg);
}
.eyebrow.left {
z-index: 300;
top: 95px;
left: 76px;
width: 12px;
height: 2px;
transform: rotate(15deg);
background: #FCFCE8;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.eyebrow.right {
z-index: 300;
top: 95.5px;
left: 126px;
width: 12px;
height: 2px;
transform: rotate(-20deg);
background: #FCFCE8;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.eye {
z-index: 30;
top: 100px;
left: 78px;
width: 10px;
height: 10px;
background: #424B54;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
.eye:before {
position: absolute;
content: '';
left: 50px;
width: 10px;
height: 10px;
background: #424B54;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
.blush {
z-index: 999;
top: 116px;
left: 75px;
width: 10px;
height: 7px;
background: #E3879E;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
opacity: 0.4;
}
.blush:before {
position: absolute;
content: '';
left: 58px;
width: 10px;
height: 7px;
background: #E3879E;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
.nose {
z-index: 20;
top: 100px;
left: 104.7px;
width: 8px;
height: 14px;
background: #DB9B99;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
.mouth {
z-index: 20;
top: 120px;
left: 92.5px;
width: 30px;
height: 15px;
border-radius: 0 0 100px 100px;
background: #424B54;
overflow: hidden;
}
.tongue {
top: 5px;
left: 8px;
width: 30px;
height: 20px;
background: #F6828C;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
.neck {
z-index: 13;
width: 30px;
height: 30px;
background: #F0BEAF;
top: 130px;
left: 95px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
.body {
z-index: 10;
top: 150px;
left: 60px;
width: 100px;
height: 150px;
background: #E3879E;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
.arm.left {
z-index: 13;
width: 30px;
height: 100px;
background: linear-gradient(to top, #E3879E 75%, #F0BEAF 25%);
border-image: linear-gradient(to top, #DD6E8A 75%, #de714f 25%) 2/2px;
top: 145px;
left: 130px;
border-radius: 25%;
-webkit-border-radius: 25%;
-moz-border-radius: 25%;
transform: rotate(-60deg);
}
.hand.left {
z-index: 14;
width: 30px;
height: 34px;
background: #F0BEAF;
top: 152px;
left: 85px;
transform: rotate(25deg);
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
.pommel.left {
z-index: 13;
width: 40px;
height: 7px;
background: #87898C;
top: 156px;
left: 66px;
transform: rotate(-60deg);
}
.sword.left {
z-index: 13;
width: 27px;
height: 65px;
background: linear-gradient(to right, #87898C 50%, #D7D9D9 50%);
top: 110px;
left: 42px;
transform: rotate(-60deg);
}
.tip.left {
z-index: 12;
height: 19.1px;
width: 19.1px;
background: linear-gradient(to right top, #87898C 50%, #D7D9D9 50%);
top: 116.5px;
left: 17.1px;
transform: rotate(-15deg);
}
.arm.right {
z-index: 14;
width: 30px;
height: 100px;
background: linear-gradient(to top, #E3879E 75%, #F0BEAF 25%);
border-image: linear-gradient(to top, #DD6E8A 75%, #de714f 25%) 2/2px;
top: 145px;
left: 75px;
border-radius: 25%;
-webkit-border-radius: 25%;
-moz-border-radius: 25%;
transform: rotate(60deg);
}
.hand.right {
z-index: 16;
width: 30px;
height: 34px;
background: #F0BEAF;
top: 152px;
left: 119px;
transform: rotate(-25deg);
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
.pommel.right {
z-index: 16;
width: 40px;
height: 7px;
background: #87898C;
top: 156px;
left: 125px;
transform: rotate(50deg);
}
.sword.right {
z-index: 15;
width: 27px;
height: 65px;
background: linear-gradient(to left, #87898C 50%, #D7D9D9 50%);
top: 110px;
left: 150px;
transform: rotate(50deg);
}
.tip.right {
z-index: 50;
height: 19.1px;
width: 19.1px;
background: linear-gradient(to left top, #87898C 50%, #D7D9D9 50%);
top: 111.75px;
left: 180.1px;
transform: rotate(6deg);
}
.cape {
z-index: 4;
top: 148px;
left: 43px;
width: 130px;
height: 160px;
background: #E15554;
border-radius: 60px 60px 0 0;
}
.logo {
top: 10px;
left: 16px;
width: 27px;
height: 15px;
border-bottom: 20px solid #ECD688;
border-left: 23px solid transparent;
border-right: 22px solid transparent;
}
footer {
position: absolute;
bottom: 25px;
width: 100%;
}
footer>p {
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment