1

Тема: CSS Battle

Після знайомства з cssbattle.dev захотів пройти кілька прикладів. Ділюсь результатами.

Battle #1

https://cssbattle.dev/targets/1.png
#1 - Simply Square

розвязок
<style>
    * {
        background: #5d3a3a;
    }
    body {
        background: #b5e0ba;
        width: 200px;
        height: 200px;
        margin: 0;
    }
</style>

https://cssbattle.dev/targets/2.png
#2 - Carrom

розвязок
<style>
    body {
        background: #fdc57b;
        background-position: 50px 50px;
        background-size: 100vw 100vh;
        background-image:
            repeating-linear-gradient(
                to right,
                transparent 0,
                transparent 50px,
                #62374e 50px,
                #62374e 250px
            ),
            repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent 50px,
                #62374e 50px,
                #62374e 150px
            );
    }
</style>

https://cssbattle.dev/targets/3.png
#3 - Push Button

розвязок
<style>
    body {
        background: #6592CF;
        background-size: 300px 300px;
        background-repeat: no-repeat;
        background-position: 50px 0;
        background-image:
            linear-gradient(
                to bottom,
                #6592CF 75px,
                transparent 75px,
                transparent 225px,
                #6592CF 225px
            ),
            radial-gradient(
                closest-side,
                #EEB850 25px,
                #243D83 25px,
                #243D83 75px,
                #6592CF 75px,
                #6592CF 125px,
                #243D83 125px
            );
    }
</style>

https://cssbattle.dev/targets/4.png
#4 - Ups n Downs

розвязок
<div></div>
<div></div>
<div></div>
<style>
    body {
        background: #62306D;
        margin: 50px;
        display: flex;
    }
    div {
        width: 100px;
        height: 200px;
        border-radius: 50px;
        background: #F7EC7D
            linear-gradient(
                to bottom,
                #62306D 100px,
                #F7EC7D 100px
            );
    }
    :nth-child(odd) {
        transform: scaleY(-1);
    }
</style>

https://cssbattle.dev/targets/5.png
#5 - Acid Rain

розвязок
<main><div></div></main>
<style>
    body {
        background: #0B2429;
        margin: 30px;
    }
    main {
        width: 240px;
        height: 240px;
        margin: auto;
        border-radius: 60px;
        overflow: hidden;
    }
    div {
        background: #F3AC3C;
        position: relative;
        width: 50%;
        height: 50%;
        top: 50%;
        border-radius: 50% 0;
        box-shadow: 60px -60px #998235,
            120px -120px #F3AC3C;
    }
</style>

https://cssbattle.dev/targets/6.png
#6 - Missing Slice

розвязок
<div></div>
<style>
    body {
        background: #E3516E;
    }
    div {
        width: 200px;
        height: 200px;
        margin: 50px auto;
        border-radius: 50%;
        background-image:
            conic-gradient(
                #FADE8B 90deg,
                #E3516E 90deg,
                #E3516E 180deg,
                #F7F3D7 180deg,
                #F7F3D7 270deg,
                #51B5A9 270deg
            );
    }
</style>

https://cssbattle.dev/targets/7.png
#7 - Leafy Trail

розвязок
<style>
    * {
        background: #0B2429;
    }
    body {
        background: #F3AC3C;
        margin: 75px;
        position: relative;
        width: 150px;
        height: 50%;
        left: 100px;
        border-radius: 100px 0;
        box-shadow:
            -50px 0 #998235,
            -100px 0 #1A4341;
    }
</style>

https://cssbattle.dev/targets/8.png
#8 - Forking Crazy

розвязок
<style>
    * {
        background: #6592CF;
    }
    body {
        background: #060F55;
        height: 140px;
        margin: 110px 130px 50px 130px;
        border-radius: 0 0 50% 50%;
    }
    body::before {
        content: '';
        position: relative;
        display: block;
        background: #060F55;
        width: 20px;
        height: 110px;
        margin: auto;
        top: 90px;
        border-radius: 10px;
        box-shadow:
            -60px -150px #060F55,
            -40px -150px #6592CF,
            -20px -150px #060F55,
              0px -150px #6592CF,
             20px -150px #060F55,
             40px -150px #6592CF,
             60px -150px #060F55;
    }
</style>

https://cssbattle.dev/targets/9.png
#9 - Tesseract

розвязок
<div></div>
<style>
    body {
        background:
            linear-gradient(
                to bottom,
                #222730 75px,
                #4CAAB3 75px,
                #4CAAB3 225px,
                #222730 225px
            );
        margin: 25px auto;
    }
    div {
        background:
            radial-gradient(
                closest-side,
                #393E46 25px,
                #4CAAB3 25px
            );
        border: #222730 solid 50px;
        height: 150px;
        margin: 0 75px;
        transform: rotate(45deg);
    }
</style>

https://cssbattle.dev/targets/10.png
#10 - Cloaked Spirits

розвязок
<div></div>
<div></div>
<div></div>
<style>
    body {
        background: #62306D;
        margin: 50px;
        display: flex;
    }
    div {
        background: #AA445F;
        width: 60px;
        height: 60px;
        position: relative;
        border: 20px solid #E38F66;
        border-radius: 50%;
    }
    div:nth-child(odd) {
        background: #E38F66;
        border-color: #AA445F;
        top: 100px;
    }
    div::before {
        background: #F7EC7D;
        content: '';
        width: 100px;
        height: 200px;
        top: 50%;
        left: -20px;
        position: absolute;
        z-index: -1;
    }
</style>

https://cssbattle.dev/targets/11.png
#11 - Eye of Sauron

розвязок
<div></div>
<div></div>
<style>
    body {
        background:
            radial-gradient(
                closest-side,
                #84271C 25px,
                #191210 25px,
                #191210 50px,
                #ECA03D 50px,
                #ECA03D 70px,
                #191210 70px
            );
        background-size: 300px 300px;
        background-position: 50px 0;
        margin: 50px 0;
        display: flex;
    }
    div {
        border: 20px solid transparent;
        border-top-color: #ECA03D;
        border-left-color: #ECA03D;
        border-radius: 50%;
        margin: 50px;
        width: 60px;
        transform: rotate(45deg);
    }
    div:first-child {
        transform: rotate(225deg);
    }
</style>

https://cssbattle.dev/targets/12.png
#12 - Wiggly Moustache

розвязок
<div></div>
<div></div>
<div></div>
<style>
    body {
        background: #F5D6B4;
        margin: 110px 80px;
        display: flex;
    }
    body::before, body::after {
        content: '';
        background: #D86F45;
        position: relative;
        width: 20px;
        height: 20px;
        top: 40px;
        margin: -10px;
        border-radius: 50%;
    }
    div {
        border: 20px solid transparent;
        border-top-color: #D86F45;
        border-left-color: #D86F45;
        border-radius: 50%;
        margin: -10px;
        width: 60px;
        transform: rotate(45deg);
    }
    div:nth-child(odd) {
        transform: rotate(225deg);
    }
</style>

2

Re: CSS Battle

leofun01 написав:

https://cssbattle.dev/targets/9.png
#9 - Tesseract

розвязок (99.8%), щось тут не добре
<style>
    body {
        background: #222730
            linear-gradient(
                to bottom,
                transparent 75px,
                #4CAAB3 75px,
                #4CAAB3 225px,
                transparent 225px
            );
        margin: 25px auto;
    }
    body::before {
        content: '';
        background: #4CAAB3
            radial-gradient(
                closest-side,
                #393E46 25px,
                #4CAAB3 25px
            );
        display: block;
        border: #222730 solid 50px;
        width: 150px;
        height: 150px;
        margin: auto 75px;
        transform: rotate(45deg);
    }
</style>

Хто знає як порішати приклад #9, напишіть.

я б зробив спершу прямокутника синього, чи шо це за колір. Потім квадрата темного, потім ще одного синього, а потім вже коло.

3

Re: CSS Battle

FakiNyan написав:
Прихований текст
leofun01 написав:

https://cssbattle.dev/targets/9.png
#9 - Tesseract

розвязок (99.8%), щось тут не добре
<style>
    body {
        background: #222730
            linear-gradient(
                to bottom,
                transparent 75px,
                #4CAAB3 75px,
                #4CAAB3 225px,
                transparent 225px
            );
        margin: 25px auto;
    }
    body::before {
        content: '';
        background: #4CAAB3
            radial-gradient(
                closest-side,
                #393E46 25px,
                #4CAAB3 25px
            );
        display: block;
        border: #222730 solid 50px;
        width: 150px;
        height: 150px;
        margin: auto 75px;
        transform: rotate(45deg);
    }
</style>

Хто знає як порішати приклад #9, напишіть.

я б зробив спершу прямокутника синього, чи шо це за колір. Потім квадрата темного, потім ще одного синього, а потім вже коло.

Виявилося зовсім просто, треба було замінити колір для body::before

15 : -        background: #4CAAB3
15 : +        background: #222730

4

Re: CSS Battle

а код де?

5

Re: CSS Battle

FakiNyan написав:

а код де?

старий код, новий код.

6

Re: CSS Battle

linear-gradient, ну ви даєте

7

Re: CSS Battle

Battle #2

https://cssbattle.dev/targets/13.png
#13 - Totally Triangle

розвязок
<style>
    :root {
        width: 400px;
        height: 400px;
        background:
            linear-gradient(
                to bottom right,
                #F3AC3C 100px,
                #0B2429 100px
            );
        background-repeat: no-repeat;
    }
</style>

https://cssbattle.dev/targets/14.png
#14 - Web Maker Logo

розвязок
<div></div>
<div></div>
<div></div>
<div></div>
<style>
    body {
        background: #F2F2B6;
        margin: 50vh 50vw;
    }
    div {
        position: absolute;
        width: 150px;
        height: 150px;
        margin: -75px;
        margin-left: calc(var(--x) + var(--s));
        display: flex;
        transform: scaleY(var(--y));
        --s: 20px;
        --x: -140px;
        --y: -0.867;
        --c: #FF6D00;
    }
    div+div+div { --s: 0px; }
    div:nth-child(odd) {
        --x: -30px;
        --y: 0.867;
    }
    div:nth-child(2), div:nth-child(3) {
        --c: #FD4602;
    }
    div::before, div::after {
        content: '';
        width: 50%;
        background:
            linear-gradient(
                to top var(--d),
                var(--c) 50%,
                transparent 50%
            );
        --d: left;
    }
    div::after { --d: right; }
</style>

https://cssbattle.dev/targets/15.png
#15 - Overlap

розвязок
<style>
    * {
        background: #09042A;
        margin: 0;
    }
    body {
        width: 150px;
        height: 150px;
        margin: 75px;
        border-radius: 50%;
        background: #7B3F61
            radial-gradient(
                closest-side,
                #09042A 75px,
                #7B3F61 75px
            ) no-repeat;
        background-position: 100px 0;
        box-shadow: 100px 0 #E78481;
    }
</style>

https://cssbattle.dev/targets/16.png
#16 - Eye of the Tiger

розвязок
<style>
    * {
        background: #0B2429;
    }
    body {
        width: 200px;
        margin: 50px auto;
        border-radius: 50% 0;
        background-image:
            radial-gradient(
                closest-side,
                #0B2429 25px,
                #F3AC3C 25px,
                #F3AC3C 70px,
                #0B2429 70px,
                #0B2429 90px,
                #998235 90px
            );
        transform: rotate(45deg);
    }
</style>

https://cssbattle.dev/targets/17.png
#17 - Fidget Spinner

розвязок
<style>
    body {
        background: #09042A;
        margin: 140px auto;
    }
    body::before {
        content: '';
        background: #E78481;
        display: block;
        width: 20px;
        height: 20px;
        margin: auto;
        border-radius: 50%;
        box-shadow:
            -60px 0 0 20px #09042A,
             60px 0 0 20px #09042A,
            -60px 0 0 30px #E78481,
             60px 0 0 30px #E78481,
            0 -53px 0 20px #F5BB9C,
            0  53px 0 20px #F5BB9C,
            0 -53px 0 30px #09042A,
            0  53px 0 30px #09042A,
            0 0 0 30px #E78481;
    }
</style>

https://cssbattle.dev/targets/18.png
#18 - Matrix

розвязок
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<style>
    body {
        background: #5C434C;
        width: 100vw;
        margin: 0;
        column-count: 4;
        column-gap: 0;
    }
    div {
        background: #F5D6B4;
        display: inline-block;
        width: 80px;
        height: 80px;
        margin: 10px;
        border-radius: 100% 0 0 0;
    }
    div:nth-child(odd) {
        background: #F09462;
    }
</style>
Battle #3

https://cssbattle.dev/targets/19.png
#19 - Cube (99.9%)

розвязок
<div></div>
<div></div>
<div></div>
<style>
    body {
        background: #0B2429;
    }
    div {
        background: #F3AC3C;
        position: absolute;
        width: 50px;
        height: 100px;
        left: 150px;
        top: 100px;
    }
    div:nth-child(1) {
        background: #998235;
        transform: translate(-10px, -35px)
            rotate(45deg) skewY(45deg);
    }
    div:nth-child(2) {
        width: 100px;
        transform: translateY(35px)
            rotate(45deg);
    }
    div:nth-child(3) {
        background: #1A4341;
        transform: translate(60px, -35px)
            rotate(-45deg) skewY(-45deg);
    }
</style>

https://cssbattle.dev/targets/20.png
#20 - Ticket

розвязок
<div></div>
<style>
    body {
        background: #62306D;
        margin: 100px;
    }
    div {
        width: auto;
        height: 100%;
        background: #F7EC7D;
        border-right: 60px solid #E38F66;
    }
    div::after {
        content: '';
        background: #62306D;
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: -20px;
        box-shadow:
            140px   0   0 -10px #62306D,
            140px 100px 0 -10px #62306D,
            0 100px #62306D,
            200px 0 #62306D,
            200px 100px #62306D;
    }
</style>