하, 바브, 차

이 세상에 이클라를 좋아하는 모든 사람들에게 정말 알려주고 싶어요.

이 키타의 보도에는 모두를 포로로 잡은 금단된 연어의 식단이 있다.
이것은 맛없어 보여서 이미 먹을 수 없다
HTML과 CSS로만 이크라를 재현했기 때문에 전국의 이크라를 좋아해야 합니다.
이클라를 사랑하는 사람들, 이클라를 증오하는 사람들, 모든 이클라 관계자에게 전달

삽화식 연어를 만들었어요.

이클라의 식단

HTML 준비

이크라의 틀을 만들다

<div class="container">
  <div class="ikura">
    <div class="ikura_inner">
      <div class="ikura_luster">
        <div class="ikura_lusterInner"></div>
      </div>
    </div>
  </div>
</div>

스타일시트 준비

이크라에게 목숨을 바칩시다.
우선 적당히 색을 칠하세요.

왠지 불안하네.
이클라의 색깔은 장소에 따라 옅은 곳과 짙은 색이 있어요.
우리 linear-gradient로 그곳을 재현합시다.

.ikura {
  background: linear-gradient(#D83F28, #FB8B00 95%);
  &_inner {
    background: rgba(246, 74, 7, 0.5);
  }
}

약간 이클라감 있어요.
다만, 아무래도 삽화감이 있는 것 같아.
바깥쪽 연어의 색깔과 안쪽 연어의 색깔의 경계선이 바삭바삭해졌기 때문이다
box-shadow로 경계선을 흐리게 하는 느낌으로 하자.

.ikura_inner {
  box-shadow: 5px 5px 10px 0px rgba(246, 74, 7, 0.5);
}

약간 부드러운 인상을 준다.
마지막으로 흰색 광택의 부분에 약간의 음영을 더하면 더욱 가깝다.

.ikura_luster {
  background: #fff;
  box-shadow: -7px 2px 7px 11px #DA8151;
}

여보세요, 여보세요!찰리!!!
마지막으로 전체 scss를 잘 놓으세요.(더러운 건 좀 미안해)

.ikura {
  background: $ikura;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  transform-style: preserve-3d;
  perspective-origin: 0% 50%;
  &_inner {
    background: rgba(246, 74, 7, 0.5);
    box-shadow: 5px 5px 10px 0px rgba(246, 74, 7, 0.5);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    transform: translateX(5px) translateY(3px);
  }
  &_luster {
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 30px;
    margin: auto;
    transform: translateX(-70%) translateY(90%) rotate(-40deg);
    box-shadow: -7px 2px 7px 11px #DA8151;
    position: relative;
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 30px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      transform: rotate(118deg);
      right: -6px;
      top: -4px;
    }
  }
}

끝내다

카레 내일부터 ()