Dalam kursus ini, Anda akan membuat satu set penanda berwarna. Anda akan mempelajari berbagai cara untuk menetapkan nilai warna dan cara memasangkan warna satu sama lain.
Langkah 1
Langkah 2
Langkah 3
Langkah 4
Di dalam elemen head, sarangkan elemen meta dengan set atribut atribut ke utf-8. Ingatlah bahwa elemen meta menutup sendiri, dan tidak memerlukan tag penutup.
Langkah 5
Tambahkan elemen meta penutup diri lainnya di dalam kepala. Berikan atribut name yang disetel ke viewport dan atribut konten yang disetel ke width=device-width, initial-scale=1.0 agar halaman Anda terlihat sama di semua perangkat.
LATIHAN 6
Sekarang Anda siap untuk mulai menambahkan konten ke halaman.
Di dalam tubuh, tempatkan elemen h1 dengan teks CSS Color Markers.
Langkah 7
Dalam proyek ini Anda akan bekerja dengan file CSS eksternal untuk mengatur gaya halaman. Kami telah membuat file styles.css untuk Anda. Namun sebelum Anda dapat menggunakannya, Anda harus menautkannya ke halaman.
Sarang elemen tautan di dalam elemen head. Berikan atribut rel yang disetel ke stylesheet dan atribut href yang disetel ke styles.css.
Langkah 8
Sekarang file CSS eksternal Anda sudah siap, Anda dapat mulai mengatur gaya halaman.
Sebagai pengingat, berikut cara menargetkan elemen paragraf dan menyelaraskannya ke kanan:
P {
text-align: right;
}
Buat aturan CSS baru yang menargetkan elemen h1, dan setel properti perataan teks ke tengah.
Langkah 9
Sekarang Anda akan menambahkan beberapa elemen yang nantinya akan Anda beri gaya ke dalam penanda warna.
Pertama, di dalam elemen body, tambahkan elemen div dan atur atribut class-nya ke container. Pastikan elemen div berada di bawah elemen h1.
Langkah 10
Selanjutnya, di dalam elemen div, tambahkan elemen div lainnya dan berikan class marker.
Langkah 11
Saatnya menambahkan beberapa warna pada marker. Ingatlah bahwa salah satu cara untuk menambahkan warna pada suatu elemen adalah dengan menggunakan kata kunci warna seperti hitam, cyan, atau kuning.
Sebagai pengingat, berikut cara menargetkan class freecodecamp:
.freecodecamp {
}
Buat aturan CSS baru yang menargetkan kelas marker, dan atur properti background-color menjadi merah.
Catatan: Anda tidak akan melihat perubahan apa pun setelah menambahkan CSS.
Warna latar belakang telah diterapkan, tetapi karena elemen div penanda tidak memiliki konten di dalamnya, maka secara default tidak memiliki tinggi.
Dalam aturan CSS .marker Anda, setel properti tinggi menjadi 25px dan properti lebar menjadi 200px.
Marker Anda akan terlihat lebih baik jika berada di tengah halaman. Cara mudah untuk melakukannya adalah dengan properti steno margin.
Di proyek terakhir, Anda mengatur area margin elemen secara terpisah dengan properti seperti margin-top dan margin-left. Properti steno margin memudahkan untuk mengatur beberapa area margin secara bersamaan.
Untuk memusatkan marker Anda pada halaman, setel properti marginnya ke otomatis. Ini mengatur margin-top, margin-right, margin-bottom, dan margin-left semua menjadi otomatis.
Langkah 14
Sekarang setelah Anda memiliki satu penanda (marker) yang berpusat pada warna, saatnya untuk menambahkan penanda (marker) lainnya.
Dalam wadah div, tambahkan dua elemen div lagi dan beri masing-masing kelas penanda.
Langkah 15
Meskipun Anda memiliki tiga elemen div penanda terpisah, mereka terlihat seperti satu persegi panjang besar. Anda harus menambahkan beberapa ruang di antara mereka untuk memudahkan melihat setiap elemen.
Jika properti shorthand margin memiliki dua nilai, properti margin-top dan margin-bottom ditetapkan ke nilai pertama, dan margin-kiri dan margin-kanan ke nilai kedua.
Dalam aturan CSS .marker Anda, atur properti margin menjadi 10px otomatis.
Langkah 16
Untuk memberi penanda warna yang berbeda, Anda perlu menambahkan kelas unik ke masing-masing penanda. Beberapa kelas dapat ditambahkan ke elemen dengan mencantumkannya di atribut kelas dan memisahkannya dengan spasi. Misalnya, berikut ini menambahkan kelas animal dog ke elemen div.
<div class="animal dog">
Jika Anda menambahkan beberapa kelas ke elemen HTML, gaya kelas pertama yang Anda cantumkan mungkin akan diganti oleh kelas selanjutnya.
Untuk memulai, tambahkan kelas satu ke elemen div penanda pertama.
Langkah 17
Selanjutnya, hapus properti background-color dan nilainya dari aturan CSS .marker.
Langkah 18
Kemudian, buat aturan CSS baru yang menargetkan kelas satu dan atur properti background-color menjadi merah.
Tambahkan kelas dua ke div penanda kedua, dan tambahkan kelas tiga ke div penanda ketiga.
Langkah 20
Buat aturan CSS yang menargetkan kelas dua dan atur properti background-color menjadi hijau.
Juga, buat aturan CSS terpisah yang menargetkan kelas tiga dan atur background-color menjadi biru.
Ada dua model warna utama: model aditif RGB (merah, hijau, biru) yang digunakan dalam perangkat elektronik, dan model CMYK subtraktif (cyan, magenta, kuning, hitam) yang digunakan dalam cetakan.
Dalam proyek ini, Anda akan bekerja dengan model RGB. Ini berarti bahwa warna dimulai dengan warna hitam, dan berubah saat tingkat warna merah, hijau, dan biru yang berbeda diperkenalkan. Cara mudah untuk melihatnya adalah dengan fungsi CSS rgb.
Buat aturan CSS baru yang menargetkan wadah kelas dan atur warna latar menjadi hitam dengan rgb(0, 0, 0).
Langkah 22
Fungsi adalah bagian dari kode yang dapat mengambil input dan melakukan tindakan tertentu. Fungsi CSS rgb menerima nilai, atau argumen, untuk merah, hijau, dan biru, dan menghasilkan warna:
rgb(merah, hijau, biru);
Setiap nilai merah, hijau, dan biru adalah angka dari 0 hingga 255. 0 berarti ada 0% dari warna tersebut, dan berwarna hitam. 255 berarti ada 100% dari warna itu.
Dalam aturan .one CSS, ganti kata kunci warna merah dengan fungsi rgb. Untuk fungsi rgb, atur nilai merah menjadi 255, nilai hijau menjadi 0, dan nilai biru menjadi 0.
Langkah 23
Perhatikan bahwa background-color untuk marker Anda masih merah. Ini karena Anda menyetel nilai merah fungsi rgb ke maksimum 255, atau 100% merah, dan menyetel nilai hijau dan biru ke 0.
Sekarang gunakan fungsi rgb untuk mengatur warna lainnya.
Dalam aturan .two CSS, gunakan fungsi rgb untuk menyetel background-color ke nilai maksimal untuk hijau, dan 0 untuk nilai lainnya. Dan dalam aturan .three CSS, gunakan fungsi rgb untuk mengatur background-color ke nilai maksimal untuk biru, dan 0 untuk nilai lainnya.
Langkah 24
Meskipun penanda merah dan biru terlihat sama, penanda hijau jauh lebih terang dari sebelumnya. Hal ini karena kata kunci warna hijau sebenarnya adalah bayangan yang lebih gelap, dan berada di tengah-tengah antara hitam dan nilai maksimum untuk hijau.
Dalam aturan .two CSS, tetapkan nilai hijau di fungsi rgb ke 127 untuk menurunkan intensitasnya.
Langkah 25
Sekarang tambahkan sedikit lebih banyak ruang vertikal antara penanda Anda dan tepi elemen penampung (container) tempat mereka berada.
Dalam aturan CSS .container, gunakan properti shorthand padding untuk menambahkan 10px padding atas dan bawah, dan atur padding kiri dan kanan ke 0. Cara kerjanya mirip dengan properti shorthand margin yang Anda gunakan sebelumnya.
Langkah 26
Dalam model warna RGB aditif, warna primer adalah warna yang bila digabungkan akan menghasilkan warna putih murni. Tetapi agar hal ini terjadi, setiap warna harus memiliki intensitas tertinggi.
Sebelum Anda menggabungkan warna, atur penanda hijau Anda kembali ke hijau murni. Untuk fungsi rgb di aturan .two CSS, setel hijau kembali ke nilai maksimal 255.
Langkah 27
Sekarang setelah Anda memiliki warna RGB primer, saatnya menggabungkannya.
Untuk fungsi rgb dalam aturan .container, setel nilai merah, hijau, dan biru ke maksimum 255.
Merah + hijau menjadi Kuning, tambah biru menjadi putih.
Langkah 28
Warna sekunder adalah warna yang Anda dapatkan saat menggabungkan warna primer. Anda mungkin memperhatikan beberapa warna sekunder pada langkah terakhir saat Anda mengubah nilai merah, hijau, dan biru.
Untuk membuat warna sekunder pertama, kuning, perbarui fungsi rgb di aturan .one CSS untuk menggabungkan merah murni dan hijau murni.
Langkah 29
Untuk membuat warna sekunder berikutnya, cyan, perbarui fungsi rgb di aturan .two CSS untuk menggabungkan hijau murni dan biru murni.
Langkah 30
Untuk membuat warna sekunder terakhir, magenta, perbarui fungsi rgb di aturan .three CSS untuk menggabungkan biru murni dan merah murni.
Langkah 31
Setelah Anda terbiasa dengan warna sekunder, Anda akan belajar cara membuat warna tersier. Warna tersier dibuat dengan menggabungkan primer dengan warna sekunder terdekat.
Untuk membuat warna oranye tersier, perbarui fungsi rgb di aturan .one CSS agar merah berada pada nilai maksimal, dan atur hijau ke 127.
Langkah 32
Perhatikan bahwa, untuk membuat jingga, Anda harus meningkatkan intensitas warna merah dan menurunkan intensitas nilai rgb hijau. Ini karena jingga merupakan kombinasi merah dan kuning, dan berada di antara dua warna pada roda warna.
Untuk membuat warna hijau spring tersier, gabungkan cyan dengan hijau. Perbarui fungsi rgb di aturan .two CSS sehingga hijau berada pada nilai maksimal, dan setel biru ke 127.
Dan untuk menciptakan warna violet tersier, gabungkan magenta dengan biru. Perbarui fungsi rgb di aturan .three CSS agar biru berada pada nilai maksimal, dan setel merah ke 127.
Ada tiga warna tersier lainnya: (chartreuse) hijau kekuning-kuningan (hijau + kuning), (Azure)biru langit (biru + cyan), dan (rose)mawar (merah + magenta).
Untuk membuat warna hijau kekuning-kuningan, perbarui fungsi rgb di aturan .one CSS sehingga merah menjadi 127, dan atur hijau ke nilai maksimum.
Untuk warna biru, perbarui fungsi rgb di aturan .two CSS sehingga hijau di 127 dan biru di nilai maksimal.
Dan untuk mawar, yang terkadang disebut merah muda cerah, perbarui fungsi rgb di aturan .three CSS sehingga biru menjadi 127 dan merah menjadi nilai maksimal.
Sekarang setelah Anda mempelajari semua warna primer, sekunder, dan tersier pada roda warna, akan lebih mudah untuk memahami konsep teori warna lainnya dan bagaimana pengaruhnya terhadap desain.
Pertama, dalam aturan CSS .one, .two, dan .three, sesuaikan nilai dalam fungsi rgb sehingga warna latar setiap elemen disetel menjadi hitam pekat. Ingatlah bahwa fungsi rgb menggunakan model warna aditif, di mana warna dimulai dari hitam dan berubah seiring bertambahnya nilai merah, hijau, dan biru.
Langkah 36
Roda warna adalah lingkaran di mana warna, atau rona yang mirip, saling berdekatan, dan warna yang berbeda saling berjauhan. Misalnya, merah murni berada di antara rona mawar dan jingga.
Dua warna yang berseberangan pada roda warna disebut warna komplementer. Jika dua warna komplementer digabungkan, mereka menghasilkan warna abu-abu. Namun bila ditempatkan berdampingan, warna-warna ini menghasilkan kontras visual yang kuat dan tampak lebih cerah.
Pada fungsi rgb untuk aturan .one CSS, atur nilai merah menjadi maksimal 255 untuk menghasilkan warna merah murni. Dalam fungsi rgb untuk aturan .two CSS, atur nilai hijau dan biru ke maksimum 255 untuk menghasilkan cyan.
Langkah 37
Perhatikan bahwa warna merah dan cyan sangat terang bersebelahan. Kontras ini dapat mengganggu jika digunakan secara berlebihan di situs web, dan dapat membuat teks sulit dibaca jika ditempatkan pada latar belakang berwarna komplementer.
Sebaiknya praktikkan memilih satu warna sebagai warna dominan, dan gunakan warna pelengkapnya sebagai aksen untuk menarik perhatian ke konten tertentu di halaman.
Pertama, dalam aturan h1, gunakan fungsi rgb untuk mengatur warna latar belakang menjadi cyan.
Ada beberapa kombinasi warna penting lainnya di luar warna komplementer, tetapi Anda akan mempelajarinya nanti.
Untuk saat ini, gunakan fungsi rgb di aturan .two CSS untuk menyetel warna latar menjadi hitam.
Dan dalam aturan CSS h1, hapus properti dan nilai background-color untuk kembali ke warna putih default.
Langkah 41
Sekarang saatnya menambahkan detail lain ke penanda, dimulai dari yang pertama.
Di elemen div penanda pertama, ubah kelas one menjadi merah.
Perbarui .one aturan CSS menjadi red.
Langkah 43
Dan perbarui fungsi rgb di aturan CSS .red agar nilai merah maksimal.
Langkah 44
Selanjutnya, ubah kelas dua menjadi hijau di div penanda kedua, dan kelas tiga menjadi biru di div penanda ketiga.
Perbarui pemilih kelas CSS .two sehingga menargetkan kelas hijau baru. Dan perbarui pemilih kelas .three sehingga menargetkan kelas biru baru.
Langkah 46
Cara yang sangat umum untuk menerapkan warna pada elemen dengan CSS adalah dengan nilai hex atau heksadesimal. Meskipun nilai hex terdengar rumit, sebenarnya itu hanyalah bentuk lain dari nilai RGB.
Nilai warna hex dimulai dengan karakter # dan mengambil enam karakter dari 0-9 dan A-F. Pasangan karakter pertama mewakili merah, pasangan kedua mewakili hijau, dan pasangan ketiga mewakili biru. Misalnya, #4B5320.
Di pemilih kelas .green, atur properti background-color ke kode warna hex dengan nilai 00 untuk merah, FF untuk hijau, dan 00 biru.
Langkah 47
Anda mungkin sudah terbiasa dengan desimal, atau nilai basis 10, yang dimulai dari 0 - 9. Nilai heksadesimal, atau basis 16, dimulai dari 0 - 9, lalu A - F:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Dengan warna hex, 00 adalah 0% dari warna tersebut, dan FF adalah 100%. Jadi #00FF00 diterjemahkan menjadi 0% merah, 100% hijau, dan 0% biru, dan sama dengan rgb(0, 255, 0).
Turunkan intensitas hijau dengan menyetel nilai hijau warna hex ke 7F.
Langkah 48
Model warna HSL, atau hue, saturation, dan lightness, adalah cara lain untuk merepresentasikan warna.
Fungsi CSS hsl menerima 3 nilai: angka dari 0 hingga 360 untuk (hue)rona, persentase dari 0 hingga 100 untuk saturasi, dan persentase dari 0 hingga 100 untuk kecerahan.
Jika Anda membayangkan roda warna, rona merah pada 0 derajat, hijau pada 120 derajat, dan biru pada 240 derajat.
Saturasi adalah intensitas warna dari 0%, atau abu-abu, hingga 100% untuk warna murni. Anda harus menambahkan tanda persen % ke nilai saturasi dan kecerahan.
Lightness adalah seberapa terang sebuah warna muncul, dari 0%, atau hitam pekat, hingga 100%, putih sempurna, dengan 50% netral.
Dalam aturan CSS .blue, gunakan fungsi hsl untuk mengubah properti background-color menjadi biru murni. Atur rona ke 240, saturasi ke 100%, dan kecerahan ke 50%.
Anda telah mempelajari beberapa cara untuk menyetel warna rata di CSS, tetapi Anda juga dapat menggunakan transisi warna, atau gradien, pada elemen.
Gradien adalah transisi satu warna ke warna lain. Fungsi gradien linier CSS memungkinkan Anda mengontrol arah transisi sepanjang garis, dan warna mana yang digunakan.
Satu hal yang perlu diingat adalah fungsi linear-gradient sebenarnya membuat elemen gambar, dan biasanya dipasangkan dengan properti background yang dapat menerima gambar sebagai nilai.
Dalam aturan CSS .red, ubah properti background-color menjadi background.
Fungsi linear-gradient sangat fleksibel -- inilah sintaks dasar yang akan Anda gunakan dalam tutorial ini:
linear-gradient(gradientDirection, color1, color2, ...);
Sekarang Anda akan menerapkan gradien merah ke hijau sepanjang garis 90 derajat ke penanda pertama.
Pertama, dalam aturan .red CSS, setel properti background ke linear-gradient(), dan berikan nilai 90deg sebagai gradientDirection.
Anda akan menggunakan fungsi rgb untuk warna gradien ini.
Dalam fungsi gradien linier, gunakan fungsi rgb untuk menyetel argumen warna pertama menjadi merah murni.
Anda belum akan melihat gradien karena fungsi gradien linier memerlukan setidaknya dua argumen warna untuk berfungsi.
Dalam fungsi gradien linier yang sama, gunakan fungsi rgb untuk menyetel argumen warna kedua menjadi hijau murni.
Seperti yang Anda lihat, fungsi gradien linier menghasilkan gradien merah-hijau yang mulus. Sementara fungsi linear-gradient memerlukan minimal dua argumen warna untuk bekerja, ia dapat menerima banyak argumen warna.
Gunakan fungsi rgb untuk menambahkan warna biru murni sebagai argumen warna ketiga ke fungsi gradien linier.
Langkah 54
Penghentian warna memungkinkan Anda menyempurnakan tempat warna ditempatkan di sepanjang garis gradien. Mereka adalah satuan panjang seperti px atau persentase yang mengikuti warna dalam fungsi gradien linier.
Misalnya, dalam gradien merah-hitam ini, transisi dari merah ke hitam terjadi pada titik 90% di sepanjang garis gradien, jadi merah menempati sebagian besar ruang yang tersedia:
linear-gradient(90deg, merah 90%, hitam);
Dalam fungsi gradien linier, tambahkan perhentian warna 75% setelah argumen warna merah pertama. Jangan tambahkan hentian warna ke argumen warna lainnya.
Langkah 55
Sekarang setelah Anda mengetahui dasar-dasar cara kerja fungsi gradien linier dan penghentian warna, Anda dapat menggunakannya untuk membuat penanda terlihat lebih realistis.
Dalam fungsi gradien linier, atur gradientDirection ke 180deg.
background: linear-gradient(180deg, rgb(255,0,0) 75%, rgb(0,255,0),rgb(0,0,255) );
}
Langkah 56
Selanjutnya, atur color-stop untuk merah menjadi 0%, color-stop untuk hijau menjadi 50%, dan color-stop untuk biru menjadi 100%.
Untuk argumen warna pertama, yang saat ini berwarna merah murni, perbarui fungsi rgb sehingga nilai merah adalah 122, nilai hijau adalah 74, dan nilai biru adalah 14.
Langkah 58
Sekarang ubah argumen warna kedua dalam fungsi gradien linier, yang saat ini berwarna hijau murni.
Perbarui fungsi rgb sehingga nilai merah 245, nilai hijau 62, dan nilai biru 113.
Langkah 59
Terakhir, modifikasi argumen warna ketiga dalam fungsi gradien linier, yang saat ini berwarna biru murni.
Perbarui fungsi rgb sehingga nilai merah 162, nilai hijau 27, dan nilai biru 27.
Penanda merah terlihat jauh lebih realistis. Sekarang Anda akan melakukan hal yang sama untuk penanda hijau, menggunakan kombinasi fungsi gradien linier dan warna hex.
Dalam aturan .green CSS, ubah properti background-color menjadi background.
Untuk penanda ini, Anda akan menggunakan kode warna hex untuk gradien Anda.
Gunakan fungsi linear-gradient dan atur gradientDirection ke 180deg. Dan untuk argumen warna pertama, gunakan kode warna hex dengan nilai 55 untuk merah, 68 untuk hijau, dan 0D untuk biru.
Langkah 62
Untuk argumen warna kedua, gunakan kode warna hex dengan nilai 71 untuk merah, F5 untuk hijau, dan 3E untuk biru.
Langkah 63
Itu terlihat lebih baik, tetapi tepi bawah penanda hijau harus lebih gelap untuk menambahkan sedikit lebih banyak dimensi.
Dalam fungsi gradien linier yang sama, tambahkan kode warna hex dengan nilai 11 untuk merah, 6C untuk hijau, dan 31 untuk biru sebagai argumen warna ketiga.
Bahkan tanpa penghentian warna, Anda mungkin memperhatikan bahwa warna untuk penanda hijau bertransisi pada titik yang sama dengan penanda merah. Warna pertama di awal (0%), yang kedua di tengah (50%), dan yang terakhir di akhir (100%) garis gradien.
Fungsi gradien linier secara otomatis menghitung nilai ini untuk Anda, dan menempatkan warna secara merata di sepanjang garis gradien secara default.
Dalam aturan CSS .red, hapus tiga perhentian warna dari fungsi gradien linier untuk sedikit membersihkan kode Anda.
Jika tidak ada argumen gradientDirection yang diberikan ke fungsi gradien linier, fungsi ini mengatur warna dari atas ke bawah, atau sepanjang garis 180 derajat, secara default.
Bersihkan kode Anda sedikit lagi dengan menghapus argumen gradientDirection dari kedua fungsi gradien linier.
Langkah 66
Sekarang Anda akan menerapkan gradien ke penanda biru, kali ini menggunakan fungsi hsl sebagai argumen warna.
Dalam aturan CSS .blue, ubah properti background-color menjadi background.
Langkah 67
Gunakan fungsi linear-gradient, dan masukkan fungsi hsl dengan nilai 186 untuk hue, 76% untuk saturation, dan 16% untuk lightness sebagai argumen warna pertama.
Langkah 68
Sebagai argumen warna kedua, masukkan fungsi hsl dengan nilai 223 untuk rona, 90% untuk saturasi, dan 60% untuk kecerahan.
Dan sebagai argumen warna ketiga, masukkan fungsi hsl dengan nilai 240 untuk rona, 56% untuk saturasi, dan 42% untuk kecerahan.
Langkah 70
Sekarang spidol memiliki warna yang benar, saatnya membuat lengan spidol. Mulailah dengan penanda merah.
Di dalam elemen div penanda merah, buat elemen div baru dan beri kelas sleeve.
Buat aturan CSS baru yang menargetkan kelas sleeve. Atur properti width menjadi 110px, dan properti height menjadi 25px.
Langkah 72
Agar marker terlihat lebih realistis, beri warna putih transparan pada selongsong.
Pertama, atur background-color elemen sleeve menjadi putih.
Opacity menjelaskan seberapa buram, atau tidak transparan, sesuatu itu. Misalnya, dinding yang kokoh tidak tembus cahaya, dan tidak ada cahaya yang dapat melewatinya. Tapi gelas minum jauh lebih transparan, dan Anda bisa melihat melalui kaca ke sisi lain.
Dengan properti opacity CSS, Anda dapat mengontrol seberapa buram atau transparan suatu elemen. Dengan nilai 0, atau 0%, elemen akan sepenuhnya transparan, dan pada 1.0, atau 100%, elemen akan sepenuhnya buram seperti secara default.
Dalam aturan CSS .sleeve, atur properti opacity menjadi 0.5.
Langkah 74
Cara lain untuk menyetel opasitas suatu elemen adalah dengan saluran alfa. Mirip dengan properti opacity, saluran alfa mengontrol seberapa transparan atau buram suatu warna.
Anda telah menyetel opacity lengan dengan nama color dan properti opacity, tetapi Anda dapat menambahkan saluran alfa ke properti warna CSS lainnya.
Di dalam aturan .sleeve, hapus properti dan nilai opacity.
Anda sudah terbiasa menggunakan fungsi rgb untuk mengatur warna. Untuk menambahkan saluran alfa ke warna rgb, gunakan fungsi rgba sebagai gantinya.
Fungsi rgba berfungsi seperti fungsi rgb, tetapi membutuhkan satu angka lagi dari 0 hingga 1.0 untuk saluran alfa:
rgba(Nilaimerah,Nilaihijau,Nilaibiru,Nilaialfa);
Anda juga dapat menggunakan saluran alfa dengan warna hsl dan hex. Anda akan melihat bagaimana melakukannya segera.
Dalam aturan .sleeve, gunakan fungsi rgba untuk menyetel properti background-color menjadi putih murni dengan opacity 50%.
Langkah 76
Selongsong Anda terlihat bagus, tetapi akan terlihat lebih baik jika diposisikan lebih ke sisi kanan penanda. Salah satu cara untuk melakukannya adalah menambahkan elemen lain sebelum selongsong untuk mendorongnya ke kanan.
Tambahkan div baru dengan kelas cap sebelum elemen div sleeve.
Langkah 77
Buat aturan CSS baru untuk menargetkan batas kelas. Dalam aturan baru, setel properti width menjadi 60px, dan height menjadi 25px.
Langkah 78
Sepertinya lengan baju Anda hilang, tapi jangan khawatir -- masih ada. Apa yang terjadi adalah cap div baru Anda mengambil seluruh lebar penanda, dan mendorong selongsong ke bawah ke baris berikutnya.
Ini karena properti tampilan default untuk elemen div adalah blok. Jadi ketika dua elemen blok bersebelahan, mereka menumpuk seperti blok yang sebenarnya. Misalnya, semua elemen penanda Anda ditumpuk satu sama lain.
Untuk memposisikan dua elemen div pada baris yang sama, setel properti tampilannya ke blok-sebaris.
Buat aturan baru untuk menargetkan kelas tutup dan selongsong, dan setel tampilan ke blok-sebaris.
Langkah 79
Di proyek terakhir, Anda belajar sedikit tentang border dan properti border-color.
Semua elemen HTML memiliki batas, meskipun biasanya tidak diatur secara default. Dengan CSS, Anda dapat mengontrol semua aspek batas elemen, dan mengatur batas di semua sisi, atau hanya satu sisi pada satu waktu. Agar perbatasan terlihat, Anda perlu mengatur lebar dan gayanya.
Pada aturan CSS .sleeve, tambahkan properti border-left-width dengan nilai 10px.
Langkah 80
Perbatasan memiliki beberapa gaya untuk dipilih. Anda dapat membuat perbatasan Anda menjadi garis padat, tetapi Anda juga dapat menggunakan garis putus-putus atau putus-putus jika Anda mau. Garis batas padat mungkin yang paling umum.
Dalam aturan CSS .sleeve, tambahkan properti border-left-style dengan nilai solid.
Langkah 81
Perbatasan Anda harus terlihat sekarang. Jika tidak ada warna yang diatur, warna hitam digunakan secara default.
Tetapi untuk membuat kode Anda lebih mudah dibaca, lebih baik menyetel warna batas secara eksplisit.
Pada aturan CSS .sleeve, tambahkan properti border-left-color dengan nilai hitam.
Properti steno border-left memungkinkan Anda mengatur lebar, gaya, dan warna border kiri secara bersamaan.
Berikut sintaksnya:
border-left: warna gaya lebar;
Dalam aturan CSS .sleeve, ganti properti border-left-width, border-left-style, dan border-left-color dengan properti singkatan border-left. Nilai lebar, gaya, dan warna batas kiri harus sama.
Spidol Anda terlihat bagus. Namun agar terlihat lebih realistis, Anda dapat mengubah gaya border menjadi double solid border.
Untuk properti shorthand border-left, ubah nilai border style dari solid menjadi double.
Langkah 84
Warna hitam pada tepian Anda terlihat cukup keras dibandingkan dengan lengan baju yang lebih transparan. Anda dapat menggunakan saluran alfa untuk menurunkan opasitas batas hitam.
Untuk properti shorthand border-left, gunakan fungsi rgba untuk menyetel nilai warna menjadi hitam pekat dengan opacity 75%.
Langkah 85
Luar biasa. Spidol merah Anda terlihat bagus. Sekarang yang perlu Anda lakukan hanyalah menambahkan tutup dan lengan baju ke spidol Anda yang lain.
Tambahkan topi dan lengan baju pada penanda hijau dan biru. Anda cukup menyalin elemen div dari penanda merah dan menempelkannya ke dua penanda lainnya.
Langkah 86
Hal terakhir yang akan Anda lakukan adalah menambahkan sedikit bayangan pada setiap penanda agar terlihat lebih realistis.
Properti box-shadow memungkinkan Anda menerapkan satu atau lebih bayangan di sekitar elemen. Berikut adalah sintaks dasar:
kotak-bayangan: warna offsetX offsetY;
Inilah cara kerja nilai offsetX dan offsetY:
offsetX dan offsetY menerima nilai angka dalam px dan unit CSS lainnya.
nilai offsetX positif menggerakkan bayangan ke kanan dan nilai negatif memindahkannya ke kiri.
nilai offsetY positif memindahkan bayangan ke bawah dan nilai negatif memindahkannya ke atas.
jika Anda menginginkan nilai nol (0) untuk salah satu atau keduanya offsetX dan offsetY, Anda tidak perlu menambahkan satu unit. Setiap browser memahami bahwa nol berarti tidak ada perubahan.
Tinggi dan lebar bayangan ditentukan oleh tinggi dan lebar elemen yang diterapkan. Anda juga dapat menggunakan nilai spreadRadius opsional untuk menyebarkan jangkauan bayangan. Lebih lanjut tentang itu nanti.
Mulailah dengan menambahkan bayangan sederhana pada penanda merah.
Dalam aturan CSS .red, tambahkan properti box-shadow dengan nilai 5px untuk offsetX, 5px untuk offsetY, dan merah untuk warna.
Langkah 87
Seperti yang Anda lihat, Anda menambahkan bayangan merah sederhana di sekitar penanda Anda dengan ukuran 5 piksel ke kanan, dan 5 piksel ke bawah.
Tetapi bagaimana jika Anda ingin memposisikan bayangan Anda di sisi yang berlawanan? Anda dapat melakukannya dengan menggunakan nilai negatif untuk offsetX dan offsetY.
Perbarui nilai untuk properti box-shadow, dan setel offsetX ke -5px, dan offsetY ke -5px.
Perhatikan bahwa tepi bayangan tajam. Ini karena ada nilai blurRadius opsional untuk properti box-shadow :
box-shadow: offsetX offsetY blurRadius warna;
Jika nilai blurRadius tidak disertakan, defaultnya adalah 0 dan menghasilkan tepi yang tajam. Semakin tinggi nilai blurRadius, semakin besar efek blurnya.
Dalam aturan CSS .green, tambahkan properti box-shadow dengan nilai 5px untuk offsetX, 5px untuk offsetY, 5px untuk blurRadius, dan hijau untuk warna.
Langkah 89
Tetapi bagaimana jika Anda ingin memperluas bayangan lebih jauh? Anda dapat melakukannya dengan nilai spreadRadius opsional:
box-shadow: offsetX offsetY blurRadius spreadRadius color;
Seperti blurRadius, spreadRadius default ke 0 jika tidak disertakan.
Berlatihlah dengan menambahkan bayangan 5 piksel tepat di sekitar penanda biru.
Dalam aturan CSS .blue, tambahkan properti box-shadow dengan nilai 0 untuk offsetX, 0 untuk offsetY, 0 untuk blurRadius, 5px untuk spreadRadius, dan biru untuk warna.
Sekarang setelah Anda terbiasa dengan properti box-shadow, Anda dapat menyelesaikan bayangan, dimulai dengan penanda merah.
Dalam aturan CSS .red, perbarui nilai untuk properti box-shadow sehingga offsetX adalah 0, offsetY adalah 0, blurRadius adalah 20px, spreadRadius adalah 0, dan warna adalah merah. Ingatlah bahwa Anda tidak perlu menambahkan unit ke nilai nol.
Langkah 91
Selanjutnya, perbarui nilai warna properti box-shadow penanda merah.
Ganti warna bernama dengan fungsi rgba. Gunakan nilai 83 untuk merah, 14 untuk hijau, 14 untuk biru dan 0,8 untuk saluran alfa.
Langkah 92
Bayangan untuk penanda hijau dan biru Anda akan memiliki posisi, kabur, dan menyebar yang sama. Satu-satunya perbedaan adalah warna.
Dalam aturan CSS .green dan .blue, perbarui nilai untuk properti box-shadow sehingga offsetX adalah 0, offsetY adalah 0, blurRadius adalah 20px, dan spreadRadius adalah 0. Biarkan warna hijau dan biru untuk saat ini.
Langkah 93
Untuk properti box-shadow penanda hijau, ganti nama warna dengan kode warna hex. Gunakan nilai 3B untuk merah, 7E untuk hijau, 20 untuk biru, dan CC untuk saluran alfa.
Terakhir, untuk properti box-shadow penanda biru, ganti warna bernama dengan fungsi hsla. Gunakan nilai 223 untuk rona, 59% untuk saturasi, 31% untuk kecerahan, dan 0,8 untuk saluran alfa.
Dan dengan itu, set spidol berwarna Anda sudah lengkap! Bagus sekali.
Download HTML script Final DISINI
Download CSS script Final DISINI
Postingan
