Home Web Desain CSS CSS Text Effect Transparan

CSS Text Effect Transparan

Kali ini saya membuat tulisan dengan efek transparan dengan kode HTML dan CSS. Hanya dengan HTML dan CSS kita dapat membuat text effect yang bisa dibilang kekinian sebenarnya yan saya buat kali ini hanya dasar, anda bisa mengembangkan sendiri dengan kode yang ada ditutorial ini.

PERSIAPAN

Buatlah folder text effect untuk menyimpan file index.html dan style.css

Siapkan text editor yang biasa anda gunakan.

MEMBUAT HALAMAN UTAMA

Tulislah kode html berikut dan simpan file dengan nama index.html

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Cutout Text Effect</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1>Here is some text</h1>
      </div>
    </div>
  </div>
</div>
<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="second">Here is some text</h1>
      </div>
    </div>
  </div>
</div>
</body>
</html>

 

Tampilan dari kode diatas adalah sebagai berikut.

Selanjutnya kita buat file baru dan tuliskan kode css berikut ini. Lalu buat folder css lalu simpan kode css ini di dalam folder css dengan nama style.css

.jumbotron {
  background: url('image.jpg');
  background-size: cover;
  text-align: center;
}
h1 {
  font-size: 4em;
  background-color: black;
  padding: 1em;
  color: white;
  mix-blend-mode: multiply;
  display: inline-block;
}
h1.second {
  font-size: 4em;
  background-color: white;
  padding: 1em;
  color: black;
  mix-blend-mode: screen;
  display: inline-block;
}

 

Maka setelah semua kode sudah ditulis buka file index.html dengan browser tampilan nya akan seperti berikut:

Nah sekarang anda sudah berhasil membuat text effect yang keren. Selamat belajar.

Terima Kasih telah membaca.

***PIU***

 

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here