Website

<div id="slider">
<div id="slide-holder">
<div class="slide"><img src="bg1.jpg" alt="" /></div>
</div>
</div>
Jika sudah simpan file HTML nya ke dalam folder yang sudah teman-teman siapkan tadi, dan
jangan lupa sesuaikan nama file gambarnya. Oke langkah selanjutnya ketik script CSS dibawah
ini kedalam text editor yang teman-teman gunakan :
#slider {
width: 950px;
height: 500px;
overflow: hidden;
border: 1px solid #c69;
}
.slide {
width: 500px;
height: 500px;
float: left;
position: relative;
}
#slide-holder {
width: 400%;
position: relative;
left: 0;
-webkit-animation: scroller 10s infinite;
animation: scroller 10s infinite;
}
@-webkit-keyframes scroller {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
33% {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
66% {
}
100% {
}
}
@keyframes scroller {
0% {
}
33% {
}
66% {
}
100% {
}
}
body {
font-family: sans-serif;
}
#slider {
margin: 0 auto;
}
.slide:nth-child(1) {
background: #c69;
}
background: wheat;
}
background: #eee;
}
<body>
<div id="slider-wrapper">
<div class="inner-wrapper">
<input checked type="radio" name="slide" class="control" id="Slide1"/>
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2"/>
<div class="overflow-wrapper">
<a class="slide" href=""><img
src="https://i.imgur.com/hKju1EC.jpg"/></a>
</div>
</div>
</div>
</body>
#slider-wrapper{
width: 940px;
height: 470px;
margin: 50px auto;
position: relative;
margin-bottom: 0px;
background: rgba(0,0,0,0.5);
overflow: hidden;
}
#s1{
padding: 6px;
background: #FFFFFF;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: -36px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s2{
padding: 6px;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: -12px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s3{
padding: 6px;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: 12px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s4{
padding: 6px;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: 36px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1:hover, #s2:hover, #s3:hover, #s4:hover{ opacity: 1;}
.inner-wrapper{
width: 940px;
height: 470px;
position: absolute;
top: 0;
left: 0;
margin-bottom: 0px;
overflow: hidden;
}
.control{ display: none;}
#Slide1:checked ~ .overflow-wrapper{ margin-left: 0%; }

#Slide2:checked ~ .overflow-wrapper{ margin-left: -100%; }
#Slide1:checked + #s1 { opacity: 1; }

.overflow-wrapper{
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.slide img{
width: 25%;
float: left;
}
Background
Background, atau yang dikenal dengan latar belakang, merupakan salah satu komponen desain
yang cukup penting. Background terutama digunakan untuk memberikan dekorasi visual
terhadap sebuah elemen, yang akan mengakibatkan peningkatan kemudahan nalar atau
pengertian akan sebuah konten. Background memiliki pengaruh yang sangat besar terhadap
keseluruhan desain dari sebuah website karena hal ini.
Penambahan latar belakang ke sebuah elemen dapat dilakukan dengan banyak cara, mulai dari
penambahan warna (yang telah dilakukan berkali-kali pada bab sebelumnya), penambahan
gambar, ataupun penggabungan dari keduanya. CSS memberikan kita kemampuan penuh untuk
mengatur bagaimana penampilan dari latar belakang sebuah elemen, sehingga kita dapat
dengan mudah meningkatkan keindahan visual dari elemen tersebut.
Untuk lebih jelasnya, kita mari kita lihat langsung properti CSS yang berhubungan dengan hal ini!
Warna Latar Belakang

Salah satu cara termudah untuk memberikan latar belakang terhadap sebuah elemen ialah
dengan memberikan warna pada latar belakang elemen tersebut. Penambahan warna ini
dilakukan dengan menggunakan properti background atau background-color. Kedua
properti ini dapat digunakan secara bebas, meskipun properti background dapat digunakan
juga untuk memberikan gambar (yang akan dibahas pada bagian selanjutnya). Pemilihan
properti yang digunakan sendiri tidak memiliki batasan, selain preferensi dari pengguna.
div {
background: #F00;
background-color: #F00; /* efek yang sama */
}
Sama seperti Warna Teks, pengisian nilai dari properti ini dapat menggunakan beberapa cara,
yaitu kode heksa, rgb, rgba, hsl, maupun hsla.
div {
background: #F00;
background: rgb(255, 0, 0);
background: rgba(255, 0, 0, 1);
background: hsl(0, 50, 100);
background: hsla(0, 50, 100, 1);
}
Tentunya pemilihan nilai yang diisikan juga hanya dibatasi oleh preferensi pengguna.
Gambar Latar Belakang

Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan
menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan
untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada
penambahan font.
div {
background: url('latar.png');
background-image: url('latar.png');
}
Sayangnya, penambahan gambar dengan cara di atas akan memberikan masalah ketika ukuran
gambar tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, secara
horizontal maupun vertikal, jika ukuran elemen lebih besar dari ukuran gambar.
Untuk dapat melihat bagaimana kesalahan tersebut bekerja, simpan dan jalankan kode berikut,
dan lihat hasilnya:
<!DOCTYPE html>
<html>
<head>
<title>Background Image Goes Wrong</title>
<style type="text/css">
#main {
background-image: url('twitter-logo.png');
height: 600px;
width: 800px;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
Gambar yang digunakan ialah gambar berikut:
Logo Twitter Berukuran 80x80 px

Hasil dari eksekusi kode di atas ialah sebagai berikut:
Penampilan Gambar Latar Berulang pada Kedua Buah Sumbu
Perhatikan bagaimana logo twitter ditampilkan berulangkali, secara vertikal maupun horizontal.
Hal ini disebabkan oleh ukuran dari logo twitter yang hanya 80 x 80 px, sementara ukuran
dari elemen div#main adalah 800 x 600 px.
Perulangan Gambar Latar

Meskipun terkadang hasil seperti ini memang diinginkan, seringkali hasil perulangan otomatis ini
tidak diinginkan. Kita dapat menggunakan properti background-repeat untuk mengatur
bagaimana perulangan kode ingin dilakukan.
Terdapat empat nilai yang dapat diisikan pada properti background-repeat,
yaitu repeat, no-repeat, repeat-x, dan repeat-y. Seperti namanya, no-
repeat menghilangkan perulangan, repeat-x memberikan perulangan hanya pada sumbu x
(horizontal), dan repeat-y memberikan perulangan hanya pada sumbu y (vertikal). Tentunya,
seperti yang dapat dideduksi dari kode sebelumnya, repeat merupakan nilai standar, yang
memberikan perulangan pada sumbu x dan sumbu y.
Kode CSS di bawah akan menghilangkan perulangan pada sumbu x dan sumbu y, sehingga logo
twitter hanya akan ditampilkan satu kali:
#main {
background-repeat: no-repeat;
height: 600px;
width: 800px;
}
Posisi Gambar Latar

Selain memberikan kontrol terhadap perulangan gambar latar, CSS juga memberikan kontrol
terhadap posisi dari gambar latar itu sendiri. Hal ini tentunya sangat berguna, terutama untuk
mengatur posisi pasti dari gambar latar pada elemen yang sangat besar, seperti penampung dari
seluruh elemen dalam halaman.
Posisi gambar latar dapat diatur menggunakan properti background-position, yang
menerima dua nilai: koordinat sumbu x dan sumbu y tempat kita ingin meletakkan gambar latar.
Koordinat yang diisikan menggunakan sistem koordinat kartesius terbalik, di mana titik 0, 0
berada pada kiri atas elemen.
Koordinat Gambar Latar
Pengisian koordinat sendiri dapat dilakukan dengan dua cara, yaitu nilai pixel atau persentasi.
Berikut adalah contoh pengunaan background-position untuk menampilkan logo twitter
pada posisi yang berbeda:
#main {
background-position: 50px 50px;
background-repeat: no-repeat;
border: 1px solid black;
height: 600px;
width: 800px;
}
yang akan memberikan hasil:
Contoh Pengunaan Properti background-position
Penulisan Singkat Properti Background

Seperti banyak properti-properti lainnya, properti background juga dapat ditulis secara
singkat, dengan sintaks:
background: color image position repeat;

Untuk melihat bagaimana penulisan singkat di atas digunakan, kita akan membuat sebuah panel
notifikasi, seperti berikut:
Panel Notifikasi, Menggunakan Properti Background

Kode yang digunakan ialah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Notification Panel, Using Background</title>
#notification {
background:
rgba(175, 0, 0, 0.2)
url('danger-logo.png')
5px 12px no-repeat;
border: 1px solid rgba(175, 0, 0, 0.7);

border-radius: 5px;
color: #F00;
padding: 10px 10px 10px 25px;
}
</style>
</head>
<body>
<div id="notification">
Do Not Touch. 10.000 v!
</div>
</body>
</html>
Penggabungan Gambar Latar

Salah satu fitur CSS yang sangat memudahkan kita dalam membuat desain yang baik ialah
kemudahan yang disediakan untuk memberikan beberapa gambar latar belakang pada sebuah
elemen. Cara pemberian juga sederhana, dengan hanya menambahkan daftar latar belakang
yang ingin digunakan, dipisahkan dengan tanda ,.
Berikut adalah contoh pengunaan beberapa latar belakang pada sebuah elemen:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Background</title>
#main {
background:
url('grass.png') 0 100% no-repeat,
url('man.png') 95% 100% no-repeat,
url('sky.jpg') 0 0 no-repeat;
height: 450px;
width: 600px;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
Hasil eksekusinya adalah sebagai berikut:

Pengunaan Banyak Gambar Latar pada CSS
Perhatikan juga bahwa perubahan urutan gambar yang digunakan pada kode CSS akan
mempengaruhi hasil akhir dari gambar. Silahkan coba mengganti urutan-urutan yang ada, untuk
melihat bagaimana gambar-gambar tersebut saling berinteraksi!
Gradien
Gradien merupakan teknik pengisian warna yang mengisikan warna bergantung kepada posisi
dari elemen. Warna-warna yang dihasilkan oleh gradien berubah-ubah sesuai dengan posisi
warna dalam elemen, sehingga gradien dapat menghasilkan transisi warna yang halus.
Contoh Gradien
Gradien digunakan dalam desain terutama untuk menghilangkan impresi warna yang terlalu
besar, ataupun untuk memberikan efek transisi kepada pengguna. Terdapat dua jenis gradien
utama, yaitu “Linear Gradient” dan “Radial Gradient”.
Kiri: Linear Gradient, Kanan: Radial Gradient
Pembuatan kedua jenis gradien ini sendiri sangat sederhana, hanya menggunakan sintaks
pembuatan masing-masing gradien yang cukup jelas. Misalnya, untuk membuat linear gradient,
kita dapat menggunakan sintaks sebagai berikut:
background: linear-gradient(#F00, #F80);
dengan hasil eksekusi sebagai berikut:
Linear Gradient Menggunakan CSS

dan kita juga dapat menambahkan arah gradien dengan menambahkan nilai arah yang
diinginkan pada parameter pertama fungsi (pada kode di atas gradien bergerak dari atas ke
bawah, seperti yang dapat dilihat pada gambar Linear Gradient Menggunakan CSS).
background: linear-gradient(to right, #F00, #F80);
dengan hasil:
Linear Gradient ke Kanan Menggunakan CSS
adapun nilai-nilai yang dapat diisikan pada parameter pertama ialah nilai arah dan gabungannya,
seperti: right, left, top, bottom, maupun top right, bottom left, dan seterusnya.
Kita juga dapat mengisikan nilai derajat lingkaran pada parameter pertama, seperti berikut:
background: linear-gradient(200deg, #F00, #F80);
dengan hasil:
Linear Gradient 200 Derajat Menggunakan CSS

Pembuatan radial gradient sendiri menggunakan sintaks yang sama, dengan nama fungsi
berbeda: linear-gradient diubah menjadi radial-gradient.
background: radial-gradient(#F00, #FFF);

Radial Gradient Menggunakan CSS
Background Color
Anda dapat mengganti background sebuah obyek dengan menggunakan properti ini,
semisal ingin mengganti background web, atau bagian obyek lainnya, silahkan
perhatikan skrip dibawah ini :
1 <span style="font-family: tahoma, arial, helvetica, sans-serif;"><!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Background CSS</title>
5 <style type="text/css">
6 body
7 {
8 background-color:green;
9 }
1 </style>
0
</head>
1
1 <body>
1 <h1>Ini contoh Penggunaan Property Background Color</h1>

2
</body>
1
</html></span>
3
1
4
1
5
nah semisal kita simpan dengan nama background_color.html lalu kita buka di
browser, maka hasilnya adalah sebagai berikut :
nah perhatikan untuk warna backgroundnya menjadi warna hijau, hal tersebut
karena kita menggunakan property background-color, dengan selector body
sehingga background webnya menjadi warna hijau.
Selain untuk background web anda juga dapat menggunakan perintah background-
color pada obyek HTML lainnya, silahkan perhatikan skrip dibawah ini :
1 <span style="font-family: tahoma, arial, helvetica, sans-serif;"><!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Background CSS</title>
5 <style type="text/css">
6 h1 {
7
1
0
1
1 background-color: orange;
1 }
2
1
3 div {
1 background-color: aqua;
4
}
1
5
p{
1
6 background-color: yellow;
1 }
7
</style>
1
8 </head>
1 <body>
9
<h1>Ini Adalah Contoh Background Image</h1>
2
0 <div>
2 isi dari obyek div

1
<p>Paragraf Pertama Paragraf Pertama Paragraf Pertama</p>
2
isi dari obyek div
2
</div>
2
3 </body>
2 </html></span>
4
2
5
2
6
2
7
semisal kita simpan dengan nama background-color2.html, lalu kita buka di browser
maka hasilnya adalah sebagai berikut :
maka hasilnya seperti gambar diatas, penjelasannya sebagai berikut :
 h1 memiliki background berwarna orange karena skrip css h1{bacgkround-

color:orange;}
 bagian obyek div mendapatkan background berwarna biru karena skrip css
div{background-color:aqua;}
 paragraf akan mendapatkan background berwarna kuning karena skrip css

p{background-color:yellow;}
Background Image
Selain background warna anda juga dapat merubah background dengan gambar,
dengan menggunakan perintah background-image:
silahkan perhatikan skrip dibawah ini :

1
2
<span style="font-family: tahoma, arial, helvetica, sans-serif;"><!DOCTYPE html>
3
<html>
4
<head>
5
<title>Contoh Background Image</title>
6
7
body
8
{
9
background-image:url('gambar.jpg');
1
0 }
1 </style>
1
</head>
1
2 <body>
1
3
</body>
1
4 </html></span>
1
5
semisal kita simpan dengan nama background-image.html, dan pastikan file gambar
yang digunakan (dalam contoh ini gambar.jpg) tersimpan dalam satu folder yang
sama dengan file background-image.html
lalu silahkan buka file html background_image.html

maka hasilnya sebagai berikut :
terlihat background web akan sesuai gambar yang dipilih, gambar menjadi berulang
karena ukuran resolusi gambar kecil, sehingga gambar akan ditampilkan secara
berulang
Property Background-repeat
property ini digunakan untuk mengatur perulangan dari gambar yang digunakan
sebagai berikut, hal ini digunakan jika gambar yang digunakan untuk background
memiliki ukuran resolusi kecil, adapun beberapa value yang bisa anda gunakan
adalah :
 repeat-x : digunakan untuk melakukan perulangan secara horizontal
 repeat-y : digunakan untuk melakukan perulangan secara vertikal
 no-repeat : digunakan untuk menonaktifkan fitur perulangan
Jadi penggunaan skripnya adalah seperti berikut ini :

1 <span style="font-family: tahoma, arial, helvetica, sans-serif;"><style type="text/css">
2 body
3 {
4 background-image:url('gambar.jpg');
5 background-repeat:repeat-x;
6 }
7 </style></span>
maka hasilnya adalah sebagai berikut :
hasil background-repeat:repeat-x;
hasil background-repeat:repeat-y;
hasil background-repeat:no-repeat;
Bagaimana mudah bukan untuk mengatur background dengan menggunakan CSS,

anda cukup menggunakan property background-color (untuk merubah warna) dan
background-image(untuk merubah background gambar) serta menggunakan
property background-repeat (mengatur perulangan dari gambar yang digunakan
untuk background).
Baik sekian dulu kawan pembahasan kita mengenai cara merubah background
dengan CSS, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian
dulu sampai jumpa di tutorial selanjutnya.

Website

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Website

Hochgeladen von

Copyright:

Verfügbare Formate

<div id="slider">

#s1:hover, #s2:hover, #s3:hover, #s4:hover{ opacity: 1;}

#Slide1:checked ~ .overflow-wrapper{ margin-left: 0%; }

#Slide1:checked + #s1 { opacity: 1; }

Warna Latar Belakang

Gambar Latar Belakang

Gambar yang digunakan ialah gambar berikut:

Logo Twitter Berukuran 80x80 px

Perulangan Gambar Latar

Posisi Gambar Latar

yang akan memberikan hasil:

Contoh Pengunaan Properti background-position

Penulisan Singkat Properti Background

background: color image position repeat;

Panel Notifikasi, Menggunakan Properti Background

border: 1px solid rgba(175, 0, 0, 0.7);

Penggabungan Gambar Latar

Hasil eksekusinya adalah sebagai berikut:

background: linear-gradient(#F00, #F80);

dengan hasil eksekusi sebagai berikut:

Linear Gradient Menggunakan CSS

background: linear-gradient(to right, #F00, #F80);

background: linear-gradient(200deg, #F00, #F80);

Linear Gradient 200 Derajat Menggunakan CSS

background: radial-gradient(#F00, #FFF);

1 <span style="font-family: tahoma, arial, helvetica, sans-serif;"><!DOCTYPE html>

4 <title>Belajar Background CSS</title>

1 <h1>Ini contoh Penggunaan Property Background Color</h1>

1 <span style="font-family: tahoma, arial, helvetica, sans-serif;"><!DOCTYPE html>

4 <title>Belajar Background CSS</title>

2 isi dari obyek div

 h1 memiliki background berwarna orange karena skrip css h1{bacgkround-

 paragraf akan mendapatkan background berwarna kuning karena skrip css

silahkan perhatikan skrip dibawah ini :

lalu silahkan buka file html background_image.html

 repeat-x : digunakan untuk melakukan perulangan secara horizontal

 repeat-y : digunakan untuk melakukan perulangan secara vertikal

 no-repeat : digunakan untuk menonaktifkan fitur perulangan

Jadi penggunaan skripnya adalah seperti berikut ini :

maka hasilnya adalah sebagai berikut :

Bagaimana mudah bukan untuk mengatur background dengan menggunakan CSS,

Das könnte Ihnen auch gefallen