I would like to reduce this code in size please

Code

Keeping it all this color: #36B8F0 and adding a border-radius, what it should be.

12px by 12px.

<div style="height: 1px; width: 1px; box-shadow: #fff 0 0,#fff 1px 0,#fff8fc 2px 0,#e3ebfa 3px 0,#e3ebfa 4px 0,#e3ebfa 5px 0,#e3ebfa 6px 0,#e3ebfa 7px 0,#e7f4fe 8px 0,#fff 9px 0,#fff 10px 0,#fff 11px 0,#fffffc 0 1px,#c1caf1 1px 1px,#38b8f0 2px 1px,#36b8f0 3px 1px,#36b8f0 4px 1px,#36b8f0 5px 1px,#36b8f0 6px 1px,#36b8f0 7px 1px,#36b8f0 8px 1px,#40c3f4 9px 1px,#d9ffff 10px 1px,#fff 11px 1px,#fddcf2 0 2px,#3bb8f0 1px 2px,#36b8f0 2px 2px,#36b8f0 3px 2px,#36b8f0 4px 2px,#36b8f0 5px 2px,#36b8f0 6px 2px,#36b8f0 7px 2px,#36b8f0 8px 2px,#36b8f0 9px 2px,#5cd1fa 10px 2px,#fff 11px 2px,#d6cdf1 0 3px,#36b8f0 1px 3px,#36b8f0 2px 3px,#36b8f0 3px 3px,#36b8f0 4px 3px,#36b8f0 5px 3px,#36b8f0 6px 3px,#36b8f0 7px 3px,#36b8f0 8px 3px,#36b8f0 9px 3px,#39c6f5 10px 3px,#fff 11px 3px,#bac6f0 0 4px,#36b8f0 1px 4px,#36b8f0 2px 4px,#36b8f0 3px 4px,#36b8f0 4px 4px,#36b8f0 5px 4px,#36b8f0 6px 4px,#36b8f0 7px 4px,#36b8f0 8px 4px,#36b8f0 9px 4px,#37bff3 10px 4px,#dff 11px 4px,#b5c6f0 0 5px,#36b8f0 1px 5px,#36b8f0 2px 5px,#36b8f0 3px 5px,#36b8f0 4px 5px,#36b8f0 5px 5px,#36b8f0 6px 5px,#36b8f0 7px 5px,#36b8f0 8px 5px,#36b8f0 9px 5px,#37bff3 10px 5px,#d9ffff 11px 5px,#b5c6f0 0 6px,#36b8f0 1px 6px,#36b8f0 2px 6px,#36b8f0 3px 6px,#36b8f0 4px 6px,#36b8f0 5px 6px,#36b8f0 6px 6px,#36b8f0 7px 6px,#36b8f0 8px 6px,#36b8f0 9px 6px,#37bff3 10px 6px,#d9ffff 11px 6px,#b5c6f0 0 7px,#36b8f0 1px 7px,#36b8f0 2px 7px,#36b8f0 3px 7px,#36b8f0 4px 7px,#36b8f0 5px 7px,#36b8f0 6px 7px,#36b8f0 7px 7px,#36b8f0 8px 7px,#36b8f0 9px 7px,#37bff3 10px 7px,#d9ffff 11px 7px,#c1c8f0 0 8px,#36b8f0 1px 8px,#36b8f0 2px 8px,#36b8f0 3px 8px,#36b8f0 4px 8px,#36b8f0 5px 8px,#36b8f0 6px 8px,#36b8f0 7px 8px,#36b8f0 8px 8px,#36b8f0 9px 8px,#38c1f4 10px 8px,#e5ffff 11px 8px,#dacef1 0 9px,#36b8f0 1px 9px,#36b8f0 2px 9px,#36b8f0 3px 9px,#36b8f0 4px 9px,#36b8f0 5px 9px,#36b8f0 6px 9px,#36b8f0 7px 9px,#36b8f0 8px 9px,#36b8f0 9px 9px,#3bc6f5 10px 9px,#fff 11px 9px,#fee4f4 0 10px,#48b8f0 1px 10px,#36b8f0 2px 10px,#36b8f0 3px 10px,#36b8f0 4px 10px,#36b8f0 5px 10px,#36b8f0 6px 10px,#36b8f0 7px 10px,#36b8f0 8px 10px,#36b8f0 9px 10px,#73d8fb 10px 10px,#fff 11px 10px,#fffffe 0 11px,#dcd5f2 1px 11px,#4ebbf0 2px 11px,#36b8f0 3px 11px,#36b8f0 4px 11px,#36b8f0 5px 11px,#36b8f0 6px 11px,#36b8f0 7px 11px,#38baf1 8px 11px,#63cdf6 9px 11px,#ebffff 10px 11px,#fff 11px 11px"></div>

Please don’t use inline styles. This is really, really hard to read.

4 Likes

Short of writing for email clients, there is absolutely never a need to write mark-up that uses inline style, and many reasons not to

The fact that doing so contributes to bloat is only one issue.

Once code is not written like it was 2 decades ago, “modern” advantages such as reduced weight can be more easily attained.

4 Likes

What, exactly, are you trying to achieve? You have a div with dimensions of 1px width and 1px height (although underneath that you have a statement of 12px by 12px). I don’t understand what the rest of your code is intended to do. What effect do you want?

1 Like

I converted an image into css, probably wasn’t a smart thing to do.

Why? There are probably much better techniques out there for accomplishing the same thing. And I don’t understand what you would like us to do with it? It sounds like you want to make it all the colour #36b8f0?

To be fair there’s some white and near-white in there too.

I am questioning the approach however. It doesn’t seem efficient to have a 1px x 1px element whose purpose is to act as something to apply box-shadow to, where the look is coming entirely from the box-shadow.

And it seems inefficient to have so much “detail” in something so small that the level of detail is likely to be missed.

For example, here is the product much zoomed in

compared to my “normal” size (I have minimum font-size 18)

OK, true, it isn’t a solid blue and maybe for those with good vision the subtlety would be appreciated.

It just seems that there must be a better way to get something approximately similar.

SVG may have been a better option.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.