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
-
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