Cara penggunaan Properti mix-blend-mode pada CSS

Cara penggunaan Properti mix-blend-mode pada CSS - Seperti kita ketahui bahwa properti - properti yang ada pada CSS sangat lah banyak dan tentunya mempunyai fungsi yang berbeda. Pada CSS sekarang ini kita bisa membuat efek dan animasi sederhana misalnya saja transisi, efek gradien dan yang lain nya. Nah, berikut ini saya akan bahas satu properti dari CSS yaitu mix-blend-mode.

mix-blend-mode merupakan peroperti CSS yang dapat kita manfaatkan untuk mengatur elemen agar bisa menyatu dengan background suatu yang merupakan parent element. Nilai dari properti mix-blend-mode lumayan banyak tentu ini bisa digunakan sesuai ke inginan dan kebutuhan. Berikut adalah nilai dari properti mix-blend-mode : 

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Dibawah ini akan saya praktekan bagaimana Cara penggunaan Properti mix-blend-mode pada CSS.
Sebelumnya silahkan kalian bisa menyiapkan satu gambar untuk bahan nya. Setelah itu buat satu file HTML kemudian kalian bisa ketikan kode HTML berikut.

<body>
    <div class="wrapper">
      <div class="content-text">DUMET School.</div>
    </div>
</body>

Setelah mengetikan kode HTML seperti diatas, selanjutnya kita akan coba mengaplikasikan cara penggunaan properti mix-blend-mode yang terdapat pada CSS. Silahkan kalian bisa ketikan kode CSS nya seperti berikut.

@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
body {font-family: 'Righteous', cursive;}

.wrapper {
  background-image: url("colors_leaves.jpg");
  background-size: cover;
  position: relative;
  height: 500px;
}

.content-text {
  background-color: white;
  color: black;
  font-size: 8vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 80%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Setelah semua kode HTML dan CSS telah kalian ketikan, silahkan simpan file nya kemudian kalian bisa melihat hasil akhirnya pada browser masing - masing.

Baiklah, cukup sekian pembahasan tentang Cara penggunaan Properti mix-blend-mode pada CSS. Semoga artikel ini bermanfaat selamat mencoba dan sampai jumpa di artikel selanjutnya :)

2 Juli 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat