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 pola bilangan bahasa c . Di artikel sebelumnya juga saya telah berbagi mengenai cara memanipulasi posisi dengan jQuery .
Oke di kesempatan kali ini saya akan berbagi mengenai tips tips css . Saya akan kembali memberikan tips css kepada kawan kawan . Kali ini tipsnya apa ? kali ini saya kan memberikan tips ke kawan kawan bagaimana membuat tampilan menu posting responsive . Jadi rensponsive itu meskipun kita lihat di berbagi ukuran dan yang kecil pun misalnya smartphone , akan tetap bagus . Oke kalo kawan kawan udah pada gak sabar ingin tau apa aja propery css yang akan disajikannya , langsung aja yok .
Pertama kita buat dulu HTML nya dulu . Sebelumnya photnya kalo mau ganti ganti aja .
<div id="pembungkus">
<img src="http://sma-smk-puragabaya.sekolah-unggulan.com/asset/file/media/LOGO_puragabaya.png">
<span>
<p>
<b>SMK/SMA puragabaya</b>
</p>
<a href="#">Baca selengkapnya</a>
</span>
</div>
Oke jika sudah, sekarang kita akan mulai design , oke sekarang buat css nya .
#pembungkus a{
text-decoration:none;padding:5px;
background-color: rgba(0,0,0,0.5);color:#fff;
border-radius:5px;
}
#pembungkus a:hover{background-color:rgb(0,0,0);}
#pembungkus{
text-align:center;
position:relative;
width: 300px;height:300px;
overflow:hidden;
}
#pembungkus img{
width:100%;
height:100%;
}
#pembungkus:hover span{
display:block;
}
#pembungkus span{
line-height: 40px;font-size:20px;
display:none;
position:absolute;top:0;
background-color: rgba(255,255,255,0.5);
width:100%;height:100%;
}
Nah begitu kita mengerahkan mouse ke pada photo maka akan muncul “ baca selengkapnya “ . kenapa sih bisa gitu ? pertama saya mempunyai id pembungkus yang saya atur position=relative dan yang di span tinggal di atur position=absolute agar bisa di atur top=0 nya dan agar top =0 sesuai dengan parent elementnya atau sesuai dengan pembungkusnya .
Sebenarnya fixed juga bisa tetapi lebih tepatnya relative karena kalo fixed itu anti scroll . Bro kalo parent elementnya sama positionnya absolute bisa gak ? bisa , yang gak bisa itu kalo position parent element nya static . Jadi kalo kita tidak di atur pembungkus position relative maka top = 0 nya akan ke bagian paling atas browser bukan parent elementnya , mungkin sedikit membingungkan ? tetapi dengan terus ber experiment kalian akan terbiasa kok dengan ini .
Jadi sebenarnya sudah beres , tetapi kalo pake smartphone kan gak bisa hover , cara menaganinya tinggal kita gunakan saja query css . Kita akan ubah jika medianya ukuran maksimal lebarnya 800px maka yang bagian span akan ke bawah . Caranya gimana ? kita tinggal tambahkan ini ke bagian cssnnya
@media only screen and (max-width:800px){
#pembungkus{
position:static;
}
#pembungkus img{
height:60%;
}
#pembungkus a{padding:0px;border-radius:0px;}
#pembungkus span{
line-height:0;
display:block;
height:40%;
position:static;
}
}
Jadi dengan @media only screen and (max-width:800px) , artinya jika medianya screen dan maksimal lebarnya 800px maka id id ini berjalan . Gimana lumanya bagus bukan ? mungkin kawan kawan kalo udah tau cara membuat responsive bisa membuat menu posting lebih bagus dan lebih baik dari yang saya buat .
Oke mungkin segitu saja cara membuat menu posting responesive dengan css . Semoga menambah wawasan dan juga tentunya semoga tipsnya bermanfaat . Oke sampai jumpa lagi di artikel yang lainnya yang lebih menarik dan juga lebih bermanfaat .
No comments:
Post a Comment