Bootstrap으로 Reddit 스타일 그림 카드 만들기

개요

Reddit의 첫 페이지 상단에 있는 작은 사진 제목을 본 적이 있습니까? 나는 이것들의 모양을 정말 좋아하므로 내 프로젝트에 대한 링크를 위해 내 사이트에 비슷한 것을 구축하기로 결정했습니다. 그들은 단지 하나의 링크만 할 수 있도록 하기 때문에 이것에 아주 완벽하지는 않지만 내 프로젝트 중 어느 것도 현재 호스팅되지 않으므로(구직 활동이 아님) 이것은 나에게 큰 문제가 아닙니다.

내 사이트에서 작동하도록 디자인을 몇 가지 변경했습니다. 내 사이트에서 Bootstrap(현재 4.5.0)을 사용하고 있으므로 이를 사용할 수 있도록 만들고 싶었습니다. 또한 상자 그림자를 조금 더 갖고 마우스를 가져가면 클릭할 수 있고 반응이 좋은지 확인하기 위해 상자 그림자를 늘리고 싶었습니다.

튜토리얼/설명을 건너뛰고 싶다면 여기here에서 전체 예제를 찾을 수 있습니다. 내 웹사이트에서 버전을 볼 수도 있습니다here.

HTML

다음은 내가 생각해낸 HTML 개요입니다.

<section class="container-flex" id="projects">
    <div class="row">
        <a href="#" target="_blank" class="col-md-4 col-lg-3 col-12 project-card-wrapper">
            <div class="col-12 project-card">
                <div class="project-card-content">
                    <h4>
                        <b>
                            Project Name
                        </b>
                    </h4>
                    <p>
                        Short description
                    </p>
                </div>
            </div>
        </a>
    </div>
</section>

전체 너비 컨테이너 내부의 행에 타일이 있는 단순한 디자인입니다. 이것은 필요에 따라 완전히 임의의 수의 타일을 래핑할 수 있게 해주기 때문에 정말 잘 작동합니다. 또한 Bootstrap 클래스를 사용하여 열의 크기를 반응형으로 조정할 수 있도록 했습니다. Bootstrap의 카드와 카드 레이아웃 옵션을 사용하는 것을 고려했지만 Bootstrap 자체가 말했듯이 이러한 레이아웃 옵션은 아직 반응하지 않습니다. 각 열에는 내용이 포함된 col-12 열이 있습니다. 이렇게 하면 카드 사이에 일정한 간격을 둘 수 있습니다.

CSS

그라디언트를 추가하기 위해 사진을 편집하거나 읽을 수 없는 텍스트를 참지 않고 이 효과를 만들려면 이미지 위에 몇 가지 항목을 레이어링해야 합니다. Reddit은 요소의 배경으로 실제 이미지를 사용하고::before pseudo 요소의 배경 이미지로 부분적으로 투명한 그라디언트를 사용하여 이 작업을 수행했으며 몇 가지 작은 조정으로 동일한 작업을 수행했습니다. 스타일을 더 잘 이해하려면 아래 스타일에 대한 전체 분석이 있습니다.

섹션 요소

이러한 스타일 중 어느 것도 필수는 아니지만 보기 좋게 만드는 데 도움이 됩니다.

#projects {
    padding:5%;
    background-color: #DAE0E6;
}

외부 열

이것은 단순히 줄 바꿈할 때 열 사이에 세로 간격이 있는지 확인합니다. 한 가지는 행이 처리하지 않는 것입니다.

.project-card-wrapper {
   margin: 3% 0%;
}

내부 칼럼

::before 의사 요소에 대한 스타일 지정. 다양한 투명도를 가진 검정색으로 구성된 간단한 그라데이션을 배경으로 사용합니다.

.project-card::before {
    background-image: linear-gradient(0deg, #000, rgba(0, 0, 0, .8) 25%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .4) 75%, rgba(0, 0, 0, .2));
    background-position: center;
    content: "";
    border-radius: 8px;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

카드 자체를 위한 스타일링. 배경에서 눈에 띄도록 작은 상자 그림자를 정의했습니다. 그렇지 않으면 카드의 형식이 잘못되기 때문에 최소 너비와 높이를 정의해야 합니다(배경 이미지 없음).

.project-card {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    margin-top: 2%;
    background: rgb(255, 255, 255) url(YOUR_IMAGE_URL) no-repeat scroll left center / cover; 
    min-width: 12em;
    min-height: 15em;
    border-radius: 8px;
}

클릭할 수 있음을 분명히 하기 위해 마우스를 가져가면 상자 그림자가 약간 증가합니다.

.project-card:hover {
    box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.5), 0 4px 20px 0 rgba(0, 0, 0, 0.49);
}

카드 내용

텍스트를 올바른 위치에 배치하고 배경에 대해 눈에 띄게 하는 간단한 스타일.

.project-card-content {
    color: white;
    opacity: 1;
    position: absolute; 
    bottom: 0px;
}