Pengertian Web Design 4: 10 Cara edit tampilan website agar terlihat lebih keren part 2

January 28, 2017
No Comments

10 Cara edit tampilan website agar terlihat lebih keren part 2 – Halo, balik lagi dengan saya di Shortcut ID, kali ini sesuai dengan janji saya, saya sudah membuat kan lanjutan dari artikel kemarin yang berjudul 10 Cara edit tampilan website agar terlihat lebih keren part 1. Saya sarankan anda agar membaca artikel part 1 tadi, agar anda mengetahui 2 cara yang sudah saya jelaskan disana, dan supaya anda dapat mengerti apa yang akan saya bahas pada artikel part 2 ini. Disini saya hanya menyediakan 2 cara, dan mungkin akan dilanjutkan pada part 3 artikel ini.

3. Menggunakan background color
Salah satu dari sekian banyak cara agar tampilan website kita enak dilihat atau keren dilihat adalah menggunakan background color, atau dalam bahasa Indonesia menggunakan warna pada latar belakang website anda. Anda juga bisa menggabungkan 2 warna, berikut adalah kode CSS nya.

.gradient {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #f5f5f5));
}

4. Menggunakan berbagai efek animasi
Banyak sekali efek animasi yang bisa anda masukkan ke dalam tampilan website anda, contohnya disini saya menerangkan 2 efek animasi yaitu adalah Marquee dan Hover, berikut adalah penjelasan dan caranya.

   – Efek animasi Marquee
     Pada efek Marquee ini anda bisa membuat teks atau gambar atau video anda dapat berjalan sesuai keinginan anda, dan efek marquee ini juga bisa diberi sedikit modifikasi, namun untuk kode dasarnya adalah berikut.
        <marquee>letakkan teks / gambr / video disini</marquee>

   – Efek animasi Hover
     Pada efek Hover ini anda dapat membuat sebuah teks atau tombol bergerak jika kursor tersebut bersentuhan dengan tombol atau teks yang sudah anda masukkan. Berikut adalah kode CSS untuk membuat animasi bergerak Hover.

   
         
     webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}

.tombol:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg); transform: rotate(360deg);
}

Sambung di part 3 ya…

Tags: , , , , , , ,