Cara membuat overlay tanpa javascript

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

Selamat datang kawan kawan di blog saya yang sederhana ini . Sebelumnya saya mau tanya bagaimana kabarnya kawan ? mudah mudahan sehat , amin . Di artikel sebelumnya saya telah berbagi mengenai , cara membuat fungsi di bahasa c ? mau tau caranya mari baca sini . Di artikel sebelumnya juga saya telah berbagi bahasa c lagi yaitu array pada bahasa c apa itu array ? bagaimana cara membuatnya ? semua pertanyaan ini di jawab disini .

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 .

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 .

<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>

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

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>

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 .

Silahkan kunjungi blog terbaru saya disini