CSS 할로윈: Eyes See You.

CSS를 사용하여 으스스한 할로윈 눈을 만들었습니다.

나는 중심 주제 주위에 외부 프레임이 있는 다른 게시물과 유사하게 시작했습니다. 에서 프레임을 볼 수 있습니다. 이 프로젝트에서는 테두리를 제거하여 눈인 피사체만 프레임이 보이지 않도록 했습니다.

<div class="flex-container">
<div class="main">
    <div class="outer_frame">
          <div class="subject">
            <div class="eyeball">
          </div>
         </div>
          <div class="subject">
            <div class="eyeball">
          </div>
         </div>
</div>
</div>

.flex-container > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background: var(--Black);
  justify-content: center;
  align-items: center; 
  position: relative;
}


.main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.outer_frame {
  width: 900px;
  height: 600px; 
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: row;
  background-color: #18321f;
}


.subject {
    display: flex;
    justify-content: center;
    overflow: visible;
    flex-direction: column;
}

눈은 구체

안구는 사각형을 원으로 바꾸는 border-radius: 50%가 있는 검은색 사각형으로 시작합니다. eyeballs 안에는 eyecolor가 있고 그 안에는 pupils가 있습니다. 모두 원 모양의 사각형입니다.

3D 효과를 주기 위해 드롭 섀도우와 박스 섀도우가 추가됩니다.

        <div class="subject">
            <div class="eyeball">

                <div class="eyecolor">
                    <div class="pupil">
                </div>
                </div>
            </div>
        </div>

        <div class="subject">
            <div class="eyeball">

                <div class="eyecolor">
                    <div class="pupil">
                </div>
                </div>
            </div>
        </div>

.eyeball {
  height: 275px;
  width: 275px;
  border-radius: 50%;
  background-color: var(--Black);

  display: flex;
  justify-content: center;
  overflow: hidden;

  filter: drop-shadow(0 0 0.75rem black);
  box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
}

.eyecolor {
  height: 175px;
  width: 175px;
  border-radius: 50%;
  margin-top: 44px; 
  background-color: #103c21;
  justify-content: center;
  overflow: hidden;

  box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);

  filter: drop-shadow(0 0 1.5rem white);

  background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
  background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);  
  background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
 background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
}

box-shadow: inset -25px -25px 40px rgba(0,0,0,.5)는 눈 색깔에 가장자리를 주기 위해 추가되어 3D 효과에 도움이 됩니다. 그러나 linear-gradient를 추가하면 화면에서 튀어나오게 됩니다. 강조 표시를 추가했습니다.

검토

이것은 재미있었다. 이전 아트 프로젝트보다 더 깊이 있는 무언가를 만들고 싶었습니다. 나는 무서운 눈을 만들 수 있다고 생각할 때까지 구체를 가지고 놀았습니다.

CSS 아트를 만들어 본 적이 있습니까? 의견에 링크를 공유하십시오.

-$JarvisScript git push

여기와 트위터에서 저를 팔로우하세요.





Chris Jarvis @HacktoberFest, CSS로 만든 표지









"CSS 할로윈: 눈이 당신을 봅니다."의해 dev.to/jarvisscript/c…


오후 14:35 - 2022년 10월 19일