CSS Battle #42 – Baby #846

jmslynn · 2023-04-07T19:00:19Z

jmslynn
Apr 7, 2023

Link to battle:

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

Here's my code so far. Thanks for working through this with me!

<div class="hdl">
<div class="hr"></div>
<div class="e"></div>
<div class="m"></div>
</div>
<style>
  body  {
    background: #293462;
  }
  div {
  }
  .hdl {
    background: #FE5F55;
    position: absolute;
    width: 100px;
    height: 200px;
     border-radius: 100px 0px 0px 50px;
      right: 50%;
    top: 50px;
  }
.hr {
    background: #FFF1C1;
    width: 90px;
    height: 50px;
    left: 10px;
    position: relative;
  border-top-left-radius: 55px 25px;
  border-top-right-radius: 55px 25px;
  border-bottom-right-radius: 55px 25px;
  border-bottom-left-radius: 55px 25px;
        transform: rotate(-45deg);
  }
  .e {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFF1C1;
    top: 100px;
    position: relative;
  }
 
  .r {
      transform: scaleX(-1);
    left: 50%
  }
</style>

rhdeck · 2023-04-07T19:10:31Z

rhdeck
Apr 7, 2023

I got sucked in on the co-working room!

Code Source

<body class="background">
  <div id="face">
    <div class="hairs">
      <div class="hair"></div>
        <div class="hair"></div>
    <div class="eyes">
      <div class="eye" ></div>
      <div class="eye" ></div>
    </div>
      <div class="mouthContainer">
        <div class="mouth"></div>
      </div>
  </div>
<style>
  .background {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #293462;
  }
  #face {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 60px;
    width: 200px;
    height: 200px;
    background: #FE5F55;
    border-radius: 100px 100px 50px 50px;
    position: relative;
    overflow: hidden;
  }
  .eyes {
    position: absolute;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
/*     background-color: purple; */
    margin-top: 70%;
    display: flex;
    
  }
  .eye {
    width: 60px;
    height: 60px;
    background-color: #FFF1C1;
    border-radius: 50% 50% 50% 50%
  }
  .hairs {
    display: flex;
    position: absolute;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin-top: -50px
  }
  .hair {
   width: 100px;
    height: 100px;
    background-color: #FFF1C1;
    border-radius: 50% 50% 50% 50%
  }
  .mouthContainer {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin-top: 110%
  }
  .mouth {
    width: 40px;
    height: 10px; 
    border-radius: 10px 10px 10px 10px;
    background-color: #FFF1C1;
  }
</style>

</body>

0 replies

danieltott · 2023-04-07T19:33:48Z

danieltott
Apr 7, 2023
Maintainer

Here's my first pass - @sadiejay tricked me into doing it! Not too bad for 24 minutes though 😂

Edit - went from 361 to 329 by reducing a couple expressions using vars.

Positioned elements + `-webkit-box-reflect`:

<div><p><p i><p m><style>
div {
  margin: 42 192 42 92;
  --r: 25vw 0 0 50px;
  --b: #fe5f55;
  overflow: hidden;
  -webkit-box-reflect: right;
}
p {
  --r: 50%;
  width: 100;
  height: 100;
  --b: #fff1c1;
  top: -66;
}
[i] {
  width: 60;
  height: 60;
  top: 74;
  left: 20;
}
[m] {
  top: 154;
  height: 10;
  left: 80;
  --r: 5px;
}
* {
  border-radius: var(--r, 50%);
  position: absolute;
  inset: 0;
  background: var(--b, #293462);
}

Minified (329 characters)

<div><p><p i><p m><style>div{margin:42 192 42 92;--r:25vw 0 0 50px;--b:#fe5f55;overflow:hidden;-webkit-box-reflect:right}p{--r:50%;width:100;height:100;--b:#fff1c1;top:-66}[i]{width:60;height:60;top:74;left:20}[m]{top:154;height:10;left:80;--r:5px}*{border-radius:var(--r,50%);position:absolute;inset:0;background:var(--b,#293462

0 replies

Narigo · 2023-04-08T15:44:13Z

Narigo
Apr 8, 2023
Sponsor

I made this today, 573 chars without minification:

Gradients + pseudo element

<div></div>
<style>
body {
  background: #293462;
  display: grid;
  place-items: center;
}  
  div {
    background:
      radial-gradient(circle, #FFF1C1 50px, transparent 50px) 0px -200px / 50% 200%,
      radial-gradient(circle, #FFF1C1 30px, transparent 25px) 0px -80px / 50% 200%,
      #FE5F55
    ;
    border-radius: 50% 50% 50px 50px;
    width: 200px;
    height: 200px;
  }
  div::after {
    background: #FFF1C1;
    content: '';
    border-radius: 10px;
    position: absolute;
    left: 45%;
    bottom: 70px;
    height: 10px;
    width: 40px;
  }
</style>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Virtual Coffee

CSS Battle #42 – Baby #846

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Virtual Coffee

CSS Battle #42 – Baby #846

jmslynn Apr 7, 2023

Link to battle:

Copy the code block below to format your comment on the discussion thread:

What others will see:

Replies: 3 comments

rhdeck Apr 7, 2023

danieltott Apr 7, 2023 Maintainer

Narigo Apr 8, 2023 Sponsor

jmslynn
Apr 7, 2023

rhdeck
Apr 7, 2023

danieltott
Apr 7, 2023
Maintainer

Narigo
Apr 8, 2023
Sponsor