Membuat background warna merupakan daya tarik sebuah website. Dengan perpaduan warna yang menarik juga membuat sebuah website senang dikunjungi oleh pengunjung. Tutorial berikut ini adalah membuat warnabackground menjadi transparan. Perhatikan koding dibawah ini :
Koding HTML
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
link
href
=
"style.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
title
>TugasWEB.com</
title
>
</
head
>
<
body
>
<
div
id
=
"wrapper"
>
<
div
id
=
"header"
>
<
center
><
h1
>TugasWEB adalah situs belajar web</
h1
></
center
>
</
div
>
</
div
>
</
body
>
</
html
>
Lalu simpanlah koding diatas dengan nama index.html, lalu lanjutkan membuat satu file lagi seperti koding dibawah ini :
Koding CSS
*{
font-size: 12px;
font-family: sans-serif;
}
body{
background:#000000;
margin: 0;
}
h1{
font-size: 36px;
margin: 0;
}
#wrapper{
width: 950px;
margin: auto;
background-color:rgba(255,255,255,0.8);
border-radius: 50px;
}
#header{
height: auto;
background: transparent;
margin-top: 12%;
}
Simpanlah koding di atas dengan nama warna.css dan pastikan satu folder dengan file index.html yang pertama kita buat tadi. Lalu jalankan koding nya pada localhost dan taraaaaa. Hasilnya memuaskan bukan, dengan tingkattransparan sesuai dengan keinginan kita. atau bagi yang masi penasaran silahkan liat DEMO dibawah ini yah...
trmksh artikelnya ya gan, ternyta dlm membuat warna background transparan tidak terlalu sulit jg asalakan kodingan css dan htmlnya pas kita dpt dg mdh untk mmbuatnya dan contoh kodingan di arikel ini sngat bgs skli, nnti sy akn mncobanya.
ReplyDeleteKunjungi website sy ya: https://yuliyani.mahasiswa.atmaluhur.ac.id
Dan kunjungi website kmps sy: http://www.atmaluhur.ac.id
good article, jangan lupa mampir ya kak
ReplyDeleteazzahra-official.com