특정 모양으로 HTML 항목 정렬 — ellipsis-html

10051 단어 htmlwebdevcssjavascript
프런트 엔드 개발자로서 때때로 HTML 요소를 레이아웃해야 하는 경우가 있습니다. 이것의 어려움은 UI 디자이너의 상상력에 달려 있지만 일반적으로 개념과 요령을 알지 못하는 HTML의 레이아웃 항목은 상당히 어렵습니다.

You can read the updated version on bhnmzm.com


그림 1: ellipsis-html로 만든 아치 배열의 예

내 프로젝트에서 다루었고 많은 UI 디자인에서 본 가장 일반적인 비정상적인 레이아웃은 아치에 항목을 정렬하는 것입니다. 예를 들어, 반원이나 완전한 원의 경계에 배치하거나 반타원의 경계에 배치합니다. 이것을 만들기 위해서는 수학 공식과 복잡한 개념을 접해야 합니다.

좋은 소식은 바로 이 목적을 위해 미니 도구를 개발했다는 ​​것입니다. 즉, 타원 하위 집합 모양을 따라 HTML 요소를 정렬하기 위한 것입니다. ellipsis-html 이라고 이름을 지었습니다.

ellipsis-html을 사용하여 원, 반원, 타원 또는 하위 집합 모양을 따라 요소의 하위 항목을 배치할 수 있습니다. 아래 그림에서 ellipsis-html로 만든 샘플을 볼 수 있습니다.


그림 2: ellipsis-html 샘플 레이아웃

2KB에 불과하고 사용하기 쉽습니다. GitHub readme에서 필요한 것을 설명했으므로 read the readme too .

여기에서 데모를 확인하세요 😎



옵션을 변경하여 타원의 하위 집합 모양으로 요소를 정렬하고 상위 요소의 모든 위치에 배치할 수 있습니다.

다음은 그림 1에서 본 결과를 만들기 위해 작성된 코드입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ellipsis-html Sample with avatars</title>

    <!-- adding library -->
    <script src="http://unpkg.com/ellipsis-html/lib/ellipsis-html.min.js"></script>

    <style>
      body {
        background-color: #efefef;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin-top: 5rem;
      }
      .title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
      }
      .title h1 {
        margin-bottom: 0;
      }
      .title p {
        font-size: 16px;
        opacity: 0.7;
        margin-top: 0.5rem;
      }
      #avatars {
        width: 80%;
        margin: 0 auto;
        height: 80px;
        max-width: 700px;
      }
      #avatars img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        box-shadow: 1px 1px 7px 4px rgb(0 0 0 / 0.16);
      }
    </style>
  </head>
  <body>
    <div class="title">
      <h1>My Friends</h1>
      <p>with ellipsis-html</p>
    </div>
    <div id="avatars">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" />
      <img src="https://randomuser.me/api/portraits/men/6.jpg" />
      <img src="https://randomuser.me/api/portraits/women/12.jpg" />
      <img src="https://randomuser.me/api/portraits/women/5.jpg" />
      <img src="https://randomuser.me/api/portraits/women/60.jpg" />
      <img src="https://randomuser.me/api/portraits/men/11.jpg" />
      <img src="https://randomuser.me/api/portraits/women/50.jpg" />
    </div>

    <script>
      const elm = document.getElementById("avatars");
      const options = {
        type: "equal",
        size: 0.5,
        reflection: 1.5,
        rotateY: 157,
        reverse: true,
        shiftX: 0,
        shiftY: 0
      };
      const htmlArc = new EllipsisHTML(elm, options);
    </script>
  </body>
</html>

문제가 발생하면 문제로 제기하거나 프로젝트에 기여하여 직접 해결하십시오.

잊지마세요 star the repo . 다른 개발자와 마찬가지로 스타도 저에게 동기를 부여합니다. 🙃😉
eAccelerator 구성 매개변수 상세 정보
첫 번째 학자의 React×Rails 어플리케이션 개발 13회]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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