Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



POPUP DETAIL
May 7, 2011
Posted by: Fauzie


Saya ada salah seorang peminat blog dan tutorial yang yang disediakan oleh sohtanaka.com. Semua yang diajar sangat mudah untuk diikuti atau mencubanya. Salah satu ciptaan beliau yang menarik ialah apa yang dipanggil “popout details” dengan hanya menggunakan CSS. Sila klik di sini untuk melihatnya.

Dalam tutorial ini saya ingin tunjukkan bagaimana saya telah membuat sedikit modifikasi bagi membolehkan ia digunakan sebagai elemen iklan dan juga plugin “Anda Mungkin Juga Menyukai Artikel Ini” yang banyak diletakkan dibawah blog post.

Di bawah ini ialah “Live Demo” feature dan diikuit dengan kod-kod html dan CSS. Untuk demo ini saya hanya menggunakan 3 column sahaja.




"Live Demo". Sila hover image.
  • Touchscreen GPS
    A new handheld GPS navigator that seamlessly merges entertainment and navigation into one supreme portable GPS unit!
  • Android PC Tablet
    Everything just became a lot easier with this 7 Inch Android Tablet. Browse the internet using WiFi, watch videos on YouTube, read ebooks and send emails!
  • Touchscreen Phone
    a first class quad-band mobile phone that supports the four global standard GSM frequencies so you can trust it to work anywhere in the world!




Kod-kod html, CSS dan jQuery adalah seperti berikut:

<html>
<head>
<style type="text/css">

img {
border: none;
}

ul.columns {
width: 960px;
list-style: none;
padding: 0;
margin-bottom:250px;
}

ul.columns li {
width: 150px;
float: left; display: inline;
margin: 10px; padding: 0;
position: relative;
}

ul.columns li:hover {
z-index: 99;
}

ul.columns li img {
position: relative;
filter: alpha(opacity=30);
opacity: 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}

ul.columns li:hover img{
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

ul.columns li .info {
position: absolute;
left: -10px; top: -10px;
padding: 150px 10px 0px;
height:130px;
width: 150px;
display: none;
background: yellow;
border: yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color:#fff;
font-family:arial;
}

ul.columns li:hover .info {
display: block;
}

ul.columns li h2 {
font-size: 1.2em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px 0;
}

ul.columns li p {
padding: 0; margin: 0; font-size: 0.9em;
}
</style>
</head>
<body>

<ul class="columns">
<li>
<a href="#"><img src="http://3.bp.blogspot.com/-cvAjg_GR-

6k/TcQIQAVQRNI/AAAAAAAABVI/epkPS4niMnE/s1600/navi1.jpg" alt="" width="150" height="135"

/></a>
<div class="info">
<span style="color:#484848;font-size:1.0em;"><b>Touchscreen GPS</b></span><br/><span

style="color:#000;font-size:0.8em;">A new handheld GPS navigator that seamlessly merges

entertainment and navigation into one supreme portable GPS unit!</span>
</div>
</li>
<li>
<a href="#"><img src="http://2.bp.blogspot.com/-

O58Hdv7YvM8/TcQZBNn_rEI/AAAAAAAABVQ/uQNzeymsTR4/s1600/mid.jpg" alt="" width="150"

height="135" /></a>
<div class="info">
<span style="color:#484848;font-size:1.0em;"><b>Android PC Tablet</b></span><br/><span

style="color:#000;font-size:0.8em;">Everything just became a lot easier with this 7 Inch

Android Tablet. Browse the internet using WiFi, watch videos on YouTube and send emails!

</span>
</div>
</li>
<li>
<a href="#"><img src="http://2.bp.blogspot.com/-

ubGpvx9okPM/TcQadEIb9HI/AAAAAAAABVg/sQaGKFWmcTQ/s1600/phone.jpg" alt="" width="150"

height="135"/></a>
<div class="info">
<span style="color:#484848;font-size:1.0em;"><b>Touchscreen Phone</b></span><br/><span

style="color:#000;font-size:0.8em;">a first class quad-band mobile phone that supports the four

global standard GSM frequencies.</span>
</div>
</li>
</ul>

</body>
</html>


Kembali kepada | Archives →

Sebarang komen dan pertanyaan, sila klik butang di bawah ini: