Andor의 CSS B2EMO.

10882 단어 artcss
새로운 Star Wars 시리즈 Andor는 우리에게 새로운 드로이드인 B2EMO 또는 Bee를 소개했습니다. 우리는 아직 Bee를 너무 많이 보지 못했습니다. CSS와 HTML로 새로운 드로이드를 만들고 싶었습니다.

아직 그의 이미지나 제품이 많지는 않지만 온라인에서 몇 개 찾았습니다. CSS 용어로 이것은 쌓이는 사각형의 단순한 집합입니다.

액자



프레임은 흰색 테두리가 있는 큰 div입니다. 프레임 안에는 드로이드의 몸체를 만드는 div가 있습니다.

<body>

<div class="flex-container">
<div class="main">
  <div class="outer_frame">
    <div class="droid"> </div>
  </div>
</div>
</div>
</body>




.flex-container > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 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: 950px;
  height: 330px;
  border: 4px white solid;
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: row;
  background-color: #333;
}


신체



빨간색은 확장 및 수축하는 외피이고 회색은 그의 내부입니다. 나는 외부 껍질, 판, 내부를 내부라고 불렀습니다.

상단은 판과 같은 색상의 사다리꼴입니다. CSS 사다리꼴은 테두리를 사용하여 만든 사각형으로 만들어집니다. 3면은 투명하고 보여주고 싶은면은 색상이 있습니다.



        <div class="droid">
            <div class="top"></div>
            <div class="inside"></div>
            <div class="plates torso1"></div>
            <div class="inside2"></div>
            <div class="plates torso2"></div>
            <div class="inside2"> </div>        
            <div class="plates bottom"></div>       
    </div>  





.top {
    border-bottom: 35px solid var(--DarkRed);
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
        filter: drop-shadow(0 0 .5rem black);
    border-radius: 4%;
}



    .inside {
        background: linear-gradient(to right,
        var(--Gray) 33%, 
        var(--DarkGray)
        );
        height: 36px;
        width: 160px;
        border-bottom: 2px solid var(--DarkGray);
        border-right: 1px solid var(--DarkGray);
        border-left: 1px solid var(--DarkGray);
        margin-left: 20px;
        z-index: 11;
    }

        .inside2 {
        background: linear-gradient(to right,
        var(--Gray) 33%, 
        var(--DarkGray)
        );
        height: 10px;
        width: 160px;
        border: 2px solid var(--DarkGray);
        margin-left: 20px;
    }


몸은 직사각형으로 만들어졌습니다. 플레이트 div와 insides div가 번갈아 가며 나타납니다. 발은 직사각형에 가깝습니다.

마무리



이것은 방금 출시된 것을 만들 수 있는지 확인하기 위한 빠른 빌드였습니다. 방송은 일주일 전에 처음 방송했는데 짧은 시간에 뭔가 만들어낸 것 같아 기분이 좋다.

-$JarvisScript git push







크리스 자비스 | 풀스택 개발자 | 선적 서류 비치









dev.to/jarvisscript/c…


오후 18:09 - 2022년 9월 30일
Kintone 앱의 헤더를 표시하거나 숨기는 버튼 추가
CentOS 7에서 OpenLDAP 서버 설치 및 구성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage