Langkah 1
Sekarang, Anda seharusnya sudah terbiasa dengan elemen dasar yang harus dimiliki halaman HTML.
Siapkan kode Anda dengan deklarasi DOCTYPE, elemen html dengan bahasa yang disetel ke bahasa Inggris, elemen kepala, dan elemen tubuh.
Langkah 2
Di dalam elemen head, tambahkan tag meta yang menyetel charset ke UTF-8, dan elemen judul dengan nilai Rothko Painting.
Di dalam elemen body, tambahkan elemen img dengan src https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png.
Langkah 3
Dalam model kotak CSS, setiap elemen HTML diperlakukan sebagai kotak dengan empat area.
Bayangkan Anda menerima sebuah kotak dari pengecer online favorit Anda -- isinya adalah item di dalam kotak, atau dalam kasus kita, header, paragraf, atau elemen gambar.
Ubah atribut src di <img> dari https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png menjadi https://cdn.freecodecamp.org/curriculum/css-box- model/diagram-2.png.
Langkah 4
Konten dikelilingi oleh ruang yang disebut padding, mirip dengan cara bungkus gelembung memisahkan item dari kotak di sekitarnya.
Pikirkan perbatasan seperti kotak kardus tempat barang Anda dikirim.
Ubah atribut src menjadi https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png
Langkah 5
Margin adalah area di luar kotak, dan dapat digunakan untuk mengontrol ruang antara kotak atau elemen lain.
Di sini elemen bawah memiliki margin atas yang lebih besar, mendorongnya lebih jauh ke bawah halaman.
Sekarang setelah Anda memahami model kotak CSS, mari kita mulai melukis Rothko.
Hapus elemen <img>.
Langkah 6
Tambahkan elemen div di badan.
Setel atribut kelas sama dengan kanvas. Misalnya, <div class="my-div">.
Ini akan bertindak sebagai kanvas untuk lukisan Anda.
Langkah 7
Sebelum Anda dapat mulai menata div yang Anda tambahkan, Anda perlu menautkan CSS ke HTML Anda.
Tambahkan elemen link untuk menautkan file styles.css Anda. Setel href ke styles.css, dan ingat untuk menyetel atribut rel ke stylesheet.
Langkah 8
Waktu untuk CSS.
Meskipun <div> Anda tidak memiliki teks, itu tetap diperlakukan sebagai kotak berisi konten. Tulis aturan CSS yang menggunakan pemilih kelas .canvas dan atur lebarnya menjadi 500 piksel. Berikut aturan CSS yang menyetel lebar kartu kelas menjadi 300 piksel:
.card {
width: 300px;
}
Langkah 9
Tambahkan properti ketinggian dengan nilai 600px ke aturan .canvas Anda.
Langkah 11
Setiap lukisan membutuhkan bingkai.
Bungkus elemen .canvas di div lain. Berikan div itu kelas bingkai.
Langkah 12
Tulis aturan baru menggunakan pemilih kelas .frame.
Gunakan deklarasi shorthand border untuk memberi elemen .frame border hitam pekat dengan lebar 50px.
Langkah 13
Bingkainya terlalu lebar.
Di .frame, atur lebarnya menjadi 500 piksel.
Langkah 14
Gunakan padding untuk menyesuaikan spasi dalam elemen.
Di .frame, gunakan properti steno padding untuk menambah jarak antara elemen .frame dan .canvas sebesar 50 piksel. Singkatan akan menambah ruang di bagian atas, bawah, kiri, dan kanan batas elemen dan kanvas di dalamnya.
Langkah 15
Gunakan margin untuk menyesuaikan spasi di luar elemen.
Menggunakan properti margin, beri elemen .frame margin vertikal 20px, dan margin horizontal auto. Ini akan memindahkan bingkai ke bawah 20 piksel dan secara horizontal menempatkannya di tengah halaman.
Langkah 16
Tambahkan elemen div baru di dalam elemen .canvas Anda.
Berikan div baru atribut class dengan nilai satu. Ini akan menjadi persegi panjang pertama Anda.
Tulis aturan baru yang menargetkan .one dan atur lebarnya menjadi 425 piksel.
Langkah 18
Sekarang atur tinggi untuk .one hingga 150 piksel.
Setel background-color dari .one ke #efb762.
Langkah 20
Gunakan margin untuk memposisikan elemen .one di kanvas.
Tambahkan properti shorthand margin dengan margin vertikal 20px dan margin horizontal otomatis.
Langkah 21
Sekarang .one dipusatkan secara horizontal, tetapi margin atasnya didorong melewati kanvas dan ke tepi bingkai, menggeser seluruh kanvas ke bawah 20 piksel.
Tambahkan padding 1px ke elemen .canvas untuk memberikan elemen .one sesuatu yang solid untuk didorong.
Menambahkan 1 piksel padding ke atas, bawah, kiri, dan kanan kanvas mengubah dimensinya menjadi 502 piksel x 602 piksel.
Ganti properti padding dengan overflow yang disetel ke hidden - mengubah kanvas kembali ke dimensi aslinya.
Langkah 23
Tambahkan div lain dengan nilai kelas dua tepat di bawah satu elemen Anda. Ini akan menjadi persegi panjang kedua Anda.
Langkah 24
Buat aturan CSS baru menggunakan pemilih .two dan atur lebarnya menjadi 475 piksel.
Setel tinggi elemen .two menjadi 200 piksel.
Langkah 26
Setel background-color elemen .two ke #8f0401.
Langkah 27
Tengahkan elemen .two dengan menyetel marginnya ke otomatis.
Langkah 28
Buat div baru dengan nilai kelas tiga tepat di bawah elemen .two. Ini akan menjadi persegi panjang ketiga Anda.
Langkah 29
Anda tidak selalu harus menggunakan piksel saat menentukan ukuran elemen.
Buat aturan baru, .three, dan atur lebarnya menjadi 91%.
Langkah 30
Atur ketinggian .three menjadi 28%.
Langkah 31
Ubah background-color dari .three menjadi #b20403.
Langkah 32
Tengahkan elemen .three pada kanvas dengan menyetel marginnya ke otomatis.
Langkah 33
Sangat membantu jika margin Anda didorong ke satu arah.
Dalam hal ini, margin bawah elemen .one mendorong .two ke bawah 20 piksel.
Dalam pemilih .two, gunakan properti shorthand margin untuk menyetel margin atas ke 0, margin horizontal ke otomatis, dan margin bawah ke 20px. Ini akan menghapus margin atasnya, memusatkannya secara horizontal, dan mengatur margin bawahnya menjadi 20 piksel.
Warna dan bentuk lukisan Anda terlalu tajam untuk dilewatkan sebagai Rothko.
Gunakan properti filter untuk memburamkan lukisan sebesar 2px dalam elemen .canvas.
Berikut adalah contoh aturan yang menambahkan blur 3px:
P {
filter: blur(3px);
}
Buat aturan yang menargetkan .one dan .two dan tingkatkan efek buramnya sebesar 1 piksel.
Langkah 36
Tingkatkan blur .three kali 2 piksel.
Persegi panjang terlalu kecil dan ujung-ujungnya tidak memiliki kualitas lukisan yang lembut.
Tingkatkan area dan haluskan tepi .one dengan menyetel bayangan kotaknya ke 0 0 3px 3px #efb762.
Langkah 38
Gunakan deklarasi box-shadow yang sama untuk .two, tetapi ubah warnanya dari #efb762 ke #8f0401.
Tambahkan box-shadow ke .three dengan nilai 0 0 5px 5px #b20403.
Langkah 40
Sudut setiap persegi panjang masih terlalu tajam.
Bulatkan setiap sudut elemen .one sebanyak 9 piksel, menggunakan properti border-radius.
Gunakan properti border-radius pada pemilih .two, untuk mengatur radius kiri atas dan radius kanan bawah menjadi 8px, dan radius kanan atas dan radius kiri bawah menjadi 10px.
Langkah 42
Properti border-radius menerima hingga empat nilai untuk membulatkan sudut kiri atas, kanan atas, kanan bawah, dan kiri bawah.
Bulatkan sudut kiri atas .three kali 30 piksel, kanan atas 25 piksel, kanan bawah 60 piksel, dan kiri bawah 12 piksel.
Langkah 43
Putar setiap persegi panjang untuk memberikan tampilan lukisan tangan yang tidak sempurna.
Gunakan properti transformasi pada pemilih .one untuk memutarnya berlawanan arah jarum jam sebesar 0,6 derajat.
Langkah 44
Putar elemen .two searah jarum jam sebesar 0,4 derajat.
Langkah 45
Putar .tiga berlawanan arah jarum jam sebesar 0,2 derajat.
Dengan langkah terakhir ini, lukisan Rothko Anda sudah selesai.
Dapatkan Full Script silahkan Download Disini
Postingan
0 comments:
Posting Komentar