5 Efek Shape dan Filter dengan CSS Membuat Gambar Lebih Keren

Hari ini kami akan membahas tentang lima gambar background yang menampilkan kekuatan CSS modern. Yang dapat digunakan sebagai wallpaper dekstop, landing page dan printed poster. Pada artikel dibawah ini kita juga akan membahas beberapa teknik CSS key, sehingga Anda dapat menyesuaikannya sesuai dengan keinginan Anda atau memodifikasinya dari awal.

Desain

Sebuah Polyscape (poli = banyak, scape= pemandangan) adalah gambar yang berisi banyak gambar bercampur menjadi satu, menciptakan visual surealis yang sangat mengagumkan. Biasanya desain seperti itu dibuat di Photoshop atau perangkat lunak pengedit gambar lainnya, namun berkat properti arsenal CSS yang terus berkembang polyscapes sekarang dapat dibuat dengan mudah menggunakan teknologi web. Anda dapat melihat desain di demo yang sudah kami buat. Demo menggunakan beberapa properti CSS eksperimental yang mungkin tidak berfungsi disemua browser. Untuk hasil terbaik, sebaiknya buka di Chrome.

mountain-polyscape

Membuat Polyscape ini sangat mudah dan cukup menyenangkan dalam proses pembuatannya. Untuk background kami menggunakan gambar dari Unsplash. Semuanya dilakukan melalui berbagai variasi CSS shape, transformasi, dan filter.

CSS Shape

Desainnya menggunakan berbagai bentuk geometris yang terbuat dari CSS. Inilah cara melakukannya

  • Square – HTML blok persegi panjang secara default. Pilih saja height dan width. Untuk mengubahnya kesamping, kita menggunakan transform:rotate(45deg);
  • Circle – bentuk melingkar di CSS dapat dibuat dengan menambahkan border-radius:50% ke bentuk persegi
  • Triangle dan Diamond – mungkin karena clip-path.

Bentuk CSS lain yang menarik yang ingin kami buat adalah kotak yang transparan didalamnya namun memiliki gambar sebagai batasnya:

border-image

Ternyata ada spec CSS yang melakukan hal itu disebut border-image dan mengambil parameter jalan ke gambar, ukuran border dan cara menempatkan gambar.

background: transparent;
border: 25px solid transparent;
border-image: url(clouds.jpg) 25 stretch;

CSS Filter

Karena kita menambahkan gambar diatas background gambar, dalam banyak kasus kita perlu menerapkan beberapa filter untuk membuat kedua pandangan stand out. Sebagian besar browser modern mendukung fitur ini dengan bebas dibawah properti filter.

Hal ini memungkinkan kita untuk mengubah warna dari satu warna ke warna lainnya, meningkatkan kontrasnya, membuat semuannya hitam-putih dan lainnya. Berikut adalah daftar semua filter CSS yang tersedia:

  • Grayscale
  • Hue-rotate
  • Invert
  • Constrast
  • Blur
  • Brightness
  • Opacity
  • Saturate
  • Sepia
  • Drop-shadow

Kita bisa menggabungkan sebanyak mungkin filter yang kita suka sampai kita mendapatkan hasil yang diinginkan:

filter: hue-rotate(60deg) contrast(200%) blur(2px);

Kami harap Anda menikmati eksperimen CSS kecil kami. Semoga bermanfaat jangan lupa untuk share. Demo bisa dilihat disini

Comments

comments