How to merge CSS? 🤷🏽‍♂️

[Praizee]

[Battle #21] (https://cssbattle.dev/battle/21)#129
. Letter B

I started CSS a few months ago and I'm excited to participate in these challenges.
By the way, I've been using Photoshop...
The question now is HOW CAN I GROUP MY CSS like in Photoshop?
From the image attached, I've been able to perfectly replicate the first letter B with color #060F55
I'm trying to work on the others but I'm having issues with the arrangements.

Please help!
Thanks

[Omnia89]

``What do you mean by "group" CSS?

I don't use Photoshop, but the input of CSS battle is plain text, so there isn't any advanced feature (other than code hinting and highlighting)

The only "grouping" you can do in CSS is to declare a set of rule for multiple element, like this

<a></a>
<b></b>
<style>
    a,b {      <---- here we are declaring both elements
      border: 2px solid black;
   }
</style>

[Praizee]

Thanks for your response.
I mean is there anyway to select the whole letter/shape and duplicate it?

[Omnia89]

not really, the best you can do is something like this https://jsfiddle.net/wy8r2e3m/

You recreate the html structure, and then you assing the same rule, plus one with the difference (like color and position)

[Praizee]

Okay 👌
Thanks for your help!

[Athylla-GIT]

Thanks for your response. I mean is there anyway to select the whole letter/shape and duplicate it?

Alternatively, you can use -webkit-box-reflect to duplicate (reflect) elements
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect

Even better is to use one of the most used properties of CSS battle ( Box-shadow) to duplicate elements innumerous times, try code below on #129 to see it in action:

 <div>
<style>
  div {
    margin:80px 102px;
    width: 100px;
    height: 80px;
    background:#060F55;
    border-radius:0 40px 40px 0;
    box-shadow:40px 0px 0px #2E3B9F,
               80px 0px 0px #515DBD
  }
  body{
background:#6592CF
  }
</style>

`

[Praizee]

Thanks so much for your help! I think this better answers my 'funny' question 😅 I'll try it ASAP Thanks again

…

On Tue, Oct 18, 2022 at 10:43 AM Athylla ***@***.***> wrote: my html is been remove from code section so see here <https://jsfiddle.net/athylla/7uvwfsja/> for working example 👍 — Reply to this email directly, view it on GitHub <#318 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVJFONX73RHGJDGRGIHEIK3WDZWKLANCNFSM6AAAAAAQ6WM7HQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>