Pada tutorial kali ini kita akan membahas tentang Efek Bayangan menggunakan CSS3, di CSS3 Anda dapat menggunakan efek Bayangan pada Teks dan Kotak Show Jadi sobat bisa memberikan efek bayangan (Shadow) pada teks atau kotak dengan menggunakan fitur ini Membuat Efek Bayangan (Shadows) pada teks dengan CSS 3Property yang digunakan adalah text-shadow, ada beberapa nilai yang bisa anda gunakan antara lain teks–bayangan. left_right_distance top_bottom_distance blur_thickness warna; Untuk memperjelas penggunaan Text-shadow, harap perhatikan script di bawah ini 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <. DOCTYPE html> <html> <kepala> h1 { teks-bayangan. 5px 3px 3px merah; } </kepala> <tubuh> <h1>Contoh Teks Bayangan</h1> </tubuh>
</html> Misal kita simpan dengan nama text-shadow. html, kemudian kita buka di browser dan hasilnya seperti berikut Keterangan
Buat Banyak BayanganAnda juga dapat membuat beberapa efek bayangan sekaligus. dengan menuliskan beberapa nilai sekaligus, dan dipisahkan dengan koma, contohnya seperti script dibawah ini 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <. DOCTYPE html> <html> <kepala> <judul></judul>
</kepala> <tubuh> <h1>Contoh Multiple Warna</h1> </tubuh> </html> misalnya kita simpan dengan nama multiple-shadow. html, kemudian kita buka di browser dan hasilnya seperti berikut Keterangan
Membuat Efek Bayangan (Shadows) pada kotak dengan CSS 3Jika pada bagian pertama kita belajar tentang cara membuat bayangan pada teks, pada tutorial ini kita akan belajar cara membuat bayangan pada sebuah kotak. Property yang digunakan adalah box-shadow, ada beberapa nilai yang bisa anda gunakan antara lain kotak–bayangan. left_right_distance top_bottom_distance blur_thickness warna; Sebagai contoh, silahkan lihat script di bawah ini 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <. DOCTYPE html> <html> <kepala> <judul></judul> </kepala> <tubuh> <div id="bayangan"> <img src="Lighthouse. jpg" lebar="300px"> <h2 gaya="perataan teks. center;">Mercusuar</h2> </div> </tubuh> </html> misalnya kita simpan dengan nama box-shadow. html lalu kita buka di browser, hasilnya seperti berikutKeterangan
Mendukung PerambanUntuk browser yang mendukung text-shadow dan box-shadow adalah Properti4. 0 -webkit- 9. 04. 03. 5-moz-10. 55. 1 3. 1 -webkit- Sumber. www. w3schools. com silahkan sesuaikan dengan browser yang akan digunakan, bisa ditambahkan awalan vendor. Jika anda belum memahami konsep vendor prefix, silahkan baca dulu tutorial css3 part 1 tentang vendor prefix
Nah sekian dulu sobat pembahasan tentang text-shadow dan box-shadow di css, jika ada yang ingin di bahas silahkan tinggalkan di kolom komentar, sekian, sampai jumpa di tutorial css3. KotakProperti box-shadow digunakan untuk membuat bayangan untuk elemen box atau container . Sedangkan properti text-shadow digunakan untuk membuat bayangan pada teks.
Apa fungsi bootstrap dan bagaimana cara kerjanya?Tujuan dan Fungsi Bootstrap adalah membuat situs web yang responsif dan mengutamakan seluler. Jadi, semua elemen antarmuka website dijamin bekerja maksimal di semua ukuran layar, baik desktop maupun perangkat seluler.
Apa itu aplikasi bootstrap?Penggunaan Bootstrap
. img-responsive gambar untuk membuat gambar secara otomatis menyesuaikan dengan ukuran layar pengguna. Menambahkan elemen website dengan mudah — Bootstrap menyediakan berbagai elemen yang bisa kita gunakan.
Apa itu Bootstrap 5?Tentang Kelas. Bootstrap adalah framework yang paling populer digunakan untuk membuat website . Bootstrap memungkinkan pengembang front-end membuat situs web dengan cepat, fokus pada seluler responsif, dan membuat situs web lebih interaktif tanpa membuat banyak CSS dan JavaScript dari awal. |
Cara menggunakan bootstrap box-shadow
Pos Terkait
Copyright © 2024 membukakan Inc.
