무작위로 이미지가 전환되는 멋진 메인 비주얼 스타일 제목 만들기

소개

2020년도 아직 유행하고 있네요 「타이포그래피」
메인 비주얼의 역할에도 사용할 수 있고, 무엇보다 세련되고…
그런 이유로 뭐라고 타이포그래피도 담은 "메인 비주얼 스타일 제목"의 구현 방법을 가르치고 싶습니다!

※ 어디까지나 자신의 사이트에 통합할 때 사용한 아이디어입니다.
괜찮다면 여러분도 사용하고 있었던 것 같아요 😷
h tps : ///와 야-오메라. 기주 b. 이오/bぉg/ (여기서 사용하고 있습니다)

무작위 이미지를 제공하는 Unsplash Source

Unsplash Source는 무료 이미지 소재 사이트 Unsplash가 제공하는 이미지 API입니다.
멋진 느낌의 이미지를 제공합니다.

htps : // 그래. 그래 sp sh. 코m/

이미지를 호출하는 방법

<img src="https://source.unsplash.com/random" alt="Unsplash Source のサイトから持ってきた画像">

이것만으로 무작위 없는 느낌의 이미지를 표시할 수 있습니다.
매우 편하고 좋다! ! !

멋진 메인 비주얼 스타일 제목 만들기

그럼 본제로 옮겨, 「멋진 메인 비주얼풍 표제」를 작성해 갑시다!

실제로 예를 들어 설명해 가고 싶습니다.

작성 이미지로서는
1. 이미지 레이어를 뒤로 하여 표제 문자를 앞의 레이어로 표시
2. 이미지는 약간 흐리게 표시
3. 그 이미지 위에 반투명 블랙 레이어를 걸어 씌우다
됩니다.

코드 이미지는 다음과 같습니다.

HTML

<div class="typo-heading">
    <div class="main-visual">
        <!-- この要素に CSS で画像が入るイメージ -->
    </div>

    <h3>
        <!-- 見出しとして入れたい文字を入れる -->
    </h3>
</div>

CSS

.typo-heading {
    position: relative; /* 見出しの文字を絶対配置で指定するので使用する */
    height: 30vh; /* 30vh くらいがいい感じのサイズだったので採用 */
    width: 100%;
    padding: 16px;
    overflow: hidden; /* 画像をぼかす際に縁がぼやけるのでその対策を行う */
}

.main-visual {
    /* 画像のぼかし対策を行う */
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -10px;
    left: -10px;
    filter: blur(5px);

    /* 背景画像の指定を行う */
    background-image: url("https://source.unsplash.com/random");
    background-size: cover;
    background-position: center;
}

/* 半透明の黒レイヤーをかけて被せる
   こうするとどの画像が表示されても文字が読みやすくなる */
.main-visual::before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

/* 見出し文字
   今回は右下に配置したらいい感じになったので採用 */
.typo-heading > h3 {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    color: #FAFAFA;

    /* Google Fonts の「さわらび明朝」を採用
       個人的にはもっと太い明朝体フォントを使用したかった… */
    font-family: "Sawarabi Mincho", serif;
}

이것만으로 "멋진 메인 비주얼 스타일 제목"을 만들 수 있습니다.

동작 예

위에서도 기재했습니다만, 제 사이트에서 이 표제를 구현하고 있으므로, 만약 좋으면 액세스하고 확인을 부디!
htps : //와 야-오메라. 기주 b. 이오/bぉg/

아래에 실제 동작 예를 몇 장 붙여 둡니다 👀

요약

우연히 발견한 서비스였지만, 멋진 이미지도 많은 느낌의 표제를 구현할 수 있어 매우 만족하고 있습니다.
Unsplash Source 에서는 랜덤 중(안)에서도 유저를 지정해 표시나 키워드를 지정해 표시등의 이미지 좁히기 기능도 실장되고 있으므로 여러가지 시험해 보는 것도 좋을지도 모릅니다!
또한 좋은 서비스를 찾아 자신의 사이트에 점점 통합 해 가고 싶다 💪