Jumat, 11 Januari 2019

Cara Menuliskan Javascript Ke HTML

Cara Menuliskan Javascript Ke HTML

Cara Menuliskan Javascript Ke HTML - Kali ini saya akan membahas mengenai javascript, dan akan saya mulai dari darsarya yaitu menuliskanya ke HTML, karena javascript dan HTML itu berbeda jenis, maka beda juga metodenya.
Ada 4 cara untuk menuliskan Javascript ke HTML, yaitu
  • Menggunakan tag <script> (internal)
  • Menggunakan tag <script src=""> (external)
  • Menggunakan Event Handler (inline)
  • Menggunakan Link
Dan kali ini saya akan menjelaskan keempatnya.

Menggunakan tag <script>

Cara pertama yaitu menulis kode javascript dalam tag <script> secara internal. Artinya javascript ditulis di file yang sama dengan HTML.
Cara ini bagus digunakan jika kode javascript tidak terlalu panjang. Contoh

HTML
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title> <script>
alert('hello');
</script>
</head>
; <body>
<h1>Hello</h1>
<p>
Belajar Javascript
</p>
</body>
</html>

Hasilnya
Tag Script

Pada contoh diatas tag <script> saya letakan di dalam tag <head>. Kalian bebas menempatkan tag <script>, bisa diawal <body>, bebas. Saran saya kalian meletakanya di akhir tag <body>, karena itu akan membuat javascript dieksekusi setelah HTML selesai diload.

Menggunakan tag <script src=""> (external)

Cara kedua yaitu dengan memanggil file javascript ke HTML di atribut src. Artinya, file javascript dan HTML kita pisah, dan javascriptnya dipanggil di HTML.
Metode ini saya sarankan, apalagi untuk kode javascript yang panjang, berikut syntaxnya.
<script src="file.js"></script>

Untuk format file, yaitu .js, berikut contohnya.

file.js
alert('help me');

HTML
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title> script src="file.js"></script>
</head>
; <body>
<h1>Hello</h1>
<p>
Belajar Javascript
</p>
</body>
</html>

Berikut hasilnya
Tag Sript Src

Sama seperti metode sebelumnya, penempatan terbaik adalah diakhir tag body.

Menggunakan Event Handler (inline)

Cara ini menggunakan event handler sebagai tempat penulisan javascript. Event Handler sendiri adalah aksi/hal yang terjadi pada sebuah tag HTML, sperti ketika diklik yaitu onclick, atau onmouseover, onload, dll.
Contoh, kali ini saya memiliki sebuah button, jika button diklik maka akan muncul alert yang berisi pesan 'malu malu kucing'.

HTML
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
; <body>
<h1>Hello</h1>
<p>
Belajar Javascript
</p>
<button onclick="alert('malu malu kucing')">klik saya</button>
</body>
</html>

Hasilnya
Event Handler

Menggunakan Link

Cara ini sudah jarang digunakan, tapi kali ini saya tetap akan membagikanya untuk pengetahuan. Cara ini yaitu menyisipkan kode javascript ke atribut href dalam tag <a>, cara ini sering disebut juga protocol javascript. Contoh

HTML
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
; <body>
<h1>Hello</h1>
<p>
Belajar Javascript
</p>
<a href="javascript:alert('jaman sekarang')">jaman apa</a>
</body>
</html>

Hasilnya
Protocol Javascript

Itulah empat cara dalam menuliskan kode javascript, semoga bermanfaat.
Sekian postingan saya yang berjudul Cara Menuliskan Javascript Ke HTML.
Jangan lupa baca postingan saya sebelumnya Fungsi !Important Pada CSS

Senin, 07 Januari 2019

Fungsi !important Pada CSS

Fungsi !important Pada CSS

Fungsi !important Pada CSS - Pernahkah kalian melihat tulisan !important yang terpampang di sebuah css? Dan tahukah anda fungsinya. Jika tidak tahu maka akan saya beri tahu. Karena dibalik keberadaanya !important memiliki fungsi dan peran yang penting.
!important adalah fitur css yang berfungsi memberi prioritas atau memberikan kekhususan pada sebuah property untuk dijalankan. Artinya, jika sebuah property diberi embel-embel !important, property ini akan menjadi prioritas dan menjadi lebih kuat dan khusus dijalankan. Contoh Kondenya.
h1 {
color: red !important;
}

Untuk lebih jelasnya, berikut penjelasan ilmiahnya.
Disini saya memiliki sebuah h1 dengan id huheh. Berikut kondenya.
HTML
<h1 id="huheh">Ini judul</h1>

CSS
h1 {
background-color: red;
}
h1#huheh {
background-color: blue;
}
body h1 {
background-color: black;
}
#huheh {
background-color: green;
}

Bisa dilihat tag h1 memiliki background yang berbeda-beda. Apakah warna background dari h1? berikut hasilnya
Hasilnya

Dan ternyata warna bgnya jadi biru. Mengapa? karena di cssnya penamaanya lebih spesifik, jadi dialah yang menang.
Bagaimana jika kita mau menginginkan #huheh pada csslah yang menang? Disinilah si !important dibutuhkan, yaitu dengan menambahkan !important dibelakang property #huheh, dengan begitu ia akan diprioritaskan.
CSS
h1 {
background-color: red;
}
h1#huheh {
background-color: blue;
}
body h1 {
background-color: black;
}
#huheh {
background-color: green !important;
}

Hasinlnya
Hasilnya

Tada, suprise!!, bagckgroundnya menjadi hijau berkat !important.
Itulah penjelasan singkat mengenai kegunaan dari !important, semoga dapat bermanfaat bagi kalian.
Sekian postingan saya yang berjudul Fungsi !important Pada CSS.
Jangan lupa baca postingan saya sebelumnya

Minggu, 06 Januari 2019

Mengenal Property Object Fit Pada CSS

Mengenal Property Object Fit Pada CSS
Mengenal Property Object Fit Pada CSS - Kembali lagi membhasas mengenai CSS, kali ini saya akan membahas mengenai property Object Fit. Property yang mungkin jarang dibahas, tapi kali ini saya akan membahasnya.
Pernahkah kalian mengganti foto profil sosmed kalian? Jika gambar kalian melebihi ukuran kotak yang ditampilkan, maka gambar akan dipotong, agar pas dan tidak jelek. Nah, begitulah kurang lebih fungsi dari Object Fit. Contoh
  • Tanpa Object Fit
    Contoh

Bisa dilihat dicontoh diatas, gambar akan diperbesar/dipotong jika menggunakan object fit sesuai lebar gambarnya. Berikut syntaxnya
object-fit: (cover, contain, fill, scale-down)
.
Contoh
HTML
<img src="image.jpg" width="200px" height="200px">

CSS (cover)
img {
object-fit: cover;
}

Hasilnya.
Object Fit Cover


Itulah tutorial singkat mengenai object fit, silahkan dicoba-coba sendiri.
Sekian postingan saya yang berjudul Mengenal Property Object Fit Pada CSS.
Jangan lupa baca postingan saya sebelumnya Belajar Property CSS3 Transform.

Sabtu, 05 Januari 2019

Belajar Property CSS3 Transform

Belajar Property CSS3 Transform
Belajar Property CSS3 Transform - Kembali membahas CSS3, kali ini saya akan membahas mengenai property yang penting dan keren banget yaitu Transform.
Transform adalah property pada css3 yang berfugsi untuk merubah bentuk benda, seperti posisi, bentuk, dll. Transform sangatlah penting apalagi untuk animasi.
Berikut adalah beberapa macam metode dalam property transform.

  • translate()

    Translate berfungsi untuk merubah/memindahkan posisi element, satuan yang dipakai bisa px, em, dll. Berikut syntaxnya.
    translate(jarak ke samping(px, em, cm), jarak ke atas(px, em, cm));

    Contoh
    HTML
    <div class="kotak1">tanpa translate</div>
    <div class="kotak2">dengan translate</div>

    CSS
    .kotak1, .kotak2 {
    width: 200px;
    height: 200px;
    background-color: dodgerblue;
    padding: 20px;
    box-sizing: border-box;
    display: inline-block;
    color: #fff;
    }
    .kotak2 {
    background-color: darkblue;
    transform: translate(50px,100px);
    }

    Hasilnya
    Translate

  • scale()

    Scale berfungsi untuk melebarkan atau memanjangkan element, tanpa satuan. Berikut syntaxnya.
    scale(lebar(tanpa satuan), tinggi(tanpa satuan));

    Contoh
    HTML
    <div class="kotak1">tanpa scale</div>
    <div class="kotak2">dengan scale</div>

    CSS
    .kotak1, .kotak2 {
    width: 200px;
    height: 200px;
    background-color: dodgerblue;
    padding: 20px;
    box-sizing: border-box;
    display: inline-block;
    color: #fff;
    }
    .kotak2 {
    background-color: darkblue;
    transform: scale(1,2);
    }

    Hasilnya
    Scale

  • skew()

    Skew berfungsi untuk memiringkan element, dengan satuan deg. Berikut syntaxnya.
    skew(miring horizontal(deg), miring vertical(deg));

    Contoh
    HTML
    <div class="kotak1">tanpa skew</div>
    <div class="kotak2">dengan skew</div>

    CSS
    .kotak1, .kotak2 {
    width: 200px;
    height: 200px;
    background-color: dodgerblue;
    padding: 20px;
    box-sizing: border-box;
    display: inline-block;
    color: #fff;
    }
    .kotak2 {
    background-color: darkblue;
    transform: skew(10deg,20deg);
    }

    Hasilnya
    Skew

  • rotate()

    Rotate berfungsi untuk merotasi/memutarkan element, dengan satuan deg. Berikut syntaxnya.
    rotate(besar putaran(deg));

    Contoh
    HTML
    <div class="kotak1">tanpa rotate</div>
    <div class="kotak2">dengan rotate</div>

    CSS
    .kotak1, .kotak2 {
    width: 200px;
    height: 200px;
    background-color: dodgerblue;
    padding: 20px;
    box-sizing: border-box;
    display: inline-block;
    color: #fff;
    }
    .kotak2 {
    background-color: darkblue;
    transform: rotate(45deg);
    }

    Hasilnya
    Rotate

  • matrix()

    Matrix berfungsi untuk mencampur semua metode diatas.Berikut syntaxnya.
    rotate(scaleX(), skewY(), skewY(), scaleY(), translateX(), translateY());

    Contoh
    HTML
    <div class="kotak1">tanpa matrix</div>
    <div class="kotak2">dengan matrix</div>

    CSS
    .kotak1, .kotak2 {
    width: 200px;
    height: 200px;
    background-color: dodgerblue;
    padding: 20px;
    box-sizing: border-box;
    display: inline-block;
    color: #fff;
    }
    .kotak2 {
    background-color: darkblue;
    transform: rotate(0,1.5, 1, 1, 100, 50);
    }

    Hasilnya
    Matrix

Itulah penjelasan singkat mengenai property Transform pad css3.
Sekian postingan saya yang berjudul Belajar Property CSS3 Transform.
Jangan lupa baca postingan saya sebelumnya Belajar Animasi Pada CSS3

Kamis, 03 Januari 2019

Belajar Animasi Pada CSS3

Belajar Animasi Pada CSS3
Belajar Animasi Pada CSS3 - CSS3 menyediakan fitur yang menarik dan membuat web semakin interaktif, salah satunya adalah animasi. Animasi dalam web bisa dibuat dengan property animation. Dengan fitur ini web akan lebih interaktif.
Untuk mempelajari property animation, ada baiknya kalian belajar mengenai property property dasar pada css, karena Animasi adalah membuat animasi pada property tersebut. Berikut adalah contoh animasi pada css3.
Contoh Animasi

Berikut Kodenya.
div {
background-color: dodgerblue;
width: 200px;
height: 200px;
animation-name: test;
animation-duration: 5s;
animation-iteration-count: infinite;
margin: 150px auto;
} @keyframes test {
25% {
border-radius: 25%;
transform: rotate(90deg);
}
50% {
border-radius: 50%;
transform: rotate(18deg);
}
75% {
border-radius: 25%;
transform: rotate(90deg);
}
}
Nah berikut pembelajaran animasinya.

@keyframes

Keyframes merupakan komponen utama pada animation, maka dari itu kita harus mempelajarinya.
Keyframes adalah rangkaian yang menentukan proses animasi itu berjalan, atau sederhananya keyframes adalah jalan dari animasi css.
Berikut syntax dasarnya.
@keyframes namaAnimasi {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Tulisan namaAnimasi adalah nama animasi yang digunakan. Ada dua tahap animasi yaitu 0% dan 100%, artinya ketika 0%/awalnya opacitynya 1, kemudian ketika 100% opacitynya jadi 0.

Property Animation

Setelah menentukan nama animasi dan jalanya animasi, saatnya membuat animasinya. Untuk mengaturnya ada beberapa property yang dapat anda gunakan.
  • animation-name : nama dari animasi
  • animation-duration: durasi animasi
  • animation-timing-function: kecepatan animasi(linear, ease, ease-in, ease-out, ease in-out, cubic-bezier)
  • animation-delay: lama waktu tunda
  • animation-iteration-count: jumlah perunlangan animasi
  • animation-direction: arah pergerakan animasi
  • animation-fill-mode: style saat animasi selesai(none, forwards, backwards, both)

Contoh
div {
animation-name: putar;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}

Itulah tutorial kali ini, memang cukup rumit, bagi yang tidak mau susah tinggal pakai library khusus animasi yaitu animate.css, bisa dibaca di artikel saya lainya Mengenal Animate.css dan Cara Memasangnya.
sekian postingan saya yang berjudul Belajar Animasi Pada CSS3.
Jangan lupa baca postingan saya sebelumnya Cara Memasang dan Menggunakan Font Awesome Icons

Minggu, 30 Desember 2018

Cara Memasang Dan Menggunakan Font Awesome Icons

Cara Memasang Dan Menggunakan Font Awesome Icons
Cara Memasang Dan Menggunakan Font Awesome Icons - Font Awesome Icons adalah sebuah perpustakaan yang berisi icon-icon untuk digunakan. Di dalamnya terdapat icon icon keren yang dapat anda pasang di web anda. Saat ini sudah banyak web web yang menggunakan library icon pada website mereka.
Font Awesome sendiri bukanlah satu satunya library icon di dunia ini, ada banyak yang lainya, namun yang paling populer dan paling banyak digunakan adalah Font Awesome Icons. Karena penggunaanya mudah, kita hanya perlu memanggilnya dengan class pada elemen HTML.
Dan kali ini saya akan membagikan caranya untuk memasang sekaligus menggunakan Font Awesome Icons.

Memasang Font Awesome

Ada dua cara yang dapat anda gunakan.

Cara I

Cara ini mengharuskan kalian untuk online, karena font awesome icon dalam web didapat dari webnya secara langsung.
  • Kunjungi halaman ini
  • Lalu, salin code yang ada dalam kotak, seperti pada gambar dibawah ini.
  • Setelah itu, pastekan code yang disalin tadi ke dalam web anda, tepatnya didalam tag <head>, contoh.
    <head>
    <link rel="stylesheet" type="text/css" href="">
    </head>

Cara II

Cara ini, kalian harus mendownload library font awesome icon, kalian tidak harus online untuk menggunakanya.
  • Kunjungi Link ini.
  • Setelah itu, klik link download yang tertera
  • Extract berkas yang sudah didownload, kemudian pindahkan ke folder web kalian
  • Masukan kode dibawah ini di web kalian
    <head>
    <link rel="stylesheet" type="text/css" href="font-awesome/css/all.min.css">
    </head>

Menggunakan Font Awesome

Untuk menggunakan font awesome, caranya sangat mudah, berikut syntaxnya.
<i class="fa fa-namaicon"></i>

Contoh
<i class="fa fa-gavel"></i>

Hasilnya fa-gavel
Anda juga dapat mengubah ukuran ikonnya. Misal kali ini saya akan mengunahnya menjadi 5 kali lebih besar
<i class="fa fa-5x fa-gavel"></i>

Hasilnya fa-5x fa-gavel
Anda juga dapat menambahkan animasi pada icon anda. Yaitu dengan fa-spin.
<i class="fa fa-3x fa-spin fa-gavel"></i>

Hasilnya fa-3x fa-spin fa-gavel

Oke, itulah tulisan singkat dari saya, semoga bermanfaat.
Sekian postingan saya yang berjudul Cara Memasang Dan Menggunakan Font Awesome Icons.
Jangan lupa baca postingan saya sebelumnya Mengenal Animte.CSS Dan Cara Menggunakanya

Jumat, 28 Desember 2018

Mengenal Animate.CSS Dan Cara Menggunakanya

Mengenal Animate.CSS Dan Cara Menggunakanya

Mengenal Animate.CSS Dan Cara Menggunakanya - Salah satu fitur dari CSS3 adalah animation/animasi. Dengan animasi halaman web akan menjadi lebih interaktif dan indah. Maka dari itu penggunaan animasi sudah digunakan di kebanyakan web modern.
Untuk menggunakan animasi kalian harus mempelajari syntaxnya, dan memang cukup sulit untuk melakukanya. Maka dari itu kita dapat menggunakan sebuah library dalam penggunaanya, salah satu yang populer adalah Animate.css. Berikut informasi lebih lengkapnya.

Mengenal Animate.CSS

Animate.css adalah sebuah library siap pakai yang dibuat oleh Dan Eden. Animate.css menggabungkan property-property yang digunakan untuk animasi dalam CSS, seperti Transition, Transformation, maupun Animation. Semua dikemas dalam bentuk class di sebuah file css, jadi anda tidak perlu repot repot membuat animasi, anda hanya perlu memanggil nama animasi dalam elemen html.
Animate.css juga merupakan library css terpopuler saat ini, saya sendiri juga sering memakainya. Selain mudah library ini juga gratis.

Cara Penggunaan

  • Pertama, download library animate.css Disini
  • Kemudian, masukan file css ke dokumen html dengan tag link, didalam <head></head>
    <link rel="stylesheet" type="text/css" href="main.css">
  • Lalu tambahkan class animated dan nama animasinya pada elemen html. Misal saya akan menambahkan animasi memutar pada sebuah div, berikut syntaxnya.
    <div class="shake animated"></div>
  • Hasilnya
    Shake Animation

Itulah ulasan singkat saya mengenai library animate.css, semoga dapat memudahkan kamu dalam membuat halaman web.
Sekian postingan saya yang berjudul Mengenal Animate.CSS Dan Cara Menggunakanya.
Jangan lupa baca postingan saya sebelmunya Mengenal Property Transition Pada CSS3

Kamis, 27 Desember 2018

Mengenal Property Transition Pada CSS3

Mengenal Property Transition Pada CSS3
Mengenal Property Transition Pada CSS3 - CSS3 merupakan versi terbaru CSS, di versi ini terdapat fitur fitur yang menarik dan membuat web semakin indah. Terdapat banyak fitur pada CSS3 yang berfungsi untuk membuat efek animasi pada web. Salah satunya Transition. Transition adalah property yang berfungsi untuk memberikan efek animasi pada perubahan atau pergantian pada elemen html. Dengan tansition perubahan pada elemen html akan menjadi lebih lembut dan indah. Langsung saja berikut tutorialnya.

Siapkan Elemen HTML

<div></div>

Kotak Biru

Disini saya memiliki sebuah kotak berwarna biru dengan lebar 200px, dan ketika mouse lewat/hover lebarnya berubah menjadi 400px. Nah saya ingin membuat animasi pada perubahan ukuran lebar, akan terlihat lebih indah.

Masukan Property Transition Di CSS

Berikut syntax dasarnya
transition: value yang mengalami perubahan kecepatan animasis;
CSS
div {
background-color: dodgerblue;
width: 200px;
transition: width 0.5s;
}
div:hover {
width: 400px;
}

Dan berikut hasilnya.
Kotak Biru

Penjelasan
  • transition: width 0.5s
  • width merupakan value yang mengalami perubahan
  • 0.5s merupakan durasi atau kecepatan animasi

Itulah tutorial singkat mengenai transition dari saya, semoga bermanfaa.
Sekian postingan saya yang berjudul Mengenal Property Transition Pada CSS3.
Jangan lupa baca postingan saya sebelumnya Cara Mengubah Warna Placeholder Dengan CSS

Jumat, 21 Desember 2018

Cara Merubah Warna Placeholder Dengan CSS

Cara Merubah Warna Placeholder Dengan CSS
Cara Merubah Warna Placeholder Dengan CSS - Placeholder merupakan salah satu fitur dalam HTML untuk tag input. Placeholder sudah dipakai di kebanyakan website.
Placeholder sendiri merupakan fitur pada HTML 5 untuk memberi penamaan pada input form, letaknya berada di dalam kotak input. Dan sama sekali tidak menggangu isi dari input itu sendiri. Dengan placeholder kita dapat membuat form kita lebih informatif.
Secara default, warna teks pada placeholder akan mengikuti warna pada body, nah untuk mengatasinya kita dapat mengaturnya di css. Dan berikut caranya.

Masukan Placeholder Di Tag Input

Sebelum mengganti warna placeholder, pastikan sudah ada placeholder di tag input, dan beri juga class pada tag inputnya.
<input type="text" name="nama" class="input" placeholder="Teks Placeholder">

Hasilnya
Masukan Placeholder Di Tag Input

Atur Warna Placeholder Di CSS

Setelah mengaturnya, saatnya mengatur warna placeholder di CSS, berikut syntaxnya.
.input::-webkit-input-placeholder {
color: red;
}

Hasilnya
Atur Warna Placeholder Di CSS
Itulah tutorial singkat mengganti warna placeholder pada css semoga bermanfaat.
Sekian postingan saya yang berjudul Cara Merubah Warna Placeholder Dengan CSS.
Jangan lupa baca postingan saya sebelumnya Mengenal Macam Macam Property Background Pada CSS.

Kamis, 20 Desember 2018

Mengenal Macam Macam Property Background Pada CSS

Mengenal Macam Macam Property Background Pada CSS
Mengenal Macam Macam Property Background Pada CSS - Salah satu property css untuk memperindah web adalah background. CSS menyediakan banyak property background yang dapat anda gunakan.
Background sendiri berarti latar belakang, dengan background elemen HTML akan tampak lebih indah dan hidup. Secara umum, mungkin dalam CSS kita hanya mengetahui dua property background saja, yaitu background-color dan background-image, namun ternyata ada banyak property background lain yang pastinya keren banget, berikut adalah daftarnya.

Background Color

Background color berfungsi untuk memberikan warna pada latar belakang suatu elemen. Berikut syntaxnya.
background-color: warna;
Hasilnya.
Background Color

Background Image

Background image berfungsi menggunakan gambar sebagai latar belakang sebuah elemen. Berikut syntaxnya.
background-image: url(gambar.jpg);

Hasilnya.
Background Image

Backround Atachment

Property ini berguna untuk mengatur keadaan background ketika halaman scroll kebawah, apakah ikut nyecroll atau diem saja.
Ada 5 value yang dapat digunakan di property ini, yaitu fixed, inherit, local, scroll, initial, dan unset. Namun yang biasa digunakan adalah fixed. Yang berfungsi membuat gambar di background diam saja.
Untuk menggunakan property ini kita juga harus meletakan property background-image. Berikut syntaxnya.
background-image: url(gambar.jpg);
background-attachment: initial/local/inherit/scroll/unset/fixed;

Background Atachment Fixed.
Background Image & Background Attachment Fixed

Background Atachment Scroll.
Background Image & Background Attachment Scroll

Background Size

Property ini berfungsi untuk mengatur ukuran background yang digunakan.
Ada 2 value yang dapat digunakan di property ini, yaitu cover dan contain.
  • Cover berfungsi mengatur ukuran background sebesar elemen htmlnya.
  • Contain merupakan defaultnya, background ukuranya sesuai ukuran asli gambar.
Untuk menggunakan property ini kita juga harus meletakan property background-image. Berikut syntaxnya.
background-image: url(gambar.jpg);
background-size: cover/contain;

Background Size Cover.
Background Image & Background Size Cover

Background Size Contain.
Background Image & Background Size Contain

Background Repeat

Property ini berfungsi mengatur pengulangan pada background gambar yang ukuranya kurang dari ukuran elemen.
Ada 4 value yang biasa digunakan di property ini, yaitu repeat no-repeat, repeat-x dan repeat-y.
  • repeat mengatur pengulangan secara horizontal maupun vertikal
  • repeat-x mengatur pengulangan secara horizontal
  • repeat-y mengatur pengulangan secara vertikal
  • no-repeat tidak melakukan pengulangan
Untuk menggunakan property ini kita juga harus meletakan property background-image. Berikut syntaxnya.
background-image: url(gambar.jpg);
background-repeat: no-repeat/repeat-x/repeat-y;

Background Repeat.
Background Image & Background Repeat

Background Repeat X.
Background Image & Background Repeat X

Background Repeat Y.
Background Image & Background Repeat Y

Background No Repeat.
Background Image & Background No-Repeat

Background Position

Property terakhir yaitu background position, berfungsi menetapkan posisi dari background gambar, ada empat value, top, left, right, bottom. Berikut kodenya.
background-image: url(gambar.jpg);
background-positon: top/right/left/bottom;

Background Position Right Bottom.
Background Image & Background Position Right Bottom

Itulah beberapa property background pada css yang dapat anda coba.
Sekian postingan saya yang berjudul Mengenal Macam Macam Property Background Pada CSS.
Jangan lupa baca postingan saya sebelumnya Cara Membuat Dropdown Menu Dengan HTML
Langganan: Postingan (Atom)