 |
| Membuat Format Tampilan Menggunakan CSS |
SUBSTANSI :
- Membuat Efek Bayangan Pada Teks
- Membuat bingkai pada element
- Menambah efek melengkung pada bingkai
- Menambah efek bayangan pada bingkai
- Membuat warna gradient
- Membuat bingkai dari gambar
1. Membuat Efek Bayangan Pada Teks
Rumus sintak : text-shadow: h-shadow v-shadow blur color;
Contoh :
Masih menggunakan framework sebelumnya, maka akan saya coba lakukan pada h2 dan h3:
Sebelum -
2. Membuat bingkai pada element
Property values pada border :- border-width
- border-style
- border-color
Contoh :
Sebelum -
Sesudah -
Bisa dengan penulisan detail :
 |
| result css |
3. Menambah efek melengkung pada bingkai
Dengan menambahkan properti berikut ini :
Hasilnya -
 |
| css result 2 |
4. Menambah efek bayangan pada bingkai
Berikut properti yang pelu ditambahkan :
Hasilnya -
 |
| result css 3 |
5. Membuat warna gradient
a) Linear Gradient - Top to Bottom
Rumus umum : background: linear-gradient(direction, color-stop1, color-stop2, ...);
Contoh :
Saya akan coba berikan backgound gradient pada navigasi serta merubah warna textnya;
Sebelum -
Sesudah -
Jangan lupa untuk menambahkan atribut "id" gradient pada elemen yang kita kehendaki misal saya melakukannya pada navigasi,
Hasilnya -
Dengan menambahkan value berikut ini,
Maka, hasilnya akan seperti ini,
 |
| css gatewan |
6. Membuat bingkai dari gambar
Rumus Sintak : border-image: source slice width outset repeat;
Contoh :
Saya akan coba menambahkan border image pada icon gatewan;
Sebelum -
Sesudah -
dan -
Hasilnya -
Ref : http://www.w3schools.com/
Rekomendasi Artikel Terkait: