Virtual Coffee
CSS Battle #75 – Hippo #1091
Narigo
started this conversation in
CSS Battles
CSS Battle #75 – Hippo
#1091
Replies: 4 comments 2 replies
-
Code Source – 600.07 {904}<div l></div>
<div l r></div>
<div h></div>
<div y></div>
<div y r></div>
<div s></div>
<div l n></div>
<div l n r></div>
<style>
body{background:#191919}
div {
position:absolute;
background: #FE5F55;
height: var(--h);
width: var(--w);
}
[h] {
top:75;
left:135;
border-radius:60px;
--h:150px;
--w:130px;
}
[s] {
background:#A64942;
top:145;
left:125;
border-radius:70px 70px 55px 55px;
--h:100;
--w:150;
}
[y] {
top:125;
left:160;
background:#000;
border-radius:50%;
--h:10;
--w:10;
}
[l] {
background:#000;
top:75;
left:145;
border-radius:50%;
border: 5px solid #FE5F55;
rotate:45deg;
--h:10;
--w:20;
}
[n] {
border-color: #0000;
top:170;
rotate:-45deg
}
[r] {
left:225;
transform:rotate(90deg);
}
[y]+[r] {
left:230;
}
</style> |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Neat trick for saving characters setting width and height! |
Beta Was this translation helpful? Give feedback.
-
|
Not sure whether that saved characters 😅 |
Beta Was this translation helpful? Give feedback.
-
Brute forcing CSS for the win! – 600.05 {952}<body bgcolor=#191919><p h></p><p e l></p><p e r></p><p s></p><p n l></p> <p n r></p><p i r></p><p i l></p>
<style>
[h] {
margin:75px auto;
width:130px;
height:140px;
background:#FE5F55;
border-radius:44% 44% 0 0;
}
[e],[n],[i] {
background:#000000;
position:absolute;
border-radius:50%;
}
[e] {
top:54px;
height:20px;
width:10px;
border:5px solid #FE5F55;
z-index:-1;
}
[e][l] {
rotate:-45deg;
left:150px;
}
[e][r] {
rotate:45deg;
right:150px;
}
[n] {
top:51.3%;
width:31px;
height:20px;
}
[n][r] {
right:36%;
rotate:45deg;
}
[n][l] {
left:36%;
rotate:-45deg;
}
[i] {
height:10px;
width:10px;
top:36.2%;
}
[i][r] {
right:40%;
}
[i][l] {
left:40%;
}
[s] {
margin:-145px auto;
height:100px;
width:150px;
border-radius:55px 55px 45px 45px;
background:#A64942;
}
</style> |
Beta Was this translation helpful? Give feedback.
0 replies
-
594.46 {867}<p h><p m><p e>
<style>
*{
background:#191919;
}
p{
position:relative;
}
[h]{
left:128;
top:66;
width: 130;
height: 100;
background: #FE5F55;
border-radius: 60px 60px 0 0;
}
[h]::before,[h]::after{
content:'';
position:absolute;
width:20;
height:10;
border: 5px solid #FE5F55;
border-radius:50%;
}
[h]::before{
rotate:45deg;
left:10;
top:1;
}
[h]::after{
rotate:135deg;
right:14;
}
[m]{
background:#A64942;
width: 150;
height: 100;
top:21;
left:118;
border-radius: 55px 55px 45px 45px;
}
[m]::before,[m]::after{
content:'';
position:absolute;
width:30;
height:20;
background:#000;
border-radius:58%;
top:25;
}
[m]::before{
rotate:45deg;
right:20;
}
[m]::after{
rotate:135deg;
left:19;
}
[e]::before,[e]::after{
content:'';
position:absolute;
width:10;
height:10;
background:#000;
border-radius:50%;
}
[e]::before{
top:-115;
left:152;
}
[e]::after{
top:-115;
right:152 |
Beta Was this translation helpful? Give feedback.
0 replies
-
Code Source – 600 {1843} (100% match)<div g></div><div h></div><div i></div><div j></div><div a></div><div b></div><div c></div><div d></div><div e></div><div f></div>
<style>
body{
background: #191919;
margin: 0;
position: relative;
}
[a] {
position: absolute;
top: 75;
left: 135;
width: 130px;
height: 150px;
background: #FE5F55;
border-radius: 60px;
}
[b]{
position: absolute;
top: 145;
left: 125;
width: 150px;
height: 100px;
background: #A64942;
border-radius: 55px 55px 45px 45px;
}
[c]{
position: absolute;
top: 125;
left: 160;
width: 10px;
height: 10px;
background: #000000;
border-radius: 50%;
}
[d]{
position: absolute;
top: 125;
left: 230;
width: 10px;
height: 10px;
background: #000000;
border-radius: 50%;
}
[e]{
position: absolute;
top: 165;
left: 230;
width: 20px;
height: 30px;
background: #000000;
border-radius: 50%;
rotate: -45deg;
}
[f]{
position: absolute;
top: 165;
left: 150;
width: 20px;
height: 30px;
background: #000000;
border-radius: 50%;
rotate: 45deg;
}
[g]{
position: absolute;
top: 70;
left: 150;
width: 20px;
height: 30px;
background: #FE5F55;
border-radius: 50%;
rotate: -45deg;
}
[h]{
position: absolute;
top: 70;
left: 230;
width: 20px;
height: 30px;
background: #FE5F55;
border-radius: 50%;
rotate: 45deg;
}
[i]{
position: absolute;
top: 75;
left: 235;
width: 10px;
height: 20px;
background: #000000;
border-radius: 50%;
rotate: 45deg;
}
[j]{
position: absolute;
top: 75;
left: 155;
width: 10px;
height: 20px;
background: #000000;
border-radius: 50%;
rotate: -45deg;
}
</style> |
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