Mengedit Gambar Dalam CSS: Menggabungkan Teknik

() translation by (you can also view the original English article)

Dalam dua tutorial terakhir seri ini, kita telah mendiskusikan bagaimana filter dan blend mode dapat sepenuhnya mengubah penampilan gambar. Dalam tutorial ini, saya akan meliput hal-hal dasar editing gambar dengan menggunakan kedua properti itu bersama-sama.

Hal-hal Dasar

Editing gambar non primitif biasanya memerlukan lebih dari hanya sebuah elemen tunggal. Ini dapat dicapai dengan pseudo elemen. Sayangnya, ada lebih kerumitan. Elemen img hadir di bawah elemen yang diganti. Sebagai hasilnya, :before dan :after tidak akan berkerja dengan tag image. Untuk menyelesaikan isu ini, kita akan memerlukan sebuah pembungkus di sekitar gambar kita, dan tag figure tampaknya merupakan kandidat terbaik dalam hal ini. Oleh karena itu, markup kita harusnya tampak seperti ini:

1	<figure>
2	<img src="image-url">
3	</figure>

Semua efek editing yang akan kita buat akan memiliki core CSS yang umum.

figure {
  position: relative;
}

figure:before,
figure:after {
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Saya telah menggunakan pseudo elemen :before dan :after sehingga saya dapat menerapkan berbagai blend mode. Perhatikan bahwa saya memiliki set width dan height ke 100% untuk mengcover figure dengan benar, dan saya telah menggunakan positioning absolut untuk alignment yang sempurna.

Dalam kebanyakan kaasus, kita akan menerapkan filter pada gambar dan menggunakan blend mode dan efek lainnya pada pseudo elemen. Gambar di bawah adalah gambar original yang akan kita edit.

image of motorcycle as example for editing

Gambar Grayscale Kontras Tinggi

Untuk membuat gambar kontras tinggi, kamu dapat hanya mengatur kontras ke nilai yang lebih tinggi, namun menaikkan brightness membuat efeknya lebih dramatis. Jika kamu hanya menggunakan filter, maka itu yang dapat kamu lakukan. Bagaimana pun juga, dengan blend mode kamu juga dapat menambahkan inset box-shadow dengan overlay yang bercampur dengan gambar untuk hasil yang lebih baik. Berikut CSS untuk efek ini:

img {
  filter: contrast(1.8) brightness(1.5) grayscale(1);
}

figure:before {
  z-index: 3;
  mix-blend-mode: overlay;
  box-shadow: 0 0 200px black inset;
}

Menambahkan sebuah z-index menjaga pseudo elemen kita di atas gambar. Saya telah menggunakan blend mode overlay untuk menjaga gambar sedikit gelap setelah penerapan box-shadow.

Coba mengarahkan pada gambar di bawah untuk melihat perbedaan antara filter dan combo antara filter dan blend mode.

Untuk latihan, kamu mungkin mencoba nilai yang berbeda untuk properti box-shadow dalam demo CodePen.

Memberikan Tampilan Lebih Tua Pada Gambar

Warna dalam kebanyakan foto tua umumnya memudar, dan mereka memiliki garis luar coklat kemerahan. Untuk membuat ulang efek yang sama, kita akan menggunakan lebih banyak elemen dan filter. Berikut CSS kita:

img {
  filter: saturate(0.6);
}

figure {
  filter: contrast(1.1) saturate(1.9) sepia(0.7) grayscale(0.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 250px brown inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 150px pink inset;
  background: rgba(198, 155, 0, 0.3);
}

Kali ini, saya telah menerapkan filter pada kedua gambar dan figure. Pada dasarnya, kita ingin mengubah gambar agar kurang berwarna. Ini dicapai dengan menggunakan saturate filter dengan nilai kurang dari 1. Filter figure diterapkan setelah semua blending. Jika kamu tidak menerapkan filter ini, hasil akhirnya akan memiliki lebih banyak bayangan coklat yang menonjol, dimana ini tidak diinginkan.

Kamu harus memperhatikan bahwa saya juga menerapkan background kemerahan semi transparan pada kedua pseudo elemen. Ini memberikan gambar tampilan coklat kemerahan. Box-shadow digunakan untuk menjaga garis luar lebih coklat.

Kamu harusnya bereksperimen dengan bermacam properti di dalam demo untuk melihat jika kamu bisa mendapatkan hasil yang lebih baik.

Menambahkan Hue Spesifik

Kali ini kita akan mencoba memberikan hue biru pada gambar. Dibandingkan dengan warna hangat, menambahkan shade warna dingin seperti biru membuat gambar tampak mudah bagi mata kita.

Ini adalah CSS yang perlu kita terapkan:

img {
  filter: brightness(1.1) contrast(1.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(100, 150, 200, 1) inset, 0 0 300px rgba(100, 150, 200, 1) inset;
}

figure:after {
  z-index: 3;
  mix-blend-mode: difference;
  background: rgba(0, 0, 255, 0.3);
}

Saya mulai menaikkan brightness dan kontras gambar kita. Ini akan memastikan bahwa gambar kita tetap menonjol dan tidak datar selama editing.

Kamu umumnya harus menggunakan banyak box-shadow dengan warna yang lebih cerah untuk perubahan yang dapat dikenali. Itulah mengapa saya menambahkan dua box-shadow kebiruan pada gambar. Hanya menggunakan box-shadow melarang shade biru pada tepi gambar kita. Untuk menyebarkan warna biru ke seluruh gambar, saya menggunakannya sebagai background pada pseudo elemen :after. Berikut hasil akhir semua filter ini:

Coba tambahkan hue hijau atau merah pada gambar dalam demo.

Kabut Kekuningan

Pernahkah kamu menyaksikan senja sedikit berawan dengan partikel pasir tertahan di udara karena angin? Dalam kondisi cahaya tersebut, semuanya memiliki hue kekuningan, dan obyek tampaknya kelihatan sedikit membosankan. Untuk membuat ulang efek yang sama, kita memerlukan CSS berikut:

img {
  filter: saturate(0.2);
}

figure {
  filter: contrast(1.8) brightness(1.1) saturate(1.5);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(0,0,0,0.5) inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 500px rgba(0,0,0,0.6) inset;
  background: rgba(198, 155, 0, 0.3);
}

Hal pertama yang saya lakukan adalah mengurangi saturasi gambar. Kedua pseudo elemen :before dan :after memiliki background kekuningan tembus cahaya untuk menambahkan hue yang diinginkan. Menggunakan blend mode hard-light pada :after membuat kabut lebih menonjol.

box-shadow pada pseudo elemen meningkatkan fokus pada biker. Akhirnya, menerapkan filter contrast, brightness dan saturation pada elemen figure mengumpulkan kabut.

Di dalam demo, kamu mungkin mencoba nilai berbeda untuk berbagai properti untuk melihat bagaimana mereka mempengaruhi hasil akhir.

Pemikiran Akhir

Tidak sulit untuk mengedit gambar dalam CSS. Jika kamu berpegang pada poin-poin yang saya diskusikan dalam tutorial ini, kamu akan dapat membuat sendiri beberapa filter menakjubkan.

Untuk latihan, kamu dapat bereksperimen dengan demo dalam tutorial ini atau mencoba untuk membuat ulang filter Instagram populer. Kamu dapat juga memeriksa variasi animasi dan efek yang tersedia di Envato Marketplace dalam hal kamu memerlukan beberapa filter siap pakai.