Myjayvyn.com

Cara Membuat Landing Page: Efek Tampilan

1  |  1298 Views

Pelajaran landing page kali ini mengenai efek tampilan, cukup penting dilakukan untuk membuat tampilan landing page anda semakin menarik dan terlihat profesional.

1. Height

Diawal pelajaran, anda telah mengatur tinggi dari wilayah #main height: 1500px;
Menentukan tinggi dari sebuah main area secara absolut saya kira adalah hal yang kurang efektif, karena setiap kali konten melebihi ukuran tinggi main area, setiap kali pula kita harus menyesuaikan ukuran tinggi wilayah #main. Oleh karena itu, lebih baik anda hapus atribut height dari #main. Ini akan menyebabkan berapapun panjangnya konten anda, tinggi wilayah #main otomatis akan menyesuaikannya.

  • Hapuslah height:1500px; dari elemen body
    wpb335
  • Save
  • Cek tampilan web anda

2. Rounded corner

Rounder corner akan memberikan efek seperti berikut

rounded

  • Buka file style.css anda, tambahkan koding berikut tanpa menghapus koding yang sudah ada pada 3 bagian berikut

#main

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

#header

-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;

#footer

-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
  • Save
  • Cek tampilan web anda

3. Shadow

Memberikan efek bayangan pada area #main

shadow

  • Buka file style.css anda, tambahkan koding berikut tanpa menghapus koding yang sudah ada pada bagian #main
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
  • Save
  • Cek tampilan web anda

4. Mengganti Font menggunakan Google Font

  • Kunjungi alamat berikut http://www.google.com/fonts
  • Pilih font yang ingin anda gunakan, lalu klik icon Quick Use

wpb337

  • Ditampilan Quick use anda akan dipandu bagaimana cara memasang google font ke website anda. Jika saya sederhanakan langkahnya, bukalah file index.html
  • Pada step 3, copy seluruh kodingnya

wpb338

  • Paste diantara tag <head> dan </head>

wpb341

  • Pada step 4, buka file style.css dan copy kodingnya

wpb339

  • Paste ke elemen #content menggantikan font-family: verdana;

wpb340

  • Save seluruh pekerjaan anda
  • Cek tampilan web anda, apakah ada perubahan jenis font?

Author: Agie

Semoga bermanfaat 🙂

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

One Comment

So, what do you think ?