Cara membuat overlay tanpa javascript - Hallo sahabat Berita Teknologi Paling Update, Pada Artikel yang anda baca kali ini dengan judul Cara membuat overlay tanpa javascript, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Pelajaran, Artikel Pemprograman web, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara membuat overlay tanpa javascript
link : Cara membuat overlay tanpa javascript

Cara membuat overlay tanpa javascript

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 .

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

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 .

Demikianlah Artikel Cara membuat overlay tanpa javascript

Sekianlah artikel Dari

www.lulussmk.com

Cara membuat overlay tanpa javascript kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara membuat overlay tanpa javascript dengan alamat link https://pakarteknologiandroid.blogspot.com/2020/04/cara-membuat-overlay-tanpa-javascript.html