Skill Level
Beginner
Categories
News
Reading Time
4 minutes, 22 seconds
Technology
CSS
Framework
No framework
Library
Devices.css
Devices.css Membantu Kamu Membuat Mockup Smartphone Dalam Pure CSS

Ketika membuat sebuah landing page untuk aplikasi pasti kita akan menampilkan screenshot tampilan aplikasi tersebut kedalam mockup smartphone agar terlihat lebih bagus. Mockup smartphone yang kita gunakan adalah berbentuk gambar sehingga ketika kita ingin melakukan sebuah perubahan pada mockup yang telah kita buat maka kita perlu mengubah gambarnya lagi dan mungkin cukup repot kalau kita tidak memiliki kemampuan yang cukup baik dalam hal itu.

Untuk mengatasi permasalahan seperti yang telah disebutkan tadi maka saya akan memberikan infromasi mengenai sebuah library untuk membuat mockup smartphone dalam kode CSS murni. Bisa dipastikan akan mempermudah kita dalam membuat dan mengelolanya, bukan? Karena dengan library ini kita dapat dengan mudah membuat sebuah mockup smartphone hanya dengan kode CSS murni dan library yang akan kita gunakan ini dapat membuat mockup smartphone jenis terbaru seperti iPhone X, iPhone 8, Google Pixel 2 XL dan perangkat terbaru lainnya.

Pada kali ini kita akan mencoba untuk menggunakan library yang bernama Devices.css ini. Untuk mendapatkan library ini cukup mudah, kamu dapat mendapatkannya di GitHub. Oh iya library ini dibuat oleh @picturepan2.

Okay, let’s try it!

Untuk memulai menggunakan library ini cukup mudah. Pertama, kamu download terlebih dahulu library nya di GitHub.

Lalu, ekstrak library tersebut kedalam folder project kamu dan panggil file bernama devices.min.css yang ada didalam folder dist/ pada folder library tersebut kedalam project kamu.

...
<head>
  ...
  <link rel="stylesheet" href="dist/devices.min.css">
</head>
...

Setelah file pada library tersebut dipanggil, maka kita sudah dapat menggunakannya.

Untuk penggunaannya cukup sederhana, gunakan struktur HTML seperti berikut:

<div class="device device-google-pixel">
 <div class="device-frame">
 <img class="device-content" src="...">
 </div>
 <div class="device-stripe"></div>
 <div class="device-header"></div>
 <div class="device-sensors"></div>
 <div class="device-btns"></div>
 <div class="device-power"></div>
</div>

Kode HTML diatas maka akan menampilkan mock smartphone Google Pixel dan seperti yang kita lihat disana ada tag <img yang bertujuan untuk tempat kita meletakkan screenshot aplikasi atau gambar apapun yang ingin kita letakkan kedalam mockup tersebut. Bukan hanya gambar, kamu juga dapat meletakkan video kedalam mockup tersebut.

Berikut ini contoh yang saya buat.

Untuk menampilkan bentuk perangkat smartphone lainnya cukup mudah, karena kita hanya perlu mengubah nama class nya saja. Sebelumnya kita menggunakan class “device-google-pixel” untuk menampilkan perangkat Google Pixel. Untuk mendapatkan nama class untuk bentuk perangkat lain maka kita cukup tambahkan nama smartphone yang didukung oleh library ini dan menuliskannya dalam bentuk slug. Misal, nama perangkatnya Google Pixel maka nama class nya adalah google-pixel dan begitu juga dengan jenis perangkat lainnya.

Selain itu, beberapa perangkat dapat ditampilkan dalam warna yang berbeda. Untuk lebih jelasnya kamu dapat melihat ke halaman ini.

Browser yang mendukung Devices.css.

  • Chrome (LAST 4)
  • Microsoft Edge (LAST 4)
  • Firefox (EXTENDED SUPPORT RELEASE)
  • Safari (LAST 4)
  • Opera (LAST 4)

 

Final Words

Sebetulnya, selain library ini ada juga library yang lain dapat kita gunakan untuk melakukan hal yang sama yaitu membuat mockup smartphone dengan kode CSS. Namun, saya memilih library ini karena struktur HTML yang sederhana dan juga mendukung jenis perangkat smartphone modern. Semoga bermanfaat.

Baca juga post berikut

Best Free HTML5 & CSS3 Login Forms

Tutorial Membuat Tool Shorten URL Dengan...

Muhamad Nauval Azhar
11 months ago  •  Posted by
Muhamad Nauval Azhar
Junior Programmer

Pecinta Alam (Mbah dukun)

Dapatkan notifikasi untuk setiap artikel baru dan jadilah yang pertama tahu!