DEV Community

Cover image for CSS Battle #2 - Carrom

CSS Battle #2 - Carrom

Olzhas Askar on June 10, 2019

It already happened to me during the first battle, but at least, I knew what was wrong. // Detect dark theme var iframe = document.getEleme...
Read full post
Collapse
 
yashptel profile image
Yash Patel • • Edited

best I can think of. 166 char.

<p><p><p><p> <style> body { display: grid; grid-template: "p p"; background: #62374e} p { margin: 42px 158px 58px 42px; width: 50px; height: 50px; background: #fdc57b
Enter fullscreen mode Exit fullscreen mode

or 147 char if space removed

<p><p><p><p><style>body{display:grid;grid-template:"p p";background:#62374e}p{margin:42px 158px 58px 42px;width:50px;height:50px;background:#fdc57b
Enter fullscreen mode Exit fullscreen mode
Collapse
 
bohemme profile image
Bohemme • • Edited

Just a few less characters (143) and other approach, but I can't think of anything more to remove, but the best results are half that number. :O

<p><p b><p a><p a b><style>*{background:#62374e;padding:21}p{background:#fdc57b;width:8;height:8;position:fixed;top:34}[a]{top:184}[b]{right:50

Collapse
 
carlverret profile image
Carl Verret • • Edited

this is actually a 135 caracters answer !
<p><p><p><p><style>body{display:grid;grid-template:"p p";background:#62374e}p{margin:42 158 58 42;width:50;height:50;background:#fdc57b

Collapse
 
ankitecd profile image
Ankit Gupta •

Tried same method as 1st one and got done in 129 chars
<i style=color:#fdc57b;box-shadow:.7in+.7in+0+.26in,3.3in+.7in+0+.26in,.7in+2.26in+0+.26in,3.3in+2.26in+0+.26in,0+0+0+5in#62374e>

Collapse
 
sssshut_up profile image
Naseer Hussain • • Edited

138 Chars

body{display:grid;grid-template:&quot;p p&quot;;background:#62374e}p{ margin:42px 158px 58px 42px;padding:25px;background:#fdc57b</p>

Collapse
 
tarishahmed profile image
Tarish Ahmed • • Edited

remove px as it is the default unit for these properties.

Collapse
 
chetanam profile image
Chetan • • Edited

How about enhanched version of @zebra with 100% match with css grid 264 char

<p></p>
<p></p>
<p></p>
<p></p>
<style>
    body {
    margin:34 50;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-column-gap:200px;
    grid-row-gap:68px;
    background:#62374e;
    }

    p {

     width:50px;
    height:50px;
    background:#fdc57b;
    }
</style>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
zebra66796773 profile image
Zebra • • Edited

Tried Grid and got 100% correct answer.

Great post!

Love the CSS battle site as well!

I've been working lightly in html/css the last few years and this is the first time I've looked up the CSS Grid feature to get this puzzle done.

PS you have to remember to scrape all the white space and carriage returns before submitting your answer, because every extra character gets you a lower score.

Tried attaching the image to this post but it's not working, here's the link:
thepracticaldev.s3.amazonaws.com/i...

Here's the code itself:
All the code is in the style tags. You leave the four div's alone.

body {
margin:50;
display:grid;
grid-template-columns:auto auto;
grid-column-gap:200px;
grid-row-gap:100px;background:#62374e;
}

div {
width:50px;
height:50px;
background:#fdc57b;
}

Collapse
 
pheeria profile image
Olzhas Askar •

This is really elegant!

Collapse
 
vsnegovik profile image
Vladimir Kashutin • • Edited

My 214 character solution

<style>html{background-size:250px 250px;background-image:linear-gradient(to right,#62374e 50px,transparent 0 100px,#62374e 100px),linear-gradient(to bottom,#62374e 50px,#fdc57b 0 100px,#62374e 0 200px,#fdc57b 50px)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tomek24 profile image
tOmek24 •

This is my 140 character solution.

<body bgcolor=#62374e><img i><img><img i><img><style>img{border:25px solid #fdc57b;margin:42;float:right}img[i]{float:none;margin-bottom:58}

Collapse
 
theredkorsar profile image
TheRedKorsar •

This is my no block solution xD (using clip-path)

<style>html{background:#62374e}body{background:#fdc57b;margin:50;clip-path:polygon(0 0,0 25%,50px 25%,50px 0,100% 0,100% 25%,100% 100%,50px 100%,50px 75%,0% 75%,0 100%,250px 100%,250px 75%,100% 75%,100% 25%,250px 25%,250px 0)}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tarishahmed profile image
Tarish Ahmed • • Edited

html and body can be replaced with:
html -> *
body -> * > *

Collapse
 
chinchang profile image
Kushagra Gour • • Edited

woah! I like your different solutions!! Thanks for sharing :) Looking forward to your next one.

Collapse
 
facihabdo profile image
Abdo Facih •

125char maximum what i can do ,i'm thinking how can possible to achieve it with 66 char wtf

<body bgcolor=#62374e style="width:50%;height:100;border:50px solid;margin:50;border-image:linear-gradient(#fdc57b,#fdc57b)">
Enter fullscreen mode Exit fullscreen mode
Collapse
 
e_xo1738 profile image
Enrique_xO •

went to 200 char without closing tags, spaces etc XD
it looks weird but it is what it is (got 100%)
gonna try something more short

.X{float:left;width:50;height:50;background:#fdc57b}

.a,.c{margin:50 100 50 50}

.b,.d{margin:50 50 50 100}

*{margin:0;background:#62374e

Collapse
 
yashbro profile image
Yash Joglekar • • Edited

Here's my 115-character solution:

<d style=color:#fdc57b;box-shadow:71q+71q+0+25px,71q+230q+0+25px,335q+71q+0+25px,335q+230q+0+25px,0+0+0+5in#62374e>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
harindradev profile image
Harindra Masna • • Edited

My 103 chars solution

<style>body{background:#62374e;margin:50;border:50px solid;border-image:linear-gradient(#fdc57b,#fdc57b
Enter fullscreen mode Exit fullscreen mode
Collapse
 
facihabdo profile image
Abdo Facih •

new score in my career 104char

<body bgcolor=#62374e style="border:50px solid;margin:50;border-image:linear-gradient(#fdc57b,#fdc57b)">
Enter fullscreen mode Exit fullscreen mode
Collapse
 
paglaparatha profile image
paglaparatha • • Edited


<b style=box-shadow:67px+67px+0+0.26in#fdc57b,67px+217px+0+0.26in#fdc57b,317px+217px+0+0.26in#fdc57b,317px+67px+0+0.26in#fdc57b,0+0+0+5in#62374e></b>

Collapse
 
tdyh profile image
Tdyh •

42 is the answer ofo Life, the Universe and Everything hahahahahah you are funny bro
I get a lot from this , thanks