Dalam kursus ini, Anda akan membangun cakrawala kota. Anda akan mempelajari cara mengonfigurasi variabel CSS sehingga Anda dapat menggunakannya kembali kapan pun Anda mau.
Selamat datang di proyek CSS Variables Skyline! Mulailah dengan menambahkan deklarasi html !DOCTYPE di bagian atas dokumen sehingga browser mengetahui jenis dokumen yang dibacanya.
Langkah 2
Tambahkan tag html pembuka dan penutup di bawah DOCTYPE sehingga Anda memiliki tempat untuk mulai meletakkan beberapa kode. Pastikan untuk mengatur bahasa ke bahasa Inggris.
Langkah 3
Selanjutnya, tambahkan tag pembuka dan penutup kepala dan badan di dalam elemen html.
Langkah 4
Di dalam head, buat elemen meta dengan rangkaian karakter UTF-8, elemen judul dengan judul Cakrawala Kota, dan elemen link yang menautkan file styles.css Anda.
Di CSS, Anda dapat menargetkan semuanya dengan tanda bintang. Tambahkan batas ke semuanya dengan menggunakan pemilih *, dan berikan batas hitam solid 1px. Ini adalah trik yang membantu memvisualisasikan di mana elemen berada dan ukurannya. Anda akan menghapusnya nanti.
Langkah 6
Juga tambahkan ukuran kotak dari kotak perbatasan ke semuanya. Ini akan membuat perbatasan yang Anda tambahkan tidak menambahkan ukuran apa pun ke elemen Anda.
Anda dapat melihat badannya (ini adalah kotak paling dalam di halaman Anda); kotak di sekitarnya adalah elemen html. Buat tubuh Anda memenuhi seluruh viewport dengan memberikan ketinggian 100vh. Hapus margin default dari badan dengan menyetel margin ke 0. Terakhir, setel properti luapan ke tersembunyi untuk menyembunyikan bilah gulir apa pun yang muncul saat sesuatu melewati viewport.
Buat elemen div di body dengan class background-buildings. Ini akan menjadi wadah untuk sekelompok bangunan.
Langkah 9
Berikan elemen .background-buildings Anda lebar dan tinggi 100% untuk menjadikannya lebar dan tinggi penuh induknya, badan.
Sarang div dengan kelas bb1 di wadah bangunan latar belakang. Buka file styles.css Anda, dan beri .bb1 lebar 10% dan tinggi 70%. "bb" adalah singkatan dari "background building", ini akan menjadi bangunan pertama Anda.
Sarang empat elemen div dalam wadah .bb1. Beri mereka kelas bb1a, bb1b, bb1c, dan bb1d dalam urutan itu. Gedung ini akan memiliki empat bagian.
Langkah 12
Berikan properti lebar dan tinggi bangunan Anda dengan nilai berikut: 70% dan 10% ke .bb1a, 80% dan 10% ke .bb1b, 90% dan 10% ke .bb1c, dan 100% dan 70% ke .bb1d . Ingatlah bahwa persentase ini relatif terhadap induknya dan perhatikan bahwa tingginya akan bertambah hingga 100% - mengisi wadah secara vertikal.
Langkah 13
Tengahkan bagian bangunan Anda dengan mengubah elemen .bb1 menjadi induk flexbox. Gunakan properti flex-direction dan align-items untuk memusatkan anak-anak.
Sekarang Anda memiliki sesuatu yang menyerupai bangunan. Anda siap membuat variabel pertama Anda. Deklarasi variabel dimulai dengan dua tanda hubung (-) dan diberi nama dan nilai seperti ini: --nama-variabel: nilai;. Dalam aturan untuk kelas bb1, buat variabel bernama --building-color1 dan beri nilai #999.
Langkah 15
Untuk menggunakan variabel, masukkan nama variabel dalam tanda kurung dengan var di depannya seperti ini: var(--variable-name). Nilai apa pun yang Anda berikan pada variabel akan diterapkan ke properti apa pun yang Anda gunakan.
Tambahkan variabel --building-color1 yang Anda buat di langkah sebelumnya sebagai nilai properti background-color dari kelas .bb1a.
Gunakan variabel yang sama dengan background-color kelas .bb1b, .bb1c, dan .bb1d untuk mengisi sisa bangunan.
Ubah nilai variabel Anda dari #999 menjadi #aa80ff dan Anda dapat melihat bagaimana penerapannya di mana pun Anda menggunakan variabel tersebut. Ini adalah keuntungan utama menggunakan variabel, dapat dengan cepat mengubah banyak nilai di stylesheet Anda hanya dengan mengubah nilai variabel.
Langkah 18
Bangunan pertama Anda terlihat cukup bagus sekarang. Sarang tiga elemen div baru dalam wadah .background-buildings dan beri mereka kelas bb2, bb3, dan bb4 dalam urutan itu. Ini akan menjadi tiga bangunan lagi sebagai latar belakang.
Berikan properti lebar dan tinggi bangunan baru: 10% dan 50% untuk .bb2, 10% dan 55% untuk .bb3, dan 11% dan 58% untuk .bb4. Anda akan menggunakan hampir semua unit berbasis persen dan beberapa kotak fleksibel untuk proyek ini, jadi semuanya akan sepenuhnya responsif.
Langkah 20
Bangunan-bangunan saat ini ditumpuk di atas satu sama lain. Sejajarkan bangunan dengan mengubah elemen .background-buildings menjadi induk flexbox. Gunakan properti align-items dan justify-content untuk menempatkan bangunan secara merata di bagian bawah elemen.
Bangunannya terlalu luas. Peras keduanya dengan menambahkan dua elemen div kosong ke bagian atas elemen .background-buildings, dua lagi di bagian bawahnya, dan satu lagi di antara .bb3 dan .bb4. Ini akan ditambahkan sebagai elemen dengan jarak yang sama di seluruh wadah, secara efektif memindahkan bangunan lebih dekat ke tengah.
Langkah 22
Buat variabel baru di bawah variabel --building-color1 Anda. Beri nama variabel baru Anda --building-color2 dan beri nilai #66cc99. Kemudian atur sebagai background-color dari .bb2.
Itu tidak berhasil. Anda harus menambahkan nilai fallback ke variabel dengan meletakkannya sebagai nilai kedua di mana Anda menggunakan variabel seperti ini: var(--variable-name, fallback-value). Properti akan menggunakan nilai fallback saat ada masalah dengan variabel. Tambahkan nilai fallback hijau ke background-color dari .bb2.
Langkah 24
Buat variabel baru di bawah yang lain bernama --building-color3 dan beri nilai #cc6699. Kemudian gunakan itu sebagai background-color dari kelas .bb3 dan berikan nilai fallback pink.
Langkah 25
Itu tidak berhasil, karena variabel yang Anda deklarasikan di .bb1 tidak mengalir ke elemen saudara .bb2 dan .bb3. Begitulah cara kerja CSS. Karena itu, variabel sering dideklarasikan di pemilih :root. Ini adalah pemilih level tertinggi di CSS; menempatkan variabel Anda di sana akan membuatnya dapat digunakan di mana saja. Tambahkan pemilih :root ke bagian atas stylesheet Anda, dan pindahkan semua deklarasi variabel Anda ke sana.
Sekarang setelah Anda mengatasi bug dan bangunan memiliki warna yang tepat, Anda dapat menghapus nilai fallback di dua tempat yang digunakan. Silakan dan lakukan itu sekarang.
Langkah 27
Buat variabel lain bernama --building-color4 dan beri nilai #538cc6. Pastikan itu ada di pemilih :root kali ini. Kemudian gunakan untuk mengisi bangunan terakhir.
Langkah 28
Bangunan latar belakang mulai terlihat cukup bagus. Buat div baru di bawah elemen .background-buildings dan berikan kelas bangunan latar depan. Ini akan menjadi wadah lain untuk lebih banyak bangunan.
Langkah 29
Anda ingin wadah .foreground-buildings diletakkan langsung di atas elemen .background-buildings . Berikan lebar dan tinggi 100%, atur posisinya menjadi absolut, dan bagian atas menjadi 0. Ini akan membuatnya berukuran sama dengan badan dan memindahkan awalnya ke pojok kiri atas.
Langkah 30
Sarang enam elemen div di dalam .foreground-buildings dan beri mereka kelas fb1 hingga fb6 dalam urutan itu. "fb" adalah singkatan dari "gedung latar depan". Ini akan menjadi enam bangunan lagi untuk latar depan.
Beri enam elemen baru nilai lebar dan tinggi ini: 10% dan 60% ke .fb1, 10% dan 40% ke .fb2, 10% dan 35% ke .fb3, 8% dan 45% ke .fb4, 10% dan 33% ke .fb5, dan 9% dan 38% ke .fb6.
Langkah 32
Tambahkan properti dan nilai tampilan, align-items, dan justify-content yang sama ke .foreground-buildings yang Anda gunakan di .background-buildings. Sekali lagi, ini akan menggunakan Flexbox untuk menempatkan bangunan secara merata di bagian bawah wadahnya.
Anda harus mengoptimalkan kode Anda. Pindahkan posisi dan properti teratas serta nilai dari .foreground-buildings ke .background-buildings. Kemudian pilih .background-buildings dan .foreground-buildings di sana, terapkan gaya tersebut secara efektif ke kedua elemen. Anda dapat menggunakan koma (,) untuk memisahkan pemilih seperti ini: pemilih1, pemilih2.
Sekarang setelah Anda melakukan itu, Anda dapat menghapus deklarasi .foreground-buildings lama dan semua propertinya karena tidak diperlukan lagi.
Langkah 35
Cakrawala datang bersamaan. Isi properti background-color dari bangunan latar depan. Gunakan variabel --building-color1 untuk mengisi .fb3 dan .fb4, --building-color2 untuk .fb5, --building-color3 untuk .fb2 dan .fb6, dan --building-color4 untuk .fb1.
Satukan bangunan lagi dengan menambahkan dua elemen div kosong di bagian atas dan bawah elemen .foreground-buildings, dan satu lagi di antara .fb2 dan .fb3.
Langkah 37
Pindahkan posisi .fb4 relatif ke tempatnya sekarang dengan menambahkan posisi relatif dan kiri 10% ke sana. Lakukan hal yang sama untuk .fb5 tetapi gunakan kanan, bukan kiri. Ini akan menutupi ruang putih yang tersisa di antara bangunan.
Kode Anda mulai menjadi cukup panjang. Tambahkan komentar di atas kelas .fb1 yang bertuliskan FOREGROUND BUILDINGS - "fb" singkatan dari "foreground building" untuk membantu orang memahami kode Anda. Di atas kelas .bb1 tambahkan komentar lain yang bertuliskan BACKGROUND BUILDINGS - "bb" adalah singkatan dari "background building". Jika Anda tidak ingat, komentar di CSS terlihat seperti ini: /* Komentar di sini */.
Langkah 39
Buat variabel baru di :root bernama --window-color1 dan beri nilai hitam. Ini akan menjadi warna sekunder untuk bangunan ungu.
Langkah 40
Gradien dalam CSS adalah cara untuk bertransisi antar warna melintasi jarak elemen. Mereka diterapkan ke properti latar belakang dan sintaksnya terlihat seperti ini:
Anda ingin menambahkan gradien yang sama ke dua bagian berikutnya. Alih-alih melakukan itu, buat pemilih kelas baru bernama bb1-window, dan pindahkan properti tinggi dan latar belakang serta nilai dari .bb1a ke pemilih kelas baru.
Langkah 42
Tambahkan kelas bb1-window baru ke elemen .bb1a, .bb1b, dan .bb1c. Ini akan menerapkan gradien ke mereka.
Langkah 43
Anda tidak memerlukan properti height atau background-color di .bb1a, .bb1b atau .bb1c lagi, jadi lanjutkan dan hapus.
Gradien dapat menggunakan warna sebanyak yang Anda inginkan seperti ini:
Sedikit tersembunyi di balik bangunan latar depan, tetapi Anda dapat melihat tiga gradien warna di sana. Karena Anda menggunakannya sekarang, hapus properti background-color dari .bb1d.
Anda dapat menentukan di mana Anda ingin menyelesaikan transisi gradien dengan menambahkannya ke warna seperti ini:
Langkah 47
Hapus oranye dari gradien .bb1d dan ubah 80% menjadi 50%. Ini akan membuat --building-color1 solid untuk bagian atas, dan kemudian beralih ke --window-color1 untuk bagian bawah.
Langkah 48
Sarang dua elemen div baru di dalam .bb2, beri mereka kelas bb2a dan bb2b, dalam urutan itu. Ini akan menjadi dua bagian untuk bangunan ini.
Beri .bb2b lebar dan tinggi 100% agar memenuhi wadah bangunan. Anda akan menambahkan sesuatu di atas nanti.
Langkah 50
Buat variabel baru di :root bernama window-color2 dengan nilai #8cd9b3. Ini akan digunakan sebagai warna sekunder untuk bangunan ini.
Transisi gradien sering kali berubah secara bertahap dari satu warna ke warna lainnya. Anda dapat membuat perubahan menjadi garis padat seperti ini:
Tambahkan linear-gradient ke .bb2b yang menggunakan --building-color2 dari 0% hingga 6% dan --window-color2 dari 6% hingga 9%.
Anda dapat melihat perubahan warna keras di bagian atas bagian. Ubah jenis gradien dari gradien linier menjadi gradien linier berulang untuk bagian ini. Ini akan membuat keempat warna gradien Anda berulang hingga mencapai bagian bawah elemen; memberi Anda beberapa garis, dan menyelamatkan Anda dari keharusan menambahkan banyak elemen untuk membuatnya.
Langkah 53
Dalam beberapa langkah berikutnya, Anda akan menggunakan beberapa trik dengan batas CSS untuk mengubah bagian .bb2a menjadi segitiga di bagian atas bangunan. Pertama, hapus background-color dari .bb2 karena Anda tidak membutuhkannya lagi.
Buat dan tambahkan properti berikut ke .bb2a:
Langkah 55
Selanjutnya, hapus lebar dan tinggi dari .bb2a, dan ubah border-left dan border-right untuk menggunakan 5vw, bukan 1vw. Elemen sekarang akan memiliki ukuran nol dan batas akan menyatu di tengah.
Selanjutnya, ubah kedua #999 dari .bb2a menjadi transparan. Ini akan membuat batas kiri dan kanan tidak terlihat.
Langkah 57
Hapus properti dan nilai margin dan border-top dari .bb2a untuk mengubahnya menjadi segitiga untuk bagian atas bangunan.
Terakhir, pada properti border-bottom dari .bb2a, ubah 1vw menjadi 5vh dan ubah warna #000 menjadi variabel --building-color2 Anda. Ini dia, sekarang terlihat bagus! Kapan saja selama proyek ini, Anda dapat mengomentari atau menghapus properti perbatasan yang Anda tambahkan ke semuanya di awal untuk melihat seperti apa bangunan itu saat dihapus di akhir.
Langkah 59
Ke gedung berikutnya! Buat variabel baru bernama --window-color3 di :root dan beri nilai #d98cb3. Ini akan menjadi warna sekunder untuk bangunan merah muda.
Sejauh ini, semua gradien yang Anda buat telah berubah dari atas ke bawah, itulah arah default. Anda dapat menentukan arah lain dengan menambahkannya sebelum warna Anda seperti ini:
Isi .bb3 dengan gradien linier berulang. Gunakan 90deg untuk arah, building-color3 untuk dua warna pertama, dan window-color3 sebesar 15% untuk yang ketiga. Saat Anda tidak menentukan jarak untuk suatu warna, itu akan menggunakan nilai yang masuk akal. Dalam hal ini, dua warna pertama akan default ke 0% dan 7,5% karena dimulai dari 0%, dan 7,5% adalah setengah dari 15%.
Hapus properti dan nilai background-color dari .bb3 karena Anda menggunakan gradien sebagai latar belakang sekarang.
Langkah 62
Bangunan berikutnya akan memiliki tiga bagian. Sarang tiga elemen div di dalam .bb4. Beri mereka kelas bb4a, bb4b dan bb4c dalam urutan itu.
Beri elemen div baru nilai lebar dan tinggi ini: 3% dan 10% ke .bb4a, 80% dan 5% ke .bb4b, dan 100% dan 85% ke .bb4c.
Langkah 64
Hapus properti dan nilai background-color dari .bb4, dan tambahkan ke tiga bagian baru .bb4a, .bb4b, dan .bb4c, sehingga hanya bagian yang diisi.
Anda ingin .bb4 membagikan properti .bb1 yang memusatkan bagian-bagian tersebut. Alih-alih menduplikasi kode itu, buat kelas baru di atas komentar bangunan latar belakang yang disebut pembungkus bangunan. Biarkan kosong untuk saat ini; kelas ini akan digunakan di beberapa tempat untuk menghemat beberapa pengkodean.
Langkah 66
Pindahkan properti dan nilai display, flex-direction, dan align-items dari .bb1 ke kelas building-wrap yang baru.
Tambahkan kelas pembungkus bangunan baru ke elemen .bb1 dan .bb4. Ini akan menerapkan properti pemusatan ke bangunan yang membutuhkannya.
Buat variabel baru bernama --window-color4 di :root dan beri nilai #8cb3d9. Ini akan menjadi warna sekunder untuk bangunan latar terakhir.
Langkah 70
Beri kelas bb4-window lebar 18%, tinggi 90%, dan tambahkan variabel --window-color4 Anda sebagai warna latar.
Langkah 71
Jendela ditumpuk satu sama lain di sebelah kiri bagian, di belakang bangunan ungu. Tambahkan kelas baru di bawah .building-wrap yang disebut window-wrap. Jadikan .window-wrap sebagai wadah flexbox, dan gunakan properti align-items dan justify-content untuk memusatkan elemen anaknya secara vertikal dan menempatkannya secara merata di induknya.
Tambahkan kelas window-wrap baru ke elemen .bb4c.
Langkah 73
Kelihatan bagus! Ke bangunan latar depan! Ubah bangunan .fb1 menjadi tiga bagian dengan menyarangkan tiga elemen div baru di dalamnya. Beri mereka kelas fb1a, fb1b dan fb1c, dalam urutan itu.
Beri .fb1b lebar 60% dan tinggi 10%, dan .fb1c lebar 100% dan tinggi 80%.
Langkah 75
Tambahkan kelas bangunan-bungkus ke elemen .fb1 untuk memusatkan bagian.
Pindahkan properti dan nilai background-color dari .fb1 ke .fb1b.
Langkah 77
Jangan khawatir tentang ruang di bagian bawah, semuanya akan dipindahkan ke bawah nanti saat Anda menambahkan ketinggian ke elemen di bagian atas bangunan.
Tambahkan repeating-linear-gradient ke .fb1c dengan sudut 90 derajat, --building-color4 Anda dari 0% hingga 10% dan transparan dari 10% hingga 15%.
Anda dapat menambahkan beberapa gradien ke elemen dengan memisahkannya dengan koma (,) seperti ini:
Tambahkan pengulangan-linear-gradient ke .fb1c di bawah yang ada; gunakan --building-color4 Anda dari 0% hingga 10% dan --window-color4 dari 10% dan 90%. Ini akan mengisi di belakang gradien yang Anda tambahkan terakhir.
Anda akan menggunakan beberapa trik perbatasan lagi untuk bagian atas. Tambahkan border-bottom dengan nilai 7vh solid var(--building-color4) ke .fb1a. Ini akan menempatkan batas ketinggian 7vh di bagian bawah. Tapi karena elemen memiliki ukuran nol, itu hanya muncul sebagai garis lebar 2px dari batas 1px yang ada di semua elemen.
Langkah 80
Saat Anda memperbesar ukuran batas kiri dan kanan, batas di bagian bawah akan melebar menjadi lebar gabungan lebar batas kiri dan kanan. Tambahkan 2vw solid transparent sebagai nilai properti border-left dan border-right dari .fb1a. Mereka tidak akan terlihat, tetapi itu akan membuat batas di bagian bawah selebar 4vw.
Ke gedung berikutnya! Sarang dua elemen div di dalam .fb2 dan beri mereka kelas fb2a dan fb2b, dalam urutan itu.
Langkah 82
Berikan .fb2a lebar 100% dan .fb2b lebar 100% dan tinggi 75%.
Sarang tiga elemen div di dalam .fb2b dan beri mereka kelas fb2-window. Ini akan menjadi jendela untuk bagian bangunan ini.
Langkah 84
Tambahkan kelas window-wrap Anda ke .fb2b untuk memposisikan elemen jendela baru.
Langkah 85
Beri elemen .fb2-window lebar 22%, tinggi 100%, dan warna latar variabel --window-color3 Anda.
Pindahkan properti dan nilai background-color dari .fb2 ke .fb2b untuk mewarnai bagian dan bukan wadahnya.
Langkah 87
Untuk .fb2a, tambahkan border-bottom 10vh solid var(--building-color3), dan border-left dan border-right 1vw solid transparent. Kali ini trik border akan membuat bentuk trapesium.
Untuk bangunan berikutnya, sarangkan empat elemen div di dalam .fb3 dengan kelas fb3a, fb3b, fb3a lagi, dan fb3b lagi, dalam urutan tersebut. Bangunan ini akan memiliki empat bagian, dan dua bagian atas hampir sama dengan dua bagian bawah.
Berikan elemen .fb3a lebar 80% dan tinggi 15%. Kemudian beri elemen .fb3b lebar 100% dan tinggi 35%.
Hapus properti dan nilai background-color dari .fb3, dan tambahkan ke .fb3a dan .fb3b.
Langkah 91
Tambahkan kelas bangunan-bungkus Anda ke elemen .fb3 untuk memusatkan bagian-bagiannya.
Sarang tiga elemen div baru di elemen .fb3a pertama. Beri mereka masing-masing kelas fb3-window. Ini akan menjadi jendela untuk bagian ini.
Beri elemen .fb3-window lebar 25%, tinggi 80%, dan gunakan variabel --window-color1 Anda sebagai nilai warna latar belakang.
Langkah 94
Tambahkan kelas window-wrap Anda ke elemen .fb3a untuk memusatkan dan menempatkan jendela.
Dengan variabel CSS Anda dapat mengubah nilai tanpa mencari di mana pun di stylesheet. Ubah nilai --window-color1 menjadi #bb99ff.
Langkah 96
Tinggal tiga bangunan lagi. Sarang dua elemen div baru di dalam elemen .fb4 dan beri mereka kelas fb4a dan fb4b, dalam urutan itu. Ingatlah bahwa Anda membalik lokasi .fb4 dan .fb5, jadi itu adalah bangunan ungu paling kanan yang sedang Anda kerjakan sekarang.
Berikan .fb4b lebar 100% dan tinggi 89%.
Langkah 98
Tambahkan variabel --building-color1 Anda sebagai nilai properti background-color dari .fb4b. Kemudian, hapus background-color dari .fb4.
Langkah 99
Sarang enam elemen div di dalam .fb4b dan beri mereka semua kelas jendela fb4.
Berikan elemen .fb4-window lebar 30%, tinggi 10%, dan radius batas 50%. Ini akan membuat beberapa jendela melingkar untuk bangunan ini.
Langkah 101
Isi jendela dengan warna sekunder Anda untuk bangunan ini. Juga tambahkan margin 10% untuk memberi ruang pada jendela.
Langkah 102
Jendela ditumpuk di atas satu sama lain di gedung ungu paling kanan. Ubah bangunan menjadi induk flexbox, dan gunakan properti flex-wrap untuk meletakkan jendela berdampingan, dan dorong ke bawah ke baris baru jika tidak pas.
Bangunan ini akan memiliki segitiga lain di atasnya. Berikan bagian atas border-top 5vh solid transparan, dan border-left 8vw, solid, dan gunakan variabel warna bangunan Anda sebagai warnanya.
Langkah 104
Ke gedung berikutnya! Itu yang hijau di latar depan. Berikan gradien linier berulang dengan warna bangunan Anda dari 0% hingga 5%, dan transparan dari 5% hingga 10%.
Langkah 105Tambahkan repeating-linear-gradient lain di bawah yang baru saja Anda tambahkan. Berikan arah 90 derajat, gunakan warna bangunan Anda dari 0% hingga 12% dan warna jendela 12% hingga 44%. Ini akan membuat banyak jendela persegi panjang.
Langkah 106
Anda tidak memerlukan warna latar belakang untuk bangunan ini lagi sehingga Anda dapat menghapus properti itu.
Akhirnya! Anda berhasil mencapai gedung terakhir! Tambahkan gradien berulang dengan arah 90 derajat. Gunakan warna bangunan dari 0% sampai 10% dan transparan dari 10% sampai 30%.
Langkah 108
Tambahkan gradien berulang lainnya ke bangunan ini; buat sama dengan yang baru saja Anda tambahkan, kecuali jangan tambahkan arah 90 derajat dan gunakan warna jendela Anda alih-alih dua warna transparan.
Langkah 110
Oke, bangunan sudah selesai. Kembali ke pemilih * dan hapus batas yang Anda terapkan pada semuanya di awal dan bangunan akan menyatu.
Tambahkan langit sebagai kelas kedua ke elemen .background-buildings. Anda akan membuat latar belakang untuk kaki langit.
Langkah 112
Beri kelas langit gradien radial. Gunakan #ffcf33 dari 0% hingga 20%, #ffff66 pada 21%, dan #bbeeff pada 100%. Ini akan menambahkan gradien melingkar ke latar belakang yang akan menjadi matahari Anda.
Di bagian atas daftar warna gradien langit, tempat Anda akan meletakkan arah untuk gradien; tambahkan lingkaran sudut terdekat pada 15% 15%,. Ini akan memindahkan awal gradien menjadi 15% dari atas dan kiri. Itu akan membuatnya berakhir di sudut terdekat dan itu akan mempertahankan bentuk lingkaran. Ini adalah beberapa kata kunci yang dibangun ke dalam gradien untuk menjelaskan bagaimana perilakunya.
Langkah 114
Kueri media dapat digunakan untuk mengubah gaya berdasarkan kondisi tertentu, dan terlihat seperti ini:
Langkah 115
Salin dan tempel seluruh kelas langit Anda beserta semua properti dan nilainya ke dalam kueri media. Anda akan membuat skema warna lain untuk kaki langit yang mengubahnya dari siang ke malam.
Catatan: Anda harus men-scroll melewati wilayah yang dapat diedit untuk menyalin kelas.
Di kelas langit dari kueri media, ubah dua nilai warna #ffcf33 menjadi #ccc, #ffff66 menjadi #445, dan #bbeeff menjadi #223. Kemudian Anda dapat mengubah ukuran jendela untuk melihat warna latar berubah.
Langkah 117
Tambahkan pemilih :root ke bagian atas kueri media Anda. Kemudian definisikan ulang keempat variabel --building-color untuk menggunakan nilai #000 di sana.
Step 118
Lastly, in the :root selector of the media query, redefine all four of the --window-color variables to use #777. When you're done, resize the window and watch it go from day to night.
Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great!
Langkah 118
Terakhir, di pemilih :root dari kueri media, tentukan ulang keempat variabel --window-color untuk menggunakan #777. Setelah selesai, ubah ukuran jendela dan lihat dari siang hingga malam.
Variabel terutama digunakan dengan warna, dan begitulah cara Anda menggunakannya di sini. Tetapi mereka dapat diberi nilai apa pun dan digunakan di properti apa pun. Proyek Anda tampak hebat!
Link untuk akses Full Script Klik DISINI
Postingan
0 comments:
Posting Komentar