Cara membuat overlay tanpa javascript

Cara membuat overlay tanpa javascript
Di Posting Oleh : wandi
Kategori : Pelajaran Pemprograman web

Oke karena di artikel sebelumnya saya sudah berbagi bahasa c sebanyak 2 kali sudah mulai panas nih otak saya ,jadi sekarang biar otak saya kembali adem saya kali ini akan berbagi tips css , tips apa bray ? tips cara membuat overlay tanpa javascript . Overlay itu apa sih bray ? Jadi overlay adalah teknik efektif untuk memfokuskan pengunjung pada suatu elemen tertentu dengan cara menutupi konten utama dan menampilkan konten yang menjadi fokus utama .

Baca juga Membuat segitiga dengan css

Saya anggap kawan kawan udah paham apa maksudnya .Oke jadi Kalo kebanyakan sih buat overlay pakai javascript , tapi di kesempatan kali ini saya gak akan ngebahas javascript , jadi hanya menggunkan HTML dan CSS aja , biar adem otak sayanya . Oke kalo gitu lanjut Pertama tama kawan kawan buat kode HMTL seperti dibawah ini .

Catatanwandicager.blogspot.com

</div>

<h1>

Cara membuat Overlay dengan CSS

</h1>

</div>

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

</div>

Oke kalo udah buat HTMLnya kita tinggal buat cssnya , yok mulai design''

Baca juga Pengertian css

a{
background-color: rgb(255,0,0);
font-size: 20px;
width: 100px;
height: 40px;
padding: 5px;
margin: 50px;
text-decoration:none;
}
body{
background-color:rgb(0,255,0);
font-family:sans-serif;
margin: 5%;
}
#judul{
color: #fff;
font-size: 30px;
}
#tulisan{
font-size: 20px;
}
#modal{
position: fixed;
left: 10000px;
transition: left 1s;
-webkit-transition: left 1s;
-IE-transition: left 1s;
-moz-transition: left 1s;
}
#modal:target{
background-color:rgb(0,255,0);
top:40%;
left:40%;
width:300px;
height:300px;
text-align: center;
line-height:300px;
/* untuk overlaynya */
outline: 9999px solid rgba(0,0,0,0.5);
}
#modal a{
position:fixed;
line-height:0;
background-color: transparent;
right:0;
top:0;

}

Oke ginama hasilnya , kalo menurut saya sih bagus tapi tak tau kalo menurut kalian .

Oke kalo kawan kawan ingin yang lasung lasung aja ini

<div id="modal">
<a href="#">X</a>
Catatanwandicager.blogspot.com
</div>
<div id="pembungkus">
<div id="judul">
<h1>
Cara membuat Overlay dengan CSS
</h1>
</div>
<div id="tulisan">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
</div>
<a href="#modal">Klik ini</a>
<style>
a{
background-color: rgb(255,0,0);
font-size: 20px;
width: 100px;
height: 40px;
padding: 5px;
margin: 50px;
text-decoration:none;
}
body{
background-color:rgb(0,255,0);
font-family:sans-serif;
margin: 5%;
}
#judul{
color: #fff;
font-size: 30px;
}
#tulisan{
font-size: 20px;
}
#modal{
position: fixed;
left: 10000px;
transition: left 1s;
-webkit-transition: left 1s;
-IE-transition: left 1s;
-moz-transition: left 1s;
}
#modal:target{
background-color:rgb(0,255,0);
top:40%;
left:40%;
width:300px;
height:300px;
text-align: center;
line-height:300px;
/* untuk overlaynya */
outline: 9999px solid rgba(0,0,0,0.5);
}
#modal a{
position:fixed;
line-height:0;
background-color: transparent;
right:0;
top:0;
}

</style>

Baca juga metode metode penulisan css

Oke itu dia tips cara membuat overlay tanpa javscript . semoga bermanfaat jangan lupa like fans page kami dan bantu share artikel ini . Terimakasih sudah berkenan baca artikel ini . Sampai jumpa di artikel yang lainnya tentunnya yang lebih menarik lagi dan lebih bermanfaat .

Pesan saya belajarlah dengan senang , agar ilmunya sampai ke otak kalian .

Mau liat atau download source code aplikasi premium bisa disini.

Cara membuat overlay tanpa javascript

0 Komentar