Dalam kursus ini, Anda akan mempelajari cara menggunakan beberapa teknik CSS tingkat menengah dengan mengkode halaman web lukisan Picasso Anda sendiri. Anda akan belajar tentang ikon SVG, pemosisian CSS, dan meninjau keterampilan CSS lain yang telah Anda pelajari.
Mulailah dengan menyiapkan struktur HTML Anda. Tambahkan deklarasi <!DOCTYPE> dan elemen html dengan atribut lang disetel ke en. Di dalam elemen html, tambahkan elemen kepala dan elemen tubuh.
Langkah 2
Di dalam elemen head Anda, tambahkan tag meta dengan atribut charset yang disetel ke utf-8. Tambahkan juga elemen judul dengan teks Picasso Painting.
Lanjutkan dan tautkan file CSS Anda sekarang, meskipun Anda belum menulis CSS apa pun.
Tambahkan elemen link dengan rel stylesheet dan href dari styles.css.
Langkah 4
FontAwesome adalah perpustakaan ikon bertenaga SVG, banyak di antaranya tersedia secara bebas untuk digunakan. Anda akan menggunakan beberapa ikon ini dalam proyek ini, jadi Anda harus menautkan lembar gaya eksternal ke HTML Anda.
Tambahkan elemen tautan dengan rel stylesheet dan
href: https://use.fontawesome.com/releases/v5.8.2/css/all.css.
Untuk memulai lukisan Anda, beri elemen tubuh Anda warna latar belakang rgb (184, 132, 46).
Langkah 6
Di dalam tag tubuh Anda, tambahkan elemen div. Berikan id dinding belakang.
Gunakan pemilih id untuk memberi elemen dengan dinding belakang id warna latar belakang #8B4513.
Langkah 9
Biasanya, HTML dirender dengan cara top-down. Elemen di bagian atas kode diposisikan di bagian atas halaman. Namun, seringkali Anda mungkin ingin memindahkan elemen ke posisi yang berbeda. Anda dapat melakukan ini dengan properti posisi.
Setel properti position untuk elemen #back-wall ke absolute. Posisi absolut mengeluarkan elemen dari aliran dokumen top-down dan memungkinkan Anda menyesuaikannya relatif terhadap wadahnya.
Saat elemen diposisikan secara manual, Anda dapat menggeser tata letaknya dengan atas, kiri, kanan, dan bawah. Setel elemen #back-wall agar memiliki nilai teratas 0, dan nilai kiri 0.
Langkah 10
Properti z-index digunakan untuk membuat "lapisan" untuk elemen HTML Anda. Jika Anda terbiasa dengan alat pengeditan gambar, Anda mungkin pernah bekerja dengan layer sebelumnya. Ini adalah konsep yang serupa.
Elemen dengan nilai indeks-z yang lebih tinggi akan tampak berlapis di atas elemen dengan nilai indeks-z yang lebih rendah. Ini dapat dikombinasikan dengan pemosisian di pelajaran sebelumnya untuk menciptakan efek yang unik.
Karena elemen dinding belakang perlu muncul "di belakang" elemen lain yang akan Anda buat, beri elemen dinding belakang indeks-z -1.
Langkah 11
Di bawah elemen #back-wall Anda, buat div dengan kelas karakter. Di sinilah Anda akan membuat karakter lukisan Anda.
Langkah 12
Di dalam elemen .characters itu, buat div lain dengan id offwhite-character.
Langkah 13
Buat empat elemen div di dalam elemen offwhite-character Anda. Berikan elemen div tersebut nilai id berikut, secara berurutan: white-hat, black-mask, gray-instrument, tan-table.
Langkah 14
Karakter ini membutuhkan mata. Buat dua elemen div di elemen #black-mask. Beri mereka kelas mata kiri dan mata kanan, dalam urutan itu.
Buat beberapa "titik" untuk instrumen. Tambahkan lima elemen div dalam elemen #gray-instrument Anda. Setel kelas masing-masing ke titik hitam.
Langkah 16
Menggunakan pemilih id, buat aturan untuk elemen dengan karakter id offwhite. Berikan lebar 300px, tinggi 550px, dan warna latar GhostWhite.
Pindahkan karakter #offwhite ke tempatnya dengan memberinya posisi absolut, nilai teratas 20%, dan nilai kiri 17,5%.
Langkah 18
Menggunakan pemilih id, gaya elemen dengan topi putih id. Berikan lebar dan tinggi 0, dan gaya perbatasan padat.
Kelihatannya tidak benar. Tetapkan border-width 0 120px 140px 180px untuk mengatur ukuran topi dengan benar.
Langkah 20
Sekarang Anda memiliki kotak besar. Berikan border-top-color, border-right-color, dan border-left-color transparan. Setel border-bottom-color ke GhostWhite. Ini akan membuatnya terlihat lebih seperti topi.
Beri topi posisi absolut, nilai teratas -140px, dan nilai kiri 0.
Menggunakan pemilih id, buat aturan untuk elemen dengan id black-mask. Berikan lebar 100%, tinggi 50px, dan warna latar rgb(45, 31, 19).
Langkah 23
Berikan topeng posisi absolut, dan nilai atas dan kiri 0.
Untuk memastikan Anda dapat melihat topeng, berikan indeks-z 1.
Langkah 25
Menggunakan pemilih id, beri elemen dengan instrumen abu-abu id lebar 15%, tinggi 40%, dan warna latar belakang rgb (167, 162, 117).
Langkah 26
Sekarang pindahkan ke tempatnya dengan posisi absolute, nilai teratas 50px, dan nilai kiri 125px.
Setel z-indeks ke 1.
Langkah 28
Gunakan pemilih kelas untuk membuat aturan untuk elemen dengan kelas titik hitam. Atur lebar menjadi 10px, tinggi menjadi 10px, dan warna latar belakang menjadi rgb(45, 31, 19).
Langkah 29
Titik-titik ini sedikit terlalu persegi. Berikan kelas titik hitam radius batas 50% untuk memperbaikinya.
Langkah 30
Pindahkan titik ke tempatnya dengan menyetel tampilan ke blok, margin ke otomatis, dan margin atas ke 65%.
Langkah 31
Gunakan pemilih id untuk menata elemen dengan tabel id tan. Beri lebar 450px, tinggi 140px, dan warna latar belakang #D2691E.
Langkah 32
Pindahkan tabel ke tempatnya dengan memberinya posisi absolut, nilai teratas 275px, dan nilai kiri 15px.
Langkah 33
Beri tabel indeks-z 1.
Langkah 34
Setelah elemen div#offwhite-character Anda, tambahkan div dengan id karakter hitam.
Di dalam elemen #black-character baru Anda, tambahkan tiga elemen div dengan nilai id berikut, secara berurutan: topi hitam, topeng abu-abu, kertas putih.
Langkah 36
Topeng membutuhkan mata. Di dalam elemen #gray-mask Anda, tambahkan dua elemen div. Yang pertama harus mengatur kelas ke mata kiri, dan yang kedua harus mengatur kelas ke mata kanan.
Langkah 37
Saatnya menggunakan beberapa ikon FontAwesome.
Elemen i digunakan untuk teks idiomatis, atau teks yang terpisah dari isi teks "normal". Ini bisa untuk teks miring, seperti istilah ilmiah, atau untuk ikon seperti yang disediakan oleh FontAwesome.
Di dalam elemen #white-paper Anda, tambahkan empat elemen i. Beri mereka semua nilai kelas fas fa-music.
Kelas khusus ini adalah cara FontAwesome menentukan ikon mana yang akan dimuat. fas menunjukkan kategori ikon (FontAwesome Solid, di sini), sedangkan fa-music memilih ikon tertentu.
Gunakan pemilih id untuk membuat aturan untuk elemen dengan karakter hitam id. Atur lebar menjadi 300px, tingginya menjadi 500px, dan warna latar menjadi rgb(45, 31, 19).
Langkah 39
Pindahkan elemen #black-character ke tempatnya dengan menyetel posisi ke absolut, atas ke 30%, dan kiri ke 59%.
Gunakan pemilih id untuk membuat aturan untuk elemen dengan topi hitam id. Berikan lebar 0, tinggi 0, dan gaya perbatasan solid.
Atur lebar batas #black-hat menjadi 150px 0 0 300px.
Langkah 42
Sama seperti dengan #white-hat Anda, Anda harus memberi gaya pada perbatasan untuk elemen #black-hat. Berikan border-top-color, border-right-color, dan border-bottom-color transparan. Setel warna tepi kiri ke rgb(45, 31, 19).
Sekarang posisikan elemen #black-hat. Berikan posisi absolut, dengan bagian atas -150px dan kiri 0.
Langkah 44
Menggunakan pemilih id, gaya elemen dengan topeng abu-abu id. Berikan lebar 150px, tinggi 150px, dan warna latar rgb(167, 162, 117).
Langkah 45
Posisikan elemen #gray-mask dengan mengatur position ke absolute, atas ke -10px, dan kiri ke 70px.
Menggunakan pemilih id, buat aturan untuk kertas putih id. Atur lebar menjadi 400px, tinggi menjadi 100px, dan warna latar belakang menjadi GhostWhite.
Langkah 47
Beri #white-paper posisi absolut, bagian atas 250px, dan kiri -150px untuk memindahkannya ke tempatnya.
Setel z-index elemen #white-paper ke 1.
Langkah 49
Ikon FontAwesome hadir dengan gayanya sendiri untuk menentukan ikon. Namun, Anda masih dapat mengatur gaya sendiri, untuk mengubah hal-hal seperti warna dan ukuran. Untuk saat ini, gunakan pemilih kelas untuk menargetkan ikon dengan musik fa kelas. Atur tampilan ke inline-block, margin-top menjadi 8%, dan margin-left menjadi 13%.
Langkah 50
Di bawah elemen #black-character Anda, tambahkan dua elemen div baru. Ini akan menjadi selendang. Beri keduanya kelas biru. Kemudian beri yang pertama id biru-kiri, dan yang kedua id biru-kanan.
Gunakan pemilih kelas untuk menargetkan elemen baru dengan kelas biru. Atur background-color ke #1E90FF.
Langkah 52
Pilih elemen dengan id biru-kiri menggunakan pemilih id. Berikan lebar 500px dan tinggi 300px.
Sekarang atur posisinya menjadi absolut, atas menjadi 20%, dan kiri menjadi 20%.
Langkah 54
Selanjutnya, targetkan elemen dengan id biru-kanan menggunakan pemilih id. Atur lebar menjadi 400px dan tinggi menjadi 300px.
Langkah 55
Berikan elemen #blue-right posisi yang benar dengan posisi disetel ke absolut, setelan atas ke 50%, dan setelan kiri ke 40%.
Di bawah elemen .blue Anda, tambahkan div lain. Berikan nilai id karakter oranye.
Langkah 57
Di dalam elemen #orange-character itu, tambahkan empat elemen div. Beri mereka nilai id topi hitam-bulat, mata-div, segitiga, dan gitar, secara berurutan.
Langkah 58
Elemen
#eyes-div harus memiliki beberapa mata. Tambahkan dua elemen div di
dalamnya. Beri yang pertama kelas mata kiri, dan berikan kelas kedua
mata kanan.
Di dalam div #triangles, Anda perlu menambahkan elemen yang akan menjadi segitiga Anda. Buat tiga puluh elemen div dan beri masing-masingnya segitiga kelas.
Di dalam elemen #guitar, buat tiga elemen div. Berikan dua yang pertama nilai kelas gitar. Kemudian berikan id pertama gitar-kiri, dan yang kedua id gitar-kanan. Tambahkan id ke div ketiga dengan nilai leher gitar.
Div ketiga seharusnya tidak memiliki kelas gitar.
Langkah 61
Gunakan ikon FontAwesome lain untuk .gitar Anda. Di dalam elemen #guitar-left dan #guitar-right, tambahkan elemen i dan beri kelas fas fa-bars.
Langkah 62
Pilih elemen karakter oranye Anda dengan pemilih id. Berikan lebar 250px, tinggi 550px, dan warna latar rgb(240, 78, 42).
Berikan elemen #orange-character posisi absolut, atas 25%, dan kiri 40%.
Langkah 64
Gaya elemen dengan id black-round-hat menggunakan pemilih id. Atur lebar menjadi 180px, tinggi menjadi 150px, dan warna latar menjadi rgb(45, 31, 19).
Elemen #black-round-hat mungkin harus bulat. Berikan radius batas 50% untuk memperbaikinya.
Pindahkan elemen #black-round-hat ke tempatnya dengan posisi absolute, bagian atas -100px, dan kiri 5px.
Langkah 67
Letakkan elemen #black-round-hat pada layer yang benar dengan z-index -1.
Langkah 68
Gunakan pemilih id untuk membuat aturan untuk elemen dengan id eyes-div. Atur lebar menjadi 180px dan tinggi menjadi 50px.
Langkah 69
Sekarang pindahkan elemen #eyes-div ke posisinya dengan position disetel ke absolute, top disetel ke -40px, dan left disetel ke 20px.
Langkah 70
Beri elemen #eyes-div indeks-z 3.
Targetkan elemen dengan segitiga id menggunakan pemilih id. Atur lebar menjadi 250px dan tinggi menjadi 550px.
Langkah 72
Buat pemilih kelas untuk elemen dengan kelas segitiga. Atur lebar ke 0 dan tinggi ke 0.
Langkah 73
Berikan gaya pada batas elemen .triangle Anda. Atur border-style menjadi solid dan border-width menjadi 42px 45px 45px 0.
Langkah 74
Berikan elemen .triangle Anda warna yang benar. Atur border-top-color, border-bottom-color, dan border-left-color menjadi transparan. Atur border-right-color ke Gold.
Sesuaikan tata letak elemen .triangle dengan tampilan inline-block.
Sekarang gunakan pemilih id untuk gitar.
Langkah 77
Di pemilih #gitar yang sama, atur posisi ke absolut,
Berikan aturan #gitar z-indeks 3.
Sekarang gunakan pemilih kelas untuk menargetkan gitar. Ini akan memberi gaya pada dua "bagian" gitar Anda. Atur lebar menjadi 150px, tinggi menjadi 120px, warna latar menjadi Goldenrod, dan radius batas menjadi 50%.
Pilih id dengan nilai guitar-left, dan atur position ke absolute dan left ke 0px.
Langkah 81
Pilih id dengan nilai guitar-right, dan atur juga position menjadi absolute. Kali ini, atur kiri ke 100px.
Langkah 82
Sekarang Anda perlu memindahkan ikon bilah ke tempatnya. Buat pemilih kelas untuk kelas fa-bars. Atur tampilan untuk memblokir, margin-top menjadi 30%, dan margin-left menjadi 40%.
Gunakan pemilih id untuk membuat aturan untuk leher gitar id. Atur lebar menjadi 200px, tinggi menjadi 30px, dan warna latar menjadi #D2691E.
Langkah 84
Sekarang pindahkan elemen #guitar-neck dengan posisi absolute, nilai atas 45px, dan nilai kiri 200px.
Langkah 85
Beri elemen #guitar-neck indeks-z 3.
Langkah 86
Saatnya menata elemen dengan kelas mata. Gunakan pemilih kelas untuk mengatur lebar menjadi 35px, tinggi menjadi 20px, warna latar menjadi #8B4513, dan radius batas menjadi 20px 50%.
Langkah 87
Targetkan kelas dengan nilai kanan dan atur posisi ke absolut, atas ke 15px, dan kanan ke 30px.
Langkah 88
Untuk kelas dengan nilai kiri, buat pemilih dan atur posisinya menjadi absolut, bagian atas menjadi 15px, dan kiri menjadi 30px.
Satu langkah terakhir. Ikon FontAwesome agak terlalu kecil. Targetkan semuanya dengan pemilih kelas untuk fas, dan atur ukuran font menjadi 30px.
Dengan itu, lukisan Picasso Anda selesai!
Download script lengkap picasso painting DISINI
Postingan
