Virtual Coffee
CSS Battle #175 – Evil Cat #1085
AmyShackles
started this conversation in
CSS Battles
Replies: 3 comments
-
|
Not optimized at all, but pretty okay for saying I didn't sleep! Big thanks to @meg-gutshall for the assist on the eye shape and getting the mouth to stop trying to be a horn on the back of the poor cat's head! Code Source – 595.85(99.9% match) {1175}<body bgcolor=#ED6A9D><ear l></ear><ear r></ear><h></h><div c><div i ri><p e><span></span></p><p e><span></span></p></div><div n></div></div>
<style>
body { display: flex;align-items:center;justify-content:center;}
h {
position:fixed;
top:90;
width: 180;
height: 150;
border-radius: 100%;
background: #050044;
}
ear {
position: fixed;
border:25px solid transparent;
border-bottom-color:#050044;
border-bottom-width:66;
border-left-width:30;
border-right-width:31;
rotate:28deg;
top: 35;
}
[l] {
left: 25%;
rotate:329deg;
}
[r] {
right: 25%;
}
[e] {
margin-top: 46;
width: 40;
height: 40;
background: #FFC100;
border-radius: 50% 0;
rotate: 45deg;
}
[i] {
display: flex;
justify-content:space-around;
margin: 0 31.8%;
margin-top: -1;
}
span {
height: 31;
width:10;
background: #050044;
display:flex;
margin:9% 36%;
rotate:-45deg;
border-radius: 4px / 14px;
}
[c] {
display: flex;
flex-direction:column;
width: 100vw;
}
[n] {
margin: auto;
border: 13px solid transparent;
border-top: 16px solid #ED6A9D;
rotate: 0deg;
}
</style> |
Beta Was this translation helpful? Give feedback.
0 replies
-
Code Source – 595.17 (99.9% match) {1512}<div b></div><div c></div><div a></div><div d><div e></div></div><div f></div><div g></div><div h></div><div i></div>
<style>
body{
margin: 0;
position: relative;
background: #ED6A9D;
}
[a] {
position: absolute;
width: 400px;
height: 300px;
background: radial-gradient(ellipse at 200px 165px, #050044 90px, #0000 0);
}
[b]{
position: absolute;
width: 400px;
height: 150px;
background: conic-gradient(from 121deg at 120px 65px, #050044 56deg, #0000 0)
}
[c]{
position: absolute;
width: 400px;
height: 150px;
background: conic-gradient(from 181deg at 279px 65px, #050044 56deg, #0000 0)
}
[d]{
position: absolute;
top: 185px;
left: 185px;
width: 30px;
height: 30px;
background: #0000;
overflow: hidden;
}
[e]{
position: absolute;
top: -10px;
left: 5px;
width: 20px;
height: 21px;
background: #ED6A9D;
rotate: 45deg;
}
[f]{
position: absolute;
top:130px;
left:145px;
width: 40px;
height: 40px;
background: #FFC100;
border-radius: 50% 0;
rotate: 45deg;
}
[g]{
position: absolute;
top:130px;
left:215px;
width: 40px;
height: 40px;
background: #FFC100;
border-radius: 50% 0;
rotate: 45deg;
}
[h]{
position: absolute;
top:135px;
left:160px;
width: 10px;
height: 30px;
background: #050044;
border-radius: 80%;
}
[i]{
position: absolute;
top:135px;
left:230px;
width: 10px;
height: 30px;
background: #050044;
border-radius: 80%;
}
</style> |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Wow, this one was hard!! Way to pick 'em @AmyShackles! First try – 600 {1264}<div class="ear left-ear"></div>
<div class="ear right-ear"></div>
<div class="head">
<div class="eye left-eye">
<div class="iris"></div>
</div>
<div class="eye right-eye">
<div class="iris"></div>
</div>
<div class="nose"></div>
</div>
<style>
* {
background: var(--b, #ED6A9D);
}
body, div {
display: grid;
place-items: center;
}
div {
position: absolute;
}
.ear {
width: 0;
height: 0;
border-style: solid;
border-width: 0 40px 50px;
border-color: transparent transparent #050044;
top: 81px;
}
.left-ear {
rotate: -145deg;
left: 98px;
}
.right-ear {
rotate: 145deg;
right: 98px;
}
.head {
width: 180px;
height: 150px;
border-radius: 50%;
--b: #050044;
top: 90px;
}
.eye {
width: 40px;
height: 40px;
--b: #FFC100;
border-radius: 50% 0;
rotate: 45deg;
top: 40px;
}
.left-eye {
left: 35px;
}
.right-eye {
right: 35px;
}
.iris {
width: 10px;
height: 30px;
--b: #050044;
border-radius: 50%;
rotate: -45deg;
}
.nose {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0;
border-color: #ED6A9D #050044 #050044;
bottom: 40px;
}
</style>Minified and slightly refactored – 600.62 {678}<div ear l></div><div ear r></div><div h><div e ly><div i></div></div><div e ry><div i></div></div><div n><style>*{background:var(--b,#ED6A9D);border-radius:var(--r,0%)}body,div{display:grid;place-items:center}div{position:absolute}[ear]{border-style:solid;border-width:0 40 50;border-color:transparent transparent#050044;top:81}[l]{rotate:-145deg;left:98}[r]{rotate:145deg;right:98}[h]{width:180;height:150;--b:#050044;--r:50%;top:90}[e]{width:40;height:40;--b:#FFC100;--r:50% 0;rotate:45deg;top:40}[ly]{left:35}[ry]{right:35}[i]{width:10;height:30;--b:#050044;--r:50%;rotate:-45deg}[n]{border-style:solid;border-width:15 15 0;border-color:#ED6A9D#050044#050044;--r:0;bottom:40 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Link to battle:
Let's battle! ⚔️
Copy the code block below to format your comment on the discussion thread:
What others will see:
This will result in a nice hidden bit like so:
Code Source – score {character count}
Beta Was this translation helpful? Give feedback.
All reactions