Background CSS Dasar

-


Hallo teman-teman kali ini saya akan berbagi mengenai CSS background-image digunakan untuk mengatur gambar latar belakang sebuah elemen HTML. Secara default, background gambar akan diulang (repeat) sehingga memenuhi seluruh elemen. Contoh materi yang saya bawakan hanya 1 kreasi yang saya lakukan, jadi silahkan kalian eksplorasi lebih jauh lagi.

Pertama-tama buatlah html sederhana dengan paragraf, link css dan link random saja untuk uji coba seperti dibawah ini.


body:
  • Background Color berguna untuk memberi warna di belakang teks yang diterapkan pada elemen HTML. Warna latar pada CSS akan menempati keseluruhan bagian elemen HTML yaitu mulai dari konten itu sendiri, padding sampai dengan wilayah border namun tidak termasuk margin.   
  • Background Image untuk menetapkan gambar sebagai background elemen HTML. Properti ini menerima masukan berupa URL tempat file gambar tersebut berada.
  • Background Repeat berfungsi untuk mengatur apakah background image yang kita terapkan akan ditampilkan secara berulang atau hanya sekali atau satu buah gambar saja. Jika menggunakan y maka gambar kebawah, Jika x maka akan kesamping.
  • Background Size befungsi untuk menentukan ukuran gambar latar belakang.
  • Background Position untuk menentukan di mana gambar latar belakang harus diposisikan dalam suatu elemen.
p:
  • teks align berguna untuk menempatakan rata kanan pada paragraf secara keseluruhan
  • teks indent berguna untuk menggeser paragraf ke arah kanan
  • leter spacing berguna untuk memberi jarak pada tiap huruf



Komentar

Posting Komentar

Postingan populer dari blog ini

Filter

-
Gambar
 Filter CSS adalah untuk melakukan berbagai efek terhadap suatu elemen biasanya gambar, efek yang bisa dilakukan properti filter misalnya: saturasi warna, brightness, contrast, efek blur, grayscale, sepia, drop-shadow, invert, hue-rotate, opacity. <! 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 >         img {         filter : brightness ( 300 % ) ;        }         /* Filter             brightness(angka%)             constrast(angka%)             blur(angka px)             saturate(angka%)             grayscale(angka%)             sepia(angka%)             hue-rotate(angka deg)             invert(angka%)             opacity(angka%)             drop-shadow(angka%)             */     </ style > </ head > < body >     < im
Baca selengkapnya

Percabangan Python

-
Gambar
 Hallo balik lagi nih diblog saya setelah sekian lama saya tidak membuat blog. kali ini saya akan membahas tentang Percabangan adalah cara yang digunakan untuk mengambil keputusan apabila di dalam program dihadapkan pada kondisi tertentu, jumlah kondisinya bisa satu, dua atau lebih. percabangan mengevaluasi kondisi atau ekspresi yang hasilnya benar atau salah. Kondisi tersebut disebut ekspresi boolean. Hasil dari pengecekan kondisi adalah True atau False. Bila benar (True), maka pernyataan yang ada di dalam blok kondisi tersebut akan dieksekusi. Bila (False), maka blok pernyataan lain yang dieksekusi. Di Python ada 3 jenis pernyataan yang digunakan untuk percabangan, yaitu sebagai berikut: No Pernyataaan Deskripsi 1. if Pernyataan if terdiri dari ekspresi Boolean diikuti oleh satu baris atau lebih pernyataan 2. If…else Bila pernyataan if benar, maka blok pernyataan if dieksekusi. Bila salah, mak
Baca selengkapnya

Transition

-
Gambar
CSS Transition atau Transisi adalah Efek Transis yang memungkinkan sebuah elemen secara bertahap berubah dari satu gaya ke yang lain. <! 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 >         .kotak {         width : 100 px ;         height : 100 px ;         background-color : red ;         transition : 1 s ;        }         .container {         height : 400 px ;         width : 100 px ;         border : 0.1 px solid black ;        }         .container:hover .kotak {         transform : rotate ( 180 deg );         margin-top : 300 px ;         background-color : yellow ;        }     </ style > </ head > < body >     < div class = "container" >         < div class = "kotak" ></ div
Baca selengkapnya