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
Uh oh!
There was an error while loading. Please reload this page.
-
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