Postingan

Menampilkan postingan dari Juni, 2023

Opacity, RGBA dan HSLA

-
Gambar
<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         div {             width : 300 px ;             height : 300 px ;             background-color : red ;             margin : auto ;             opacity : 0.5 ;         }     </ style > </ head > < body >     < div ></ div > </ body > </ html > Opacity opacity : 0.5 ; opacity: memudar kan elemen html Opacity didalam opacity < body >     < div class = "pertama" >         < div class = "kedua" ></ div >     </ div > </ body > < style >         .pertama {             width : 300 px ;             height : 300 px ;             background-color : red ;             margin : auto ;          
Posting Komentar
Baca selengkapnya

Border Radius

-
Gambar
<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         div {             width : 300 px ;             height : 300 px ;             background-color : red ;             border-radius : 50 px ;             margin : auto ;             text-align : center ;             line-height : 300 px ;         }     </ style > </ head > < body >     < div >Hello guys!</ div > </ body > </ html > Hasil CSS Membuat lingkaran: border-radius : 300 px ; width : 300 px ; height : 300 px ; Border-radius nilai harus sama dengan witdh dan height atau border-radius menggunakan persenanan  Membuat sudut tumpul 1 atau lebih border-top-left-radius : 100 px ; border-bottom-right-radius : 100 px ; Shortcut sudut tumpul 1 atau
Posting Komentar
Baca selengkapnya

CSS: Z-Index, Pengunaan Lain Witdh dan Height

-
Gambar
Halo teman-teman kali ini akan membahas mengenai Z-Index adalah property css yang mulai ada pada css2, fungsinya yaitu untuk mengatur posisi depan atau belakang suatu elemen. Value untuk property z-index berupa angka. Minimum value adalah 0. Tapi untuk browser-browser dengan versi lama bisa berupa angka negatif. Buat html sederhan seperti dibawah < body >         < div class = "pertama" ></ div >     < div class = "kedua" ></ div >     < div class = "ketiga" ></ div > </ body > Styling sederhana seperti dibawah div {     width : 200 px ;     height : 200 px ;     position : absolute ; } .pertama {     background-color : red ; } .kedua {     background-color : blue ; } .ketiga {     background-color : greenyellow ; } Maka box akan bertumpuk dari box 1 paling bawah dan box 3 paling atas, jika ingin memindahkan pada tiap boxnya kalian harus ubah urutan div pada html, contohnya seperti div box 1 pindah menjadi
Posting Komentar
Baca selengkapnya

CCS Position: Relative, Absolute, Fixed, Sticky

-
Gambar
Halo teman-teman kali ini saya akan membawakan materi tentang CSS Position adalah property css yang digunakan untuk menentukan sifat posisi suatu elemen di suatu dokument. Sifat di sini dalam artian elemen bisa berubah, tetap , dan lain lain . Nilai dari propety bisa berbentuk static, relative, abosulute, Fixed dan Sticky Relative Relative adalah posisi dalam CSS yang menempatkan suatu elemen <html> dalam dimensi yang berbeda dengan elemen html lainnya. Penggunaan posisi Relative ini menyebabkan suatu elemen <html> dapat dipindah posisinya sesuai dengan keinginan kita. Pertama buat hmtl sederhana seperti dibawah < body >     < div class = "pertama" ></ div >     < div class = "kedua" ></ div >     < div class = "ketiga" ></ div > </ body > Beri style seperti ini. div {     width : 200 px ;     height : 200 px ; } .pertama {     background-color : red ; } .kedua {     background-color : blue ;  
Posting Komentar
Baca selengkapnya

CSS Clear

-
Gambar
Halo teman-teman kali ini saya akan membawakan meteri mengenai CSS Clear merupakan CSS property yang digunakan untuk membersihkan element yang sebelumnya telah mengalami float. Sehingga, element yang di-clear akan berpisah dari element yang mengalami float dan akan berpindah pada baris baru. Buat html seperti dibawah ini < body >     < div class = "container" >         < img src = "csslogo.png" alt = "logo" >         < p >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi obcaecati assumenda accusantium             ullam quo nobis aliquid rem nostrum quae magni nam odit, voluptate saepe sunt veniam omnis distinctio vel,         </ p >         < div class = "clear-f" ></ div >     </ div > </ body > Beri style seperti dibawah. .container {     width : 500 px ;     border : 5 px solid black ; } img {     width : 140 px ;     float : left ;     margin : 20 px ; } .clear-f {
Posting Komentar
Baca selengkapnya

CSS Float

-
Gambar
Halo teman-teman pada blog kali saya akan membawakan materi tentang CSS Float secara etimologi berarti "mengapung". Property float digunakan untuk menentukan apakah sebuah elemen box harus mengapung (float) atau tidak. Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya. Buat html sederhana seperti dibawah. < body >     < div class = "pertama" ></ div >     < div class = "kedua" ></ div >     < div class = "ketiga" ></ div > </ body > Lalu beri style untuk representasikan float div {     width : 100 px ;     height : 100 px ; } .pertama {     background-color : red ;     float : left ;     margin-left : 20 px ; } .kedua {     background-color : green ; } .ketiga {     background-color : blue ; } Pada gambar dibawah bisa dilihat bahwa box hjau naik keatas dan box merah mengapung/menimpa diatas box hijau Lalu kita bikin parent untuk box 1 sampai 3 < body >  
Posting Komentar
Baca selengkapnya