divclassid

CSS: Teks di atas gambar

CSS: Teks di atas gambar

divclassid's photo
divclassid
·

3 min read

Teks di atas gambar mungkin menjadi desain web yang sering kali kita jumpai. Salah satu penerapannya ada pada komponen Hero atau Jumbotron yang menampilkan informasi untuk menarik atensi pengunjung.

Tentu ada banyak cara untuk menciptakan komponen tersebut. Di artikel ini saya coba menciptakannya dengan cara termudah yang saya pahami.

Sebelum mulai, berikut saya lampirkan kode latihan jika kamu ingin sambil mempraktikkannya:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teks di atas gambar | divClassId</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header class="hero">
    <div class="hero__text">
      <h1>divClassId</h1>
      <p>Belajar HTML, CSS, dan JavaScript.</p>
    </div>
  </header>
</body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

Untuk gambarnya kamu dapat unduh pada tautan berikut dan ubah namanya menjadi setup-pc.jpg :

https://unsplash.com/photos/Ql4Y26OsEoY

Sekarang, mari kita buat!

Hero biasanya tampil dengan gambar pada background-nya yang cenderung gelap. Tujuannya agar teks di atasnya kontras sehingga dapat terbaca.

Untuk menciptakan efek tersebut tanpa perlu mengedit gambarnya kita bisa gunakan style berikut:

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('./setup-pc.jpg');
  background-position: center;
  background-size: cover;
  height: 100%;
}
  • height: 100% ditambahkan agar tinggi elemen .hero setinggi area peramban.
  • background-size: cover ditambahkan agar rasio gambar memenuhi dan menyesuaikan dengan lebar dan tinggi elemen container-nya (yang sekarang juga seukuran area peramban). Maka dari itu, gambar yang dipakai sebaiknya beresolusi tinggi agar tidak terlihat pecah.
  • background-position: center ditambahkan agar fokus gambar yang tampil ketika area peramban diperkecil tetap berada di tengah.
  • background-image ditambahkan dengan menggunakan dua nilai, yaitu:
    • linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)): Digunakan untuk menciptakan background berwarna hitam dengan tingkat transparansi 50%. Kita perlu menggunakan fungsi CSS linear-gradient karena efek background-color hanya ditampilkan ketika gambar gagal dimuat.
    • url('./setup-pc.jpg'): Digunakan untuk menunjukkan lokasi dari gambar yang ingin ditampilkan.

Tampilan dari style di atas

Selanjutnya kita hanya perlu mengatur penempatan teksnya. Style berikut sepenuhnya merupakan preferensi pribadi dan kamu mungkin perlu mengubahnya sesuai kebutuhan.

Saya menghindari penggunaan property position agar elemen tidak keluar dari Normal Document Flow dan lebih memilih menggunakan property-property CSS Flexbox untuk mengaturnya. Berikut style yang saya gunakan untuk membuat teks tampil di tengah Hero:

.hero__text {
  align-items: center;
  color: #fcfcfc;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  text-align: center;
}
  • height: 100% ditambahkan agar tinggi elemen .hero__text setinggi elemen container-nya.
  • display: flex ditambahkan untuk mengaktifkan CSS Flexbox.
  • align-items: center dan justify-content: center ditambahkan agar elemen-elemen di dalamnya tampil di tengah, baik secara horizontal maupun vertikal.
  • flex-direction: column ditambahkan agar elemen-elemen di dalamnya disusun secara kolom (dari atas ke bawah).
  • text-align: center perlu ditambahkan agar teks tampil dengan rata tengah. Meski property ini terlihat tidak diperlukan, tetapi ketika lebar area peramban diperkecil (atau web diakses di perangkat yang lebih kecil) lalu teksnya membuat baris baru, maka akan terlihat kalau teksnya tidak benar-benar berada di tengah.

Tampilan hero dengan background gelap

Hal lainnya yang bisa kamu tambahkan pada Hero adalah efek blur pada background-nya. Untuk menciptakan efek ini kita hanya perlu menambahkan style berikut pada selector .hero__text:

.hero__text {
  /* Kode lainnya */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

Tidak seperti property filter yang efeknya akan berdampak ke seluruh elemen di dalamnya, property backdrop-filter hanya berdampak pada elemen tersebut saja. Namun, kita juga perlu menambahkan vendor prefix -webkit- karena belum semua peramban secara resmi mendukung penggunaan property ini.

Tampilan hero dengan background terblur

Hal penting lainnya yang perlu kamu tahu tentang backdrop-filter adalah bahwa peramban Firefox sama sekali belum mendukung property ini, sehingga pertimbangkan kembali jika kamu ingin menggunakannya.

Demikian pembahasan tentang teks di atas gambar. Semoga bermanfaat.

CSSWeb Development