Dekorasi Gambar Mewah: Topeng dan Efek Melayang Lanjut

Selamat datang di Bagian 2 dari seri tiga bagian ini! Kami masih mendekorasi gambar tanpa elemen tambahan dan elemen semu. Saya harap Anda sudah meluangkan waktu untuk mencerna bagian 1 karena kami akan terus bekerja dengan banyak gradien untuk membuat efek visual yang mengagumkan. Kami juga akan memperkenalkan CSS mask properti untuk dekorasi yang lebih kompleks dan efek hover.

Mari kita beralih ke contoh pertama yang sedang kita kerjakan bersama…

Perangko

Percaya atau tidak, yang diperlukan untuk membuat efek CSS prangko adalah dua gradien dan filter:

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

Seperti yang kita lihat artikel sebelumnya, langkah pertama adalah membuat ruang di sekitar gambar dengan padding jadi kita bisa menggambar gradien latar belakang dan melihatnya di sana. Kemudian kita menggunakan kombinasi dari radial-gradient() dan linear-gradient() untuk memotong lingkaran di sekitar gambar.

Berikut adalah ilustrasi langkah demi langkah yang menunjukkan bagaimana gradien dikonfigurasi:

Perhatikan penggunaan round nilai pada langkah kedua. Ini sangat penting untuk triknya karena memastikan ukuran gradien disesuaikan agar sejajar sempurna di semua sisi, tidak peduli berapa lebar atau tinggi gambar.

Dari spesifikasi: Gambar diulang sesering mungkin di dalam area pemosisian latar belakang. Jika tidak cocok beberapa kali, itu diskalakan ulang sehingga cocok.

Bingkai Bulat

Mari kita lihat dekorasi gambar lain yang menggunakan lingkaran…

Contoh ini juga menggunakan radial-gradient(), tapi kali ini saya membuat lingkaran sekitar gambar alih-alih efek cut-out. Perhatikan bahwa saya juga menggunakan round nilai lagi. Bagian tersulit di sini adalah celah transparan antara bingkai dan gambar, di situlah saya meraih CSS mask milik:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

Masking memungkinkan kami menampilkan area gambar — berkat linear-gradient() di sana — juga 20px di setiap sisinya — berkat conic-gradient(). itu 20px tidak lain adalah variabel --s yang menentukan ukuran bingkai. Dengan kata lain, kita perlu menyembunyikan kesenjangan.

Inilah yang saya maksud:

Gradien linier adalah bagian biru dari latar belakang sedangkan gradien kerucut adalah bagian merah dari latar belakang. Bagian transparan di antara kedua gradien itulah yang kami potong dari elemen kami untuk menciptakan ilusi batas transparan bagian dalam.

Perbatasan Transparan Dalam

Untuk yang satu ini, kita tidak akan membuat bingkai melainkan mencoba sesuatu yang berbeda. Kita akan membuat batas dalam yang transparan dalam gambar kita. Mungkin tidak begitu berguna dalam skenario dunia nyata, tetapi ini adalah praktik yang baik dengan topeng CSS.

Mirip dengan contoh sebelumnya, kita akan mengandalkan dua gradien: a linear-gradient() untuk bagian dalam, dan a conic-gradient() untuk bagian luar. Kami akan meninggalkan ruang di antara mereka untuk membuat efek perbatasan transparan.

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

Anda mungkin telah memperhatikan bahwa gradien kerucut dari contoh ini memiliki sintaks yang berbeda dari contoh sebelumnya. Keduanya seharusnya menciptakan bentuk yang sama, jadi mengapa mereka berbeda? Itu karena kita dapat mencapai hasil yang sama menggunakan sintaks yang berbeda. Ini mungkin terlihat membingungkan pada awalnya, tetapi ini adalah fitur yang bagus. Anda tidak berkewajiban untuk menemukan itu solusi untuk mencapai bentuk tertentu. Anda hanya perlu menemukan satu solusi yang cocok untuk Anda dari banyak kemungkinan di luar sana.

Berikut adalah empat cara untuk membuat kotak luar menggunakan gradien:

Ada lebih banyak cara untuk melakukan ini, tetapi Anda mengerti maksudnya.

Tidak ada pendekatan Best™. Secara pribadi, saya mencoba menemukan yang memiliki kode terkecil dan paling optimal. Bagi saya, solusi apa pun yang membutuhkan lebih sedikit gradien, lebih sedikit perhitungan, dan lebih sedikit nilai berulang adalah yang paling cocok. Terkadang saya memilih sintaks yang lebih verbose karena memberi saya lebih banyak fleksibilitas untuk mengubah variabel dan memodifikasi berbagai hal. Itu datang dengan pengalaman dan latihan. Semakin banyak Anda bermain dengan gradien, semakin Anda tahu sintaks apa yang digunakan dan kapan.

Mari kembali ke batas transparan bagian dalam kita dan gali efek hover. Jika Anda tidak menyadarinya, ada efek hover keren yang memindahkan batas transparan menggunakan a font-size menipu. Idenya adalah untuk mendefinisikan --d variabel dengan nilai 1em. Variabel ini mengontrol jarak perbatasan dari tepi. Kita dapat mengubah seperti ini:

--_d: calc(var(--d) + var(--s) * 1em)

…memberi kami CSS yang diperbarui berikut ini:

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

Grafik font-size awalnya sama dengan 0 ,begitu 1em juga sama dengan 0 dan --_d adalah sama dengan --d. Namun, saat melayang, font-size sama dengan nilai yang ditentukan oleh --o variabel yang mengatur offset perbatasan. Ini, pada gilirannya, memperbarui --_d variabel, memindahkan perbatasan dengan offset. Kemudian saya menambahkan variabel lain, --s, untuk mengontrol tanda yang memutuskan apakah perbatasan bergerak ke dalam atau ke luar.

Grafik font-size trik ini sangat berguna jika kita ingin menganimasikan properti yang tidak dapat diubah. Properti khusus ditentukan dengan @property bisa menyelesaikan ini tapi dukungan untuk itu masih kurang pada saat saya menulis ini.

Bingkai Terungkap

Kami membuat animasi pengungkapan berikut di bagian pertama dari seri ini:

Kita dapat mengambil ide yang sama, tetapi alih-alih perbatasan dengan warna solid, kita akan menggunakan gradien seperti ini:

Jika Anda membandingkan kedua kode, Anda akan melihat perubahan berikut:

1. Saya menggunakan konfigurasi gradien yang sama dari contoh pertama di dalam mask Properti. Saya hanya memindahkan gradien dari background properti untuk mask milik.
2. saya menambahkan repeating-linear-gradient() untuk membuat batas gradien.

Itu dia! Saya menggunakan kembali sebagian besar kode yang sama yang telah kita lihat — dengan tweak super kecil — dan mendapatkan dekorasi gambar keren lainnya dengan efek melayang.

/* Solid color border */

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px;   /* the border thickness*/
  --g: 5px;  /* the gap on hover */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

Mari kita coba animasi bingkai lainnya. Yang ini agak rumit karena memiliki animasi tiga langkah:

Langkah pertama dari animasi adalah untuk membuat tepi bawah lebih besar. Untuk ini, kami menyesuaikan background-size dari linear-gradient():

Anda mungkin bertanya-tanya mengapa saya juga menambahkan tepi atas. Kami membutuhkannya untuk langkah ketiga. Saya selalu mencoba untuk mengoptimalkan kode yang saya tulis, jadi saya menggunakan satu gradien untuk menutupi kedua sisi atas dan bawah, tetapi yang atas disembunyikan dan terungkap nanti dengan mask.

Untuk langkah kedua, kami menambahkan gradien kedua untuk menunjukkan tepi kiri dan kanan. Tapi kali ini, kami melakukannya menggunakan background-position:

Kita bisa berhenti di sini karena kita sudah memiliki efek yang bagus dengan dua gradien tetapi kita di sini untuk mendorong batas jadi mari tambahkan sentuhan topeng untuk mencapai langkah ketiga.

Triknya adalah membuat tepi atas tersembunyi sampai kami menunjukkan bagian bawah dan samping dan kemudian kami memperbarui mask-size (Atau mask-position) untuk menunjukkan bagian atas. Seperti yang saya katakan sebelumnya, kita dapat menemukan banyak konfigurasi gradien untuk mencapai efek yang sama.

Berikut adalah ilustrasi gradien yang akan saya gunakan:

Saya menggunakan dua gradien kerucut yang memiliki lebar sama dengan 200%. Kedua gradien menutupi area hanya menyisakan bagian atas yang terbuka (bagian itu tidak akan terlihat nanti). Saat melayang, saya menggeser kedua gradien untuk menutupi bagian itu.

Berikut adalah ilustrasi yang lebih baik dari salah satu gradien untuk memberi Anda gambaran yang lebih baik tentang apa yang terjadi:

Sekarang kita taruh ini di dalam mask properti dan kita selesai! Berikut kode lengkapnya:

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

Saya juga telah memperkenalkan beberapa variabel untuk mengoptimalkan kode, tetapi Anda harus terbiasa dengan ini sekarang.

Bagaimana dengan animasi empat langkah? Iya itu mungkin!

Tidak ada penjelasan untuk ini karena ini adalah pekerjaan rumah Anda! Ambil semua yang telah Anda pelajari dalam artikel ini untuk membedah kode dan mencoba untuk mengartikulasikan apa yang dilakukannya. Logikanya mirip dengan semua contoh sebelumnya. Kuncinya adalah mengisolasi setiap gradien untuk memahami setiap langkah animasi. Saya menyimpan kode yang tidak dioptimalkan untuk membuat segalanya lebih mudah dibaca. saya punya versi yang dioptimalkan jika Anda tertarik, tetapi Anda juga dapat mencoba mengoptimalkan kode sendiri dan membandingkannya dengan versi saya untuk latihan tambahan.

Membungkus

Itu saja untuk Bagian 2 dari seri tiga bagian tentang dekorasi gambar kreatif hanya menggunakan elemen. Kami sekarang memiliki pegangan yang baik tentang bagaimana gradien dan topeng dapat digabungkan untuk menciptakan efek visual yang mengagumkan, dan bahkan animasi — tanpa mencapai elemen tambahan atau elemen semu. Ya, tunggal tagnya cukup!

Kami memiliki satu artikel lagi dalam seri ini. Sampai saat itu, berikut adalah demo bonus dengan efek hover keren yang saya gunakan mask untuk merakit gambar yang rusak.