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
Membuat Format Tampilan Menggunakan CSS
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
Sesudah
Hasilnya
2. Membuat bingkai pada element
Property values pada border:
- border-width
- border-style
- border-color
Contoh:
Sebelum
Sesudah
Bisa dengan penulisan detail:
Atau dengan penulisan satu baris:
Hasilnya
3. Menambah efek melengkung pada bingkai
Dengan menambahkan properti berikut ini:
Hasilnya
4. Menambah efek bayangan pada bingkai
Berikut properti yang pelu ditambahkan:
Hasilnya
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
b) Diagonal Gradient - Top to Bottom
Dengan menambahkan value berikut ini,
Maka, hasilnya akan seperti ini,
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
