CSS Stacked Photo Profile

Membuat stacked photo profile seperti di facebook. Bagaimana caranya supaya foto profile bertumpuk atau menumpuk foto profile sebelah kirinya.

Intinya adalah mengatur pada margin kiri foto agar bergeser lebih banyak ke sebelah kiri.

Dan yang terpenting, yang bergeser hanya foto nomer dua dan seterusnya, tidak termasuk foto pertama.  Hal ini bisa dicapai menggunakan CSS seperti berikut:

.stackpic:not(:first-child){}

Hasil akhirnya akan tampak seperti dibawah ini:

Web Font

Dalam desain web, saya sebenarnya gak terlalu peduli dengan jenis font di website. Yang penting bisa dibaca dengan mudah sudah cukup. Tetapi untuk orang lain bisa jadi font adalah hal yang penting dalam tampilan web.

Karena satu lain hal harus merubah font, akhirnya saya harus mencari font-font yang bisa dipasang di website tanpa harus bayar alisa gratis.

Salah satu sumber font gratis adalah google font, yaitu di https://fonts.google.com . Disana ada banyak jenis font yang bisa digunakan untuk website secara gratis. Tinggal pilih font yang diinginkan dan dimasukkan ke dalam css.

Cara pilihnya tinggal click plus sign dan disana ada cara untuk menggunakannya. Namun agar bisa menggunakan css @font-face , kita buka alamatya, misalnya https://fonts.googleapis.com/css?family=Open+Sans  di browser dan copy paste ke css kita.

Setelah itu tinggal panggil nama font-nya di css kita. That’s it.