jom kita blog

2011-05-25T22:43:00.001-07:00

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

BINA NEWS TICKER DENGAN JQUERY CONTOH 2

May 26, 2011
Posted by: Fauzie

Kandungan Tutorial

Ini ialah tutorial lanjutan bagaimana membina sebuah newsticker. Seperti yang telah dibincangkan pada contoh pertama, contoh kedua ini juga menggunakan javaScript bagi membolehkan ia berfungsi dengan sempurna.

Sedikit kelainan terdapat pada contoh ke dua ini--ia tidak menggunakan image atau gambar.

Pada dasarnya semua kod yang digunakan adalah sama seperti kod-kod yang terdapat dalam contoh pertama. Pengubahsuaian pada kod bagi contoh kedua ini hanya dibuat untuk mendapatkan efek yang dikehendaki dan juga untuk memastikan kod javaScriptnya tidak "mengganggu" kod javaScript bagi contoh pertama.

Untuk melihat contoh kedua newsticker ini, sila klik di sini. Dan untuk mencubanya sila copy & paste kod-kod di bawah ini.

Kod-kod CSS, HTML dan javaScript untuk contoh ini

<html>
<head>
<style type='text/css'>
#ticker-demo {
width:220px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto auto 50px;
}

#ticker-demo a {
text-decoration:none;
}
#ticker-demo img {
border: 2px solid #FFFFFF;
}

#ticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}

.ticker-jcarousellite {
width:250px;
}

.ticker-jcarousellite ul li{
list-style:none; display:block; padding-bottom:1px; margin-bottom:5px;
}

.ticker-jcarousellite .Exm {
float:left; width:200px;
padding-left:20px;
height:70px;
border-bottom:1px solid #ccc;
}
.ticker-jcarousellite .Exm span.cat {
display: block; font-size:10px; color:#808080;
}

.clear {
clear: both;
}
</style>
</head>
<body>

<div id="ticker-demo">
<div class="title">Latest News</div>
<div class="ticker-jcarousellite">
<ul>
<li>
<div class="Exm">
<a href="#">Money Matters</a>
<span class="cat"> Americans waste an estimated 14% to 40% of the food produced for their consumption. It happens in fields, stores and kitchen. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Sports</a>
<span class="cat">Tampa Bay went on the road and dropped Boston 5-2 in Game 1 of the Eastern Conference finals. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm"><a href="#">Travel</a>
<span class="cat">Norwegian Cruise Line is pulling the Norwegian Jade from the Eastern Mediterranean. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Your Life</a><span class="cat">The FDA is considering adding dosing instructions for kids under 2 to Children's Tylenol and similar products. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Technology</a>
<span class="cat"> Sony is taking the first steps to making its PlayStation Network operational.</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Opinion</a><span class="cat">Is the company the evil killer of mom-and-pops or the brave stalwart against big bad banks. </span>
</div>
<div class="clear">
</div>
</li>
</ul>
</div>
</div>

<script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermint/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(".ticker-jcarousellite").jCarouselLite({
vertical: true,
visible: 4,
auto:500,
speed:1500
});
});
</script>
</body>
</html>

Kembali kepada | Archives →

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

Anda mungkin juga meminati artikel ini

CSS3 transitions text. see the beautiful image sliding in and the wonderful world of CSS	CSS3 transitions text Box 2	CSS3 transitions text. see the beautiful image sliding in and out. the wonderful world of CSS
CSS3 transitions text. see the beautiful image sliding in and out. the wonderful world of CSS	CSS3 transitions text Box 2	CSS3 transitions text. see the beautiful image sliding in and out. the wonderful world of CSS

2011-05-16T09:04:00.000-07:00

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

BINA IMAGE SCROLLABLE CONTOH 2

May 16, 2011
Posted by: Fauzie

Kandungan Tutorial

Ini ialah contoh ke 2 "scrollable image". Seperti contoh pertama, ia juga dibina menggunakan javaScript. Perbezaan contoh ini dengan contoh sebelumnya ialah image di scroll secara "vertical" atau naik ke atas. "Live demo" dibina di url yang berlainan bagi menggelak gangguan script-script yang terdapat dalam site ini.

Di bawah ini ialah screenshot "vertical scrollable image".

Untuk melihat contoh yang telah disediakan ini secara "Live Demo" sila klik di sini.

Di bawah ini ialah kod-kod HTML, CSS dan javaScript. Jika anda ingin mencuba, sila copy and paste kod-kod bi bawah ini di dalam Notepad. Sila rujuk tutorial sebelum ini bagaimana anda save file, upload di browser dan juga bagaimanan hendak meletakkan di dalam blog.

<html>
<head>
<style type="text/css">
.vertical {

/* required settings */
position:relative;
overflow:hidden;

/* vertical scrollers have typically larger height than width */
height: 450px;
width: 600px;
border-top:1px solid #ddd;
}

/* root element for scrollable items */
.items {
position:absolute;

/* this time we have very large space for height */
height:20000em;
margin: 0px;
}

/* single scrollable item */
.item {
border-bottom:1px solid #ddd;
margin:10px 0;
padding:15px;
font-size:12px;
height:180px;
}

/* elements inside single item */
.item img {
float:left;
margin-right:20px;
height:180px;
width:240px;
padding:2px;
border:1px solid #ccc;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.item h3 {
margin:0 0 5px 0;
font-size:16px;
color:#456;
font-weight:normal;

}

/* the action buttons above the scrollable */
#actions {
width:600px;
margin:30px 0 10px 0;
}

#actions a {
font-size:11px;
cursor:pointer;
color:#666;
}

#actions a:hover {
text-decoration:underline;
color:#000;
}

.disabled {
visibility:hidden;
}

.next {
float:right;
}
</style>
</head>
<body>

<div id="actions">
<a class="prev">« Back</a><a class="next">More pictures »</a>
</div>
<div class="scrollable vertical">
<div class="items">
<div>
<div class="item"><img src="http://farm1.static.flickr.com/3650/3323058611_d35c894fab_m.jpg" />
<h3>1. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a>   <a href="#">Show in map</a>
</p>
</div>
<div class="item">
<img src="http://farm1.static.flickr.com/3635/3323893254_3183671257_m.jpg" />
<h3>2. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a>   <a href="#">Show in map</a>
</p>
</div>
</div>
<div>
<div class="item">
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_m.jpg" />
<h3>3. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a>   <a href="#">Show in map</a>
</p>
</div> <div class="item">
<img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_m.jpg" /><h3>4. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined
understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a>   <a href="#">Show in map</a>
</p>
</div>
</div><div>
<div class="item"><img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_m.jpg" /><h3>5. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a>   <a href="#">Show in map</a>
</p>
</div>
<div class="item"><img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_m.jpg" /><h3>6. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined
understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a>   <a href="#">Show in map</a>
</p>
</div>
</div>
<div>
<div class="item">
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_m.jpg" /><h3>7. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a>   <a href="#">Show in map</a>
</p>
</div>
<div class="item">
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_m.jpg" />
<h3>8. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a>   <a href="#">Show in map</a>
</p>
</div>
</div>
</div>
</div>

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {

// initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true, mousewheel: true });

});
</script>
</body>
</html>

Kembali kepada | Archives →

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

2011-05-11T01:55:00.000-07:00

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

BINA IMAGE SCROLLABLE CONTOH 1

May 14, 2011
Posted by: Fauzie

Kandungan Tutorial

Dalam siri tutorial ini saya ingin tunjukkan bagaimana membina beberapa “scrollable” dengan menggunakan jQuery/javaScript. Untuk contoh pertama sila klik di sini. Seperti tutorial sebelum ini saya akan tunjukkan “live demo” dengan menggunakan “blog site” yang lain kerana terlau banyak script jQuery boleh mengganggu perjalanan lain-lain contoh yang terdapat di dalam blog saya ini.

Scrollable dalam contoh ini “berkerja” dengan cara mengklik “arrow button” atau butang (butang kiri atau butang kanan).

Saya tidak hendak membincangkan bagaimana scrollable ini dibina secara detail kerana anda perlu memahami kod-kod HTML dan CSS. Contoh ini menggunakan “horizontal CSS”. Seperti biasa jika anda ingin mencuba, sila copy and paste kod-kod bi bawah ini di dalam Notepad. Sila rujuk tutorial sebelum ini bagaimana anda save file, upload di browser dan juga bagaimanan hendak meletakkan di dalam blog.

Jom kita lihat kod-kod HTML, CSS dan javaScript yang digunakan di bawah ini.

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

.scrollable {

/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;

/* custom decorations */
border:1px solid #ccc;
background:url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x;
}

.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}

.items div {
float:left;
width:680px;
}

/* single scrollable item */
.scrollable img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:75px;

-moz-border-radius:4px;
-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}

.scrollable {
float:left;
}

a.browse {
background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/hori_large.png) no-repeat;
display:block;
width:30px;
height:30px;
float:left;
margin:40px 10px;
cursor:pointer;
font-size:1px;
}

/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }

/* left */
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

/* up and down */
a.up, a.down {
background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/vert_large.png) no-repeat;
float: none;
margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }

/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
</style>
</head>
<body>


<a class="prev browse left"></a>

<div class="scrollable">

<div class="items">
<div><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
</div>

<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
</div>

<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
</div>

<a class="next browse right">
</a>
<br clear="all" />


<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {

// initialize scrollable
$(".scrollable").scrollable();

});
</script>
</body>
</html>

Dalam contoh ini "frame" boleh dikurang daripada 5 kepada 3 dengan menukar lebar (width) seperti ini:
Sila pergi ke kod seperti di bawah ini dan tukar "width: 680px;" kepada "width:415px;".

.scrollable {

/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;

Lihat "Live Demo", di sini.

Kembali kepada | Archives →

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

2011-05-09T01:48:00.001-07:00

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

BINA NEWS TICKER DENGAN JQUERY

May 9, 2011
Posted by: Fauzie

Kandungan Tutorial

News Ticker adalah cara yang menarik untuk menunjukkan “headlines” atau “update” kepada pembaca. Terdapat banyak tutorial yang membincangkan bagaimana untuk membuat news ticker ini, malangnya saya rasa ianya tidak begitu sesuai terutama kepada yang baru menggenali “jQuery”.

Untuk tutorial ini jom kita lihat bagaimana kita boleh membuat news ticker yang mudah tetapi “bertenaga” dengan menggunakan jQuery dan juga plugin jCarousel Lite walaupun plugin ini dikira “kecil”.

Untuk melihat “Live Demo” sila klik di sini. Saya telah membina “demo” news ticker ini di dalam url lain untuk menggelakkan “gangguan” kepada script jQuery yang banyak terdapat dalam blog saya inI.

Untuk membuat news ticker ini sila lihat kod-kod html, CSS dan jQuery di bawah ini. Seperti biasa saya telah asingkan kod-kod ini mengikut warna.

<html>
<head>
<style type="text/css">
#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto auto 50px;
}

#newsticker-demo a {
text-decoration:none;
}
#newsticker-demo img {
border: 2px solid #FFFFFF;
}

#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}

.newsticker-jcarousellite {
width:300px;
}

.newsticker-jcarousellite ul li{
list-style:none; display:block; padding-bottom:1px; margin-bottom:5px;
}
.newsticker-jcarousellite .thumbnail {
float:left; width:110px;
}
.newsticker-jcarousellite .Exm {
float:right; width:190px;
}
.newsticker-jcarousellite .Exm span.cat {
display: block; font-size:10px; color:#808080;
}

.clear {
clear: both;
}
</style>
</head>
<body>
<div id="newsticker-demo">
<div class="title">Latest News</div>
<div class="newsticker-jcarousellite">
<ul>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg ">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg">
</div>
<div class="Exm">
<a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg">
</div>
<div class="Exm"><a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="thumbnail"><img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg">
</div>
<div class="Exm"><a href="#">Barcelona Pavilion</a>
<span class="cat">Designed by Ludwig van der Rohe and built for the International Exposition in 1929</span>
</div>
<div class="clear">
</div>
</li>
</ul>
</div>
</div>

<script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermint/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
visible: 3,
auto:500,
speed:1000
});
});
</script>
</body>
</html>

Untuk mencubanya membuatnya, sila salin (copy) semua kod-kod ini dan "paste" di dalam Notepad. Save fail dengan memberi nama serta extension .html dibelakangnya (contoh: newsticker.html). Untuk melihatnya, anda buka browser, klik "File"-->klik "Open File" dan pergi ke "document" dan cari serta klik nama fail tersebut.

Untuk memasangnya di dalam blog, sila klik Design--->Edit HTML dan cari kod ini:

]]></b:skin>
</head>

Di bahagian atas kod ini, ]]></b:skin> sila paste kod-kod warna "maroon' (kod CSS).

Satu perkara yang harus diperhatikan ialah kod ini <style type="text/css"> dan juga kod ini </style>. Ini adalah kerana terdapat template blogger yang perlu ditambah dengan kod-kod ini dan ada juga yang tidak memerlukannya. Jika anda keluarkan kod ini dan fail tidak boleh di "save", maka anda harus menambah kod-kod ini.

Setelah fail di"save", sila cari kod-kod ini pula:

</body>
</html>

Kod-kod ini terletak di bahagian bawah sekali (sila scroll kod hingga yang paling bawah). Di bahagian atas </body>, anda paste pula kod-kod jQuery yang berwarna hijau.

Kod-kod HTML (yang berwarna biru) anda boleh letakkan di bahagian sidebar iaitu klik Design-->klik Add a Gadget page element)-->klik HTML/javaScript dan paste kod-kod berwarna biru itu.

Kod-kod HTML ini juga boleh diletakkan di bahagian "blog post". Klik Edit Posts--> klik Edit Html (bukan dalam mode compose). Satu perkara yang perlu anda lakukan ialah "compress" kod-kod HTML ini iaitu rapatkan di antara satu sama lain seperti ini:

<div id="newsticker-demo"><div class="title">Latest News</div><div class="newsticker-jcarousellite"><ul><li>...........

"Live Demo"

Kembali kepada | Archives →

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

2011-03-13T19:20:00.001-07:00

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

Kandungan Tutorial

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:

2011-02-23T08:38:00.000-08:00

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

KOLEKSI ARKIB TAHUN 2011

TAHUN TIONGHUA

May 2011

February 2011

Kembali kepada | Archives →

2011-02-21T08:47:00.000-08:00

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

KOLEKSI ARKIB TAHUN 2010

TAHUN TIONGHUA

November 2010

Oktober 2010

September 2010

Ogos 2010

Bina Iklan Dengan CSS

Julai 2010

Jun 2010

Mei 2010

Buat Butang Atau Button dengan CSS

Kembali kepada | Archives →

2011-02-21T08:39:00.000-08:00

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

KOLEKSI ARKIB TAHUN 2009

TAHUN TIONGHUA

Disember 2009

Tutorial: Membina Website Layout

Oktober 2009

Bina Tooltip Dengan CSS

September 2009

Ogos 2009

Julai 2009

Jun 2009

Mei 2009

Mac 2009

Google Adsense: Tip Adsense

Januari 2009

Link-Hover Dan Rollover

Kembali kepada | Archives →

2011-02-21T08:33:00.002-08:00

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

KOLEKSI ARKIB TAHUN 2008

TAHUN TIONGHUA

September 2008

Tutorial-HTML Pertengahan

Jun 2008

Tutorial-Asas HTML

Mei 2008

April 2008

Kembali kepada | Archives →

2011-02-01T08:34:00.001-08:00

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

IMAGE SLIDER CONTOH 3

February 21, 2011
Posted by: Fauzie

Kandungan Tutorial

JQuery plugin selalunya dibuat atau disediakan dengan begitu kompleks sekali dan ini menyebabkan ramai yang tidak begitu faham untuk menggunakannya. JQuery sebenarnya boleh dipermudahkan. Ini adalah kerana ia mempunyai “inbuilt fuction” “animate()” . Dalam contoh ketiga ini jom kita lihat bagaimana untuk membuat image slider yang menggunakan jQuery yang paling “ringan” tetapi dapat memberi effect yang sangat besar.

"Live demo" di bawah ini dibina dengan menggunakan fungsi “animate”. Sila klik butang bernombor dan anda akan dapati image akan bertukar dari satu image ke satu image yang lain.

"Live Demo"

Model 1: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

1 2 3 4

Model 2:Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

1 2 3 4

Kod-kod HTML, CSS dan jQuery untuk membina effect seperti di atas adalah seperti berikut. Walaubagaimana pun kod-kod ini hanya untuk membina satu set image slider sahaja. Contoh yang ditunjukkan di atas sebenarnya mempunyai 2 set kod HTML, CSS dan jQuery yang sama tetapi mempunyai nama tag atau div class yang berlainan.

Untuk melihat bagaimana ia berfungsi, anda boleh copy & paste kod-kod di bawah ke dalam Notepad. Save fail dengan memberi nama yang mempunyai extension .html di belakangnya seperti ini, imageslider.html. Kemudian buka browser, klik File-> Klik Open File-> klik nama fail yang anda simpan atau save tadi.

<html>
<head>
<style type="text/css">
#myslide {
width:160px;
overflow:hidden;
position: relative;
height:170px;
margin-bottom:20px;
border-left:0px solid #000;
border-right:0px solid #000;
border-bottom:0px solid #000;
border-top:0px solid #000;
margin-top:10px;
}
#myslide .cover{
width:640px; /*------- class mystuff width * number of mystuff divs (160 * 3 = 480)---------- */
position: absolute;
height:160px;
}
#myslide .mystuff {
width:160px;
float:left;
padding:0px 0;
}
.button1,.button2,.button3,.button4{
background: yellow;
padding:6px;
display:block;
float: left; margin-right:5px;text-decoration:none;
}
.active{
background:red;
padding:6px;
display:block;
float:left;
outline:none;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div style="clear:both;margin:10px 0;"></div>
<div id="button">
<a class="button1 active" rel="1" href="#">1</a>
<a class="button2" rel="2" href="#">2</a>
<a class="button3" rel="3" href="#">3</a>
<a class="button4" rel="4" href="#">4</a>
</div>

<div class="clear"></div>

<div id="myslide">
<div class="cover">

<div class="mystuff"><img src="http://images.apple.com/iphone/home/images/route-facetime-20101116.png " width="160" height="170"/></div>
<div class="mystuff"><img src="http://images.apple.com/iphone/home/images/route-hd-20101116.png " width="160" height="170"/></div>
<div class="mystuff"><img src=" http://images.apple.com/iphone/home/images/route-retina-20101116.png " width="160" height="170"/></div>
<div class="mystuff"><img src=" http://images.apple.com/iphone/home/images/route-multitasking-20101116.png " width="160" height="170"/></div>
</div> 
</div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){
$('#button a').click(function(){
var integer = $(this).attr('rel');
$('#myslide .cover').animate({left:-160*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
});
});
</script>
</body>
</html>

Kod-kod berwarna "maroon" adalah kod CSS, yang berwarna biru ialah kod-kod HTML dan yang kod-kod berwarna hijau ialah kod jQuery.

Jika anda ingin mencuba membuatnya dalam blog blogger, klik-> Design -> klik Edit html->copy & paste kod-kod berwarna maroon di atas </head>

Kemudian copy & paste kod-kod jQuery dan letakkan di bahagian atas </body>. Bagi kod-kod HTML pula, sila copy & paste kod-kod berwarna biru di dalam bahagian posting. Pastikan anda berada dalam mode Edit Html bukan dalam mode compose.

Nota: Saya sudah lama tidak menggunakan free template yang disediakan oleh blogger atau mana-mana template yang boleh didownload. Oleh yang demikian saya tidak begitu pasti sama ada kod-kod jQuery ini boleh diletakkan di bahagian atas </body> template blogger. Anda boleh mencubanya dengan membuat atau create satu blog latihan.

Kembali kepada | Archives →

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

2011-02-01T01:31:00.001-08:00

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

AUTOMATIC IMAGE SLIDER CONTOH 2

February 21, 2011
Posted by: Fauzie

Kandungan Tutorial

Contoh kedua image slider yang menggunakan css/html dan jQuery ialah apa yang dipanggil “auto-playing featured content slider”, di mana ‘content” atau maklumat dimasukkan bersama image. “Interaction” dan “animation” menggunakan jQuery UI library (user interface). Terdapat banyak tutorial yang membincangkan “featured content slider” ini. Walaubagaimana pun kebanyakkannya menggunakan “jQuery Coda Slider plugin”.

Di bawah ini ialah "Live Demo" "featured content slider". Jika anda ingin mencubanya, sila copy & paste kod-kod html/CSS dan jQuery di bawah ini.

Contoh Foto Slider Menggunakan jQuery

Vivistar 3.6" Quad Band Dual SIM

WIFI, TV, QWERTY with 3.6" touch screen with clear crisp graphics to give a brilliant vewing experience....read more

Barcelona Plus Quad Dual SIM WIFI

The touchscreen cellphone represents the forefront of mobile technology....read more

Focus Mini Slider

One of the Chinese most popular cellphones. It's big on both performance and style....read more

6 inche HD Touch Screen GPS

First portable GPS Navigator that comes with DVB-T multi-wonderful-functions....read more

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

/***photo slider 2***/
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px; overflow:hidden;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px; height:250px;
overflow:auto;
overflow-x:hidden;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px; text-decoration:none;
color:#333; background:#fff;
line-height:20px; outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .infom{
position:absolute;
bottom:0; left:0;
height:70px;
color:#fff;
font-size:11px;
font-family:Verdana;
padding-left:2px;
background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png');
}
#featured .ui-tabs-panel .infom a.hideshow{
position:absolute; font-size:11px; font-family:Verdana; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;
}
#featured .infom h2{
font-size:1.2em; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0; font-weight:normal;
overflow:hidden;
}
#featured .infom p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .infom a{
text-decoration:none;
color:#fff;
}
#featured .infom a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}

</style>
</head>
<body>

<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/2.jpg" alt="" width="80" height="50" /><span>Lorem ipsum dolor. </span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/5.jpg" alt=""width="80" height="50"/><span>Praesent
Maecenas est </span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/3.jpg" alt="" width="80" height="50" /><span> Morbi malesuada
</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/4.jpg" alt="" width="80" height="50" /><span>Lorem ipsum dolor</span></a></li></ul>

<div id="fragment-1" class="ui-tabs-panel" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/2.jpg" alt=""width="400" height="250" /><div class="infom"><h2><a href="#">Maecenas est erat </a></h2>Morbi malesuada
Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor. ....<a href="#" >read more</a></div></div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/5.jpg" alt="" width="400" height="250" /><div class="infom" ><h2><a href="#">Praesent
Maecenas est erat </a></h2>Praesent pellentesque nibh sed nibh. Sed ac libero. Etiam quis libero.
In hac habitasse ....<a href="#" >read more</a></div></div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/3.jpg" alt="" width="400" height="250" /><div class="infom" ><h2><a href="#">Lorem ipsum dolor
Consectetuer </a></h2>Morbi malesuada
Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor ....<a href="#" >read more</a></div></div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/4.jpg" alt="" width="400" height="250" /><div class="infom" ><h2><a href="#">In hac habitasse
Quisque </a></h2>Fusce rhoncus
Praesent pellentesque nibh sed nibh. Sed ac libero. Etiam quis libero. ....<a href="#" >read more</a></div></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</body>
</html>

Kembali kepada | Archives →

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

2011-02-01T01:10:00.000-08:00

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

AUTOMATIC IMAGE SLIDER DENGAN CSS/JQUERY

February 22, 2011
Posted by: Fauzie

Kandungan Tutorial

Dalam siri tutorial ini saya ingin membincangkan berhubung dengan widget “image slider” yang dibina dengan hanya menggunakan HTML/CSS dan juga jQuery. Pembinaan image slider dengan menggunakan kaedah ini telah memberi satu cabaran kepada penggunaan “flash” yang mana kaedah ini telah mendominasi pembinaan website sebelum ini.

Sebenarnya image slider yang berasaskan html ini lebih banyak kebaikannya terutama dari segi SEO. Contoh pertama yang ingin saya tunjukkan di sini ialah “automatic image slider” di mana image atau gambar bergerak secara otomatik.

Di bawah ini ialah contoh “Live Demo” menggunakan kaedah ini. Image slider ini sesuai untuk dibuat iklan.

1 2 3 4 5

Untuk membina image slider seperti dia atas, kita mulakan dengan menyediakan“wrapping container” yang diberi nama sebagai“main_view”. Di dalamnya kita akan diletakkan dua section yang diberi nama sebagai: “image_reel” dan “paging".

Image_reel mengandungi image atau gambar yang akan di”slide” dan paging pula mengandungi “paging control”. Langkah seterunya ialah menyediakan kod CSS dan juga jQuery.

Di bawah ini ialah kod sepenuhnya untuk effect ini. Anda boleh copy & paste kod-kod ini dan save dalam Notepad. Sila lihat rujuk tutorial sebelum ini untuk mengetahui bagaimana cara “save file name” dalam Notepad dan upload ke browser. Jika anda copy & paste semua kod ini dengan betul, anda akan mendapatkan image slider seperti dalam contoh ini.

Warna maroon adalah kod CSS, warna biru kod HTML dan kod berwarna hijau pula adalah kod jQuery.

<html>
<head>
<style type="text/css">
.kotakslider {
width: 450px;
padding: 0;
margin-left: 30px;
}
.folio_block {
position: relative;
border:0px solid #ccc;
}

/*--Main Container--*/
.main_view {
float: right;
position: relative;
margin-bottom:50px;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 450px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
</style>
</head>
<body>
<div class='kotakslider'>
<div class='folio_block'>
<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<img alt='pic1' height='250' src='http://eu.chv.me/images/chinavasion-CVMB-M76-7.jpg' width='450'/>
<img alt='pic2' height='250' src='http://eu.chv.me/images/odolG5VC.jpg' width='450'/>
<img alt='pic3' height='250' src='http://eu.chv.me/images/awllttvk.jpg' width='450'/>
<img alt='pic4' height='250' src='http://eu.chv.me/images/chinavasion-CVEM-M143-9.jpg' width='450'/>
<img alt='pic5' height='250' src='http://eu.chv.me/images/YTgl41Nx.jpg' width='450'/>
<div class='paging'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
<a href='#' rel='5'>5</a>
</div>
</div>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>

</body>
</html

Jika anda berminat untuk meletakkan dalam bahagian post blog blogger anda sila pastikan kod-kod berwarna maroon (kod CSS) diletakkan di bahagian atas </head>, kod berwarna biru (kod html) di letak dalam bahagian post (dalam mode Edit Html)dan kod hijau (jQuery)di bahagian atas </body>.

Nota: Kemungkinan besar bila anda masukkan contoh ini didalam blog anda, kedudukan window slider tidak di tempat yang anda inginkan. Anda perlu membuat sedikit adjusment kepada "margin"nya.

.kotakslider {
width: 450px;
padding: 0;
margin-left: 30px;
}

Dalam contoh saya ini kedudukannya dari kiri (margin dari kiri) ialah 30px. Anda juga boleh adjust kedudukan atas atau bawah dengan menambah kod ini margin-top: xxx px;

Kembali kepada | Archives →

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

2010-11-29T07:11:00.001-08:00

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

BINA POCKET CARD DENGAN CSS

November 30, 2010
Posted by: Fauzie

Kandungan Tutorial

C SS membolehkan kita membuat "effect" dan "feature" yang hebat bagi mencantikkan dan memberi nilai lebih kepada sesuatu website itu. Salah satu perkara yang menarik berkenaan CSS, terutama CSS3 ialah "transition effect" ke atas elemen dengan hanya beberapa baris kod yang mana sebelum ini dibina menggunakan javaScript.

Dalam tutorial ini saya akan cuba tunjukkan bagaimana membuat "web pocket card" dengan menggunakan teknik CSS3. Versi ini adalah versi yang telah dibuat perubahan ke atas versi asalnya. Sila lihat versi asal di sini dan kemudian lihat pula dua versi yang saya buat seperti yang ditunjukkan dalam "live demo" di bawah ini.

Terdapat dua perbezaan jika dibandingkan versi asal dengan versi yang saya sediakan ini:

saya menggunakan image berbanding versi asal menggunakan "container".
container "terlompat-lompat" bila dihover pada versi asal, tetapi image pada versi saya naik dan turun dengan "cantik" dan "smooth". Effect ini terjadi dengan menambah kod -webkit-transition-duration: 1s.

"Live Demo" : Contoh pertama

Nota: hanya sesuai dengan browser Safari atau Chrome
Nota terbaru: contoh ini juga sesuai dilihat melalui versi Firefox baru ia itu Firefox 4

Bagi contoh pertama ini, image telah disusun secara "horizontal" dan ini dibina dengan menggunakan "table". Walaupun ia boleh disusun secara "listed item" <li>, cara meletakan image dalam table saya rasa lebih mudah.

Kod-kod Markup dan CSS untuk contoh "pocket card" di atas adalah seperti berikut.

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

#poket {
float: left;
margin-top:50px;
margin-bottom:10px;
margin-left:10px;
}
.poket-container {
width: 110px;
height: 58px;
float:left;
clear: left;
border-bottom: 1px solid #C5C5C8;

}
.kad {
width: 100px;
height: 22px;
float: left;
overflow: hidden;
margin-left: 28px;
margin-top: 35px;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
}
.kad-satu {

background-color: transparent;
}
.kad-dua {
background-color: transparent;
}
.kad-tiga {
background-color: transparent;
}
.kad-empat {
background-color: transparent;
}

/***kod untuk animasi***/
.poket-container a:hover {
height: 53px;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
text-decoration: none;
}

</style>
</head>
<body>
<div id="poket">
<table>
<tbody>
<tr>
<td>
<div class="poket-container">
<a class="kad kad-satu" href=""><img src="http://icondock.com/wp-content/themes/idock/images/featured-origami.png " float="center" border="none"/></a>
</div>
</td>
<td>
<div class="poket-container">
<a class="kad kad-dua" href=""><img src="http://icondock.com/wp-content/themes/idock/images/featured-webpro.png" float="center" border="none"/></a>
</div>
</td>
<td>
<div class="poket-container">
<a class="kad kad-tiga" href=""><img src="http://icondock.com/wp-content/themes/idock/images/featured-higloss.png " float="center" border="none"/></a>
</div>
</td>
<td>
<div class="poket-container">
<a class="kad kad-empat" href=""><img src="http://icondock.com/wp-content/themes/idock/images/featured-simplybold.png " float="center" border="none"/></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Nota: Jika anda ingin membuatnya dalam blog, sila ambil perhatian kepada kod CSS ini:

#poket {
float: left;
margin-top:50px;
margin-bottom:10px;
margin-left:10px;
}

Pixel(px) margin kod-kod berwarna maroon boleh di "adjust" bagi menentukan kedudukan "pocket card" ini. Jika anda mencubanya dengan Notepad, sila tambah atau kurangkan pixel tersebut untuk mengetahui bagaimana ia berfungsi.

"Live Demo" : Contoh kedua

Bagi contoh kedua ini, saya telah membuat sedikit lagi perubahan. Pertama, image disusun secara "vertical" dan kedua, menggunakan image sebagai "poket" (dalam contoh pertama, garisan bawah image tersebut dibuat dengan kod ini border-bottom: 1px solid #C5C5C8;)

Di bawah ini ialah kod lengkap HTML dan CSS bagi contoh di atas. Jika anda ingin mencubanya, copy & paste semua kod ini dalam Notepad. Sila lihat tutorial-tutorial sebelum ini cara dan langkah-langkah untuk save dan upload. Begitu juga untuk membina dalam website atau blog, anda boleh lihat tutorial-tutorial ini.

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

/***pocket card with image-transition and translateY--contoh No. 2***/
#imageCARD {
margin: 180px 150px 10px 100px;
float: left;
}

.imageCARD-container {
width: 560px;
height: 58px;
float:left;
clear: left;
background: url(http://www.zulsdesign.com/images/pemisah.png) no-repeat;
}

.foto {
width: 200px;
height: 22px;
float: left;
overflow: hidden;
margin-left: 140px;
-moz-box-shadow: 5px 0px 10px grey;
-webkit-box-shadow: 5px 0px 10px grey;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
margin-top:-23px;
}

.foto-one {
background-color: transparent;
}

.foto-two {
background-color: transparent;
}

/* ======== Animations ======== */

.imageCARD-container a:hover {
height: 170px;
-webkit-transform: translateY(-147px);
-moz-transform: translateY(-147px);
text-decoration: none;
}

</style>
</head>
<body>

<div id="imageCARD">
<div class="imageCARD-container">
<a class="foto foto-one" href="http://www.blogger.com/post-edit.g?

blogID=6477671071252691471&postID=5110459751877438509"><img

src="http://t1.gstatic.com/images?

q=tbn:ANd9GcRNgfQueGf2QTlnf0ACRoZVNmCf2K013x-V3qXuSdMkt5hsGym9BQ"

float="center" width="203" height="200" border="none" /></a>
</div>
<div class="imageCARD-container">
<a class="foto foto-two" href="http://www.blogger.com/post-edit.g?

blogID=6477671071252691471&postID=5110459751877438509"><img

src="http://t2.gstatic.com/images?

q=tbn:ANd9GcRTIsP1y9ac47Av5wzmvurKvatZz1Rk4xOPsR1r2h6_tKhk_xhN"

float="center" width="203" height="200" border="none" /> </a>
</div>
</div>
</body>
</html>

Nota: Sila perhatikan kod-kod di bawah ini terutama kod ini margin: 180px 150px 10px 100px;. Kod ini ialah untuk menentukan kedudukan atau posisi "pocket card" ini terutama jika anda ingin letakkannya dalam blog:

180px ialah jarak atau margin dari atas
150px jarak margin sebelah kanan
10px jarak margin dari bawah
100px pula ialah jarak margin disebelah kiri

#imageCARD {
margin: 180px 150px 10px 100px;
float: left;

Anda hanya perlu tukarkan nombor pixel ini bagi mendapatka kedudukan yang sesuai bagi "pocket card" ini.

Kembali kepada | Archives →

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

2010-11-27T09:05:00.001-08:00

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

BINA KOTAK MENU

November 28, 2010
Posted by: Fauzie

Kandungan Tutorial

Saya sukakan website yang mempunyai design yang "simple". Website yang berkonsepkan seperti ini dikenali sebagai "minimalist". Untuk mendapatkan website "simple design" ini, satu perkara yang harus dilakukan ialah membina dan merekacipta sendiri sesuatu website itu dan yang penting banyak membuat "experiment".

Satu perkara yang saya suka membuat experiment ialah membina kotak-kotak menu yang diselikan dengan image serta ringkasan artikel seperti dalam site saya ini. Konsep ini telah ramai yang mempertengahkannya terutama site-site yang dibina menggunakan kod HTML5. Saya juga telah ber"experiment" bagi mendapatkan kotak menu seperti di site ini dimana konsep hover telah digunakan.

Dalam artikel kali ini saya ingin tunjukkan kotak menu yang telah saya buat dengan memperkenalkan feature-feature CSS seperti "CSS box", "box shadow", div, span style dan <li>. Di bawah ini ialah "Live Demo" bagi kotak tersebut.

"Live Demo" kotak menu.

November 28, 2010
Written by, Fauzie
Posted in Web design, Art

Architect of Transport
TAJUK ARTIKEL
Hello. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel, nonummy a, ultrices a, justo. Ut pretium viverra neque. Nulla rhoncus tincidunt dui. Aliquam eu massa vitae dui imperdiet aliquet.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel. Read more here →

Kod-kod mark-up dan CSS adalah seperti berikut. Anda perlu mempunyai asas HTML untuk memahaminya. Ini hanyalah contoh dan anda boleh mempelajarinya dengan copy & paste kesemua kod-kod ini ke dalam Notepad.

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

/***Contoh Kotak menu***/
.pos {
position: relative;
cursor: pointer;
height: 178px;
width: 165px;
float: left;
margin: 0 5px 10px 0;
}
.kotakpos {
display: block;
background: url('http://i425.photobucket.com/albums/pp331/fauzi6009/frame.png') #fff;
padding: 15px 20px 12px 20px;
height: 138px;
font-style: italic;
-moz-box-shadow: 5px 0px 10px grey;
-webkit-box-shadow: 5px 0px 10px grey;
}
.fotospan {
width: 149px;
height: 149px;
overflow: hidden;
position: relative;
display: block;
margin: -7px 0 0 -12px;
}
.artikeloverflow {
margin-top:10px;
height: 128px;
width:160px;
display: block;
padding: 10px;
text-align: right;
background-image: none;
font-family: Georgia;
font-size: 10px;
line-height: 16px;
text-decoration: none;
}

/***Kotak besar***/
#kotakbesar {
list-style:none;
background-color: #fff;
margin-left:190px;
margin-top:-160px;
height:300px;
width:230px;
border:1px solid #ccc;
-moz-border-radius: 10px; /* The radius for Mozilla */
-webkit-border-radius: 10px; /* The radius for Webkit */
font-size:10px; /* The font size */
font-family: Arial, Helvetica, sans-serif;
color:#ccc;
text-shadow:0px 1px 1px #fff;
padding:10px;
text-align:center;
display:block;
}

#kotakbesar li{
background:#fff;
}

#kotakbesar li hover{
background:#fff;
}

#kotakbesar #buz {
background:#fff;
height:210px;
margin-top:-20px;
}

#kotakbesar h3{
font-weight:bold;
}

#kotakbesar h3 a:hover {
color:#e6290e;
}

#kotakbesar li:hover h3 {
color:#e6290e;
}

.ayat{
font-size:1em; /* The font size */
font-family: Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 1px #fff;
margin:0;
padding:0;
text-align:left;
font-size:13px; /* Font size */
display:block;
}

/***Untuk buat huruf pertama besar***/

#TextWithDropCap:First-Letter {
color: Maroon;
font-size: 400%;
float:left;
font-family:Arial, Helvetica, sans-serif;
}

</style>
</head>
<body>

<div class="pos">
<div class="kotakpos">
<div class="fotospan"><img alt="" src="http://www.outdoor-photos.com/_photo/3833829.jpg" width="149" border="0" height="149" />
</div>
</div>
</div>
<div class="artikeloverflow">
<a href="#" style="text-decoration: none;">
<span style="color:#000;">April 14, 2010</span>
</a>
<br/>
<a href="#" style="text-decoration: none;">
<span style="color:#000;">Written by, Fauzie</span>
</a>
<br/>
<a href="#" style="text-decoration: none;">
<span style="color:#000;">Posted in Web design, Art</span>
</a>
<br/>
</div>
<ul id="kotakbesar">
<li id="buz">
<h2><i><span style="font-weight:normal;">Architect of Transport</span><br/></i>
<b><a href="#" style="text-decoration: none;color:maroon;">KOTAK SATU</a></b></h2>
<div class="ayat">
<div id="TextWithDropCap">Hello. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel, nonummy a, ultrices a, justo. Ut pretium viverra neque. Nulla rhoncus tincidunt dui. Aliquam eu massa vitae dui imperdiet aliquet.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel. <a href="#" style="text-decoration: none;"><i><span style="color:red;">Read more here →</span></i></a></div></div></li></ul>
</body>
</html>

Kembali kepada | Archives →

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

2010-11-26T06:38:00.000-08:00

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

CSS IMAGE REFLECTION

November 26, 2010
Posted by: Fauzie

Kandungan Tutorial

Seperti yang telah dinyatakan sebelum ini, "-webkit-box-reflect property" juga berupaya membina reflection atau bayang untuk sesuatu image atau gambar.

Di bawah ini ialah "Live Demo" untuk contoh "CSS image reflection". Pada dasarnya, kod CSSnya adalah mudah dan pendek, apa yang penting ialah kod -webkit-box-reflect hendaklah dimasukkan.

"Live Demo" contoh bagi image reflection. Hanya sesuai dilihat dalam browser Safari atau Chrome.

Kod-kod CSS dan HTMLnya adalah seperti di bawah ini:

<html>
<head>
<style type="text/css">
.imagereflection{
-webkit-box-reflect:below -10px -webkit-gradient(linear, left top, left
bottom, from(transparent), color-stop(0.1, transparent), to(white));
padding-bottom:50px;
margin-bottom:50px;
margin-left: 200px;
}
</style>
</head>
<body>
<img src="http://cdn.iconfinder.net/data/icons/20_icons/128_128/yahoo.png "
class="imagereflection"/>
</div>
</body>
</html>

Seperti biasa kod berwarna maroon ialah kod CSS dan kod yang berwarna biru pula ialah kod HTML.

Jika anda lihat kod CSS di atas terdapat tiga baris kod yang telah saya tambah. Kod-kod tersebut adalah seperti berikut:

padding-bottom:50px;
margin-bottom:50px;
margin-left: 200px;

Kod-kod ini hanyalah untuk membolehkan anda membuat "adjustment" kepada jarak kedudukan image tersebut dalam ruang blog jika anda ingin mencubanya dalam blogger. Jumlah pixel di atas adalah untuk contoh yang saya gunakan dalam blog ini.

Jika anda ingin mencubanya melalui Notepad, sila buang kod-kod ini kerana ia tidak sesuai jika membina image reflection ini dalam Notepad.

Kembali kepada | Archives →

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

2010-10-21T20:24:00.001-07:00

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

CSS TEXT REFLECTION

November 26, 2010
Posted by: Fauzie

Kandungan Tutorial

Cara mudah untuk membuat "reflection" atau bayang sesuatu image atau tek tanpa javaScript ialah dengan menggunakan "CSS3 Reflection" iaitu "-webkit-box-reflect property" yang diperkenalkan oleh Apple.

Malangnya penggunaan "property" ini hanya didukong atau supported oleh browser Safari dan Chrome. Kod asas bagi "box-reflect property" ini atau dikenali juga sebagai "CSS identifier" adalah seperti berikut:

-webkit-box-reflect: <direction> <offset> <mask-box-image> di mana:

<direction> merujuk kepada arah sesuatu 'reflection" atau bayang itu iaitu ke atas, ke bawah, ke kiri atau ke kanan.

<offset> pula merujuk kepada jarak "border" image atau kotak itu dengan "border" bayang atau reflection.

<mask-box-image> merujuk kepada sesuatu image yang digunakan untuk "overlay" reflection tersebut. Sebagai contoh, kita gunakan image berbentuk "ring" bagi membolehkan reflection berada dalam ring tersebut. Biasanya parameter ini kurang digunakan.

Dibawah ini ialah "Live Demo" bagi contoh "text reflection" ialah memberi bayang kepada sesuatu tek atau huruf.

"Live Demo" untuk "text reflection"

jom blog

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

#refleksi {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:40px;
color: #398ebe;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from( transparent),
to(rgba(100, 100, 100, 0.4)));
}

</style>
</head>
<body>
<div id="refleksi"><h1>jom blog</h1></div>
</body>
</html>

Nota: Kod warna maroon ialah kod CSS dan kod berwarna biru ialah kod HTML

Peringatan: Demo ini hanya sesuai dengan browser Safari atau Chrome sahaja. Tidak sesuai dengan Firefox dan Internet Explorer.

Jika anda ingin mencuba, sila copy & paste semua kod di atas ke dalam Notepad dan save fail dengan menggunakan extension .html (contoh nama fail: refleksi.html)

Kemudian buka browser Chrome atau Safari. Klik File-> Open File-> klik nama fail di atas.

Jika anda ingin mencuba dalam blog, sila copy & paste kod-kod berwarna maroon ke dalam Design->Edit HTML-> paste di bahagian atas </head> dan copy & paste kod berwarna biru pada bahagian posting (dalam mode "Edit Html", bukan dalam mode "Compose".

Sewaktu mencuba membina demo ini dalam blogger, saya menemui sedikit masaalah. Untuk membolehkan reflection ini "menjadi", kita perlu menambah beberapa baris kod CSS baru seperti di bawah ini di bahagian atas kod font-family:Verdana, Arial, Helvetica, sans-serif; (sila lihat kod CSS di atas):

margin-top: - 60px;
padding-bottom: 150px;
margin-right: 200px;
position: relative;
margin-bottom: 80px;

Teruskan membaca | CSS Image Reflection →

2010-10-21T08:32:00.000-07:00

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

BULATKAN GAMBAR DENGAN CARA "TRANSITION"

October 21, 2010
Posted by: Fauzie

Kandungan Tutorial

Apabila memperkatakan tentang webkit dan moz transition serta transform ini, terlalu banyak effect yang mudah untuk dibuat. Effect yang selalunya dibuat atau dibina sebelum ini dengan menggunakan JavaScript, sekarang boleh dibuat dengan hanya menggunakan kod CSS3.

Malangnya kebanyakan effect ini hanya boleh dilihat dengan sempurna dalam browser-browser moden seperti Safari, Firefox dan juga Chrome.

Satu lagi contoh yang menarik dengan penggunaan kod-kod webkit dan moz ini ialah "membulatkan" (rounded) gambar atau image. Jika anda hover mouse ke atas image dalam contoh "Live Demo" di bawah ini, anda akan dapati image akan bertukar dari empat segi (square)kepada bulat atau circle.

Effect ini terjadi dengan menggunakan kod "transition duration" seperti di bawah ini.

-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;

Di mana 1s bermaksud 1 saat jangka masa (duration) yang diambil bagi transisi ini (dari empat segi menjadi bulat). Transisi akan lebih lambat jika ditukar kepada 2s atau 3s.

"Live Demo": Sila hover mouse ke atas image

merdeka

Kod mark-up atau HTML serta kod CSS3 untuk contoh di atas adalah seperti berikut. Untuk mencubanya anda hanya perlu copy & paste kod-kod ini ke dalam Notepad dan save file dengan memberi nama fail mempunyai extension .html (contoh: imagebulat.html)

Nota: Fail yang disimpan dalam Notepad hanya boleh dibuka dalam browser apabila nama fail ditambah dengan .html

<html>
<head>
<style type="text/css">
.bulat {
padding: 10px;
display: inline-block;
overflow: auto;

}
.bulat .BOX1 {
width: 250px;
height: 250px;
margin: 10px;
background:url
('http://farm2.static.flickr.com/1275/1122307795_eca4fac0ca.jpg ')no-repeat;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

background-color: #f00;
border: 2px solid #900;

line-height: 200px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.bulat:hover .BOX1 {
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;

background-color: #fa0;
border: 5px solid #930;

font-size: 50px;
color:red;
text-shadow: 0px 0px 4px black;
}

</style>
</head>
<body>
<div class="bulat">
<div class="animable BOX1">Merdeka! </div>
</div>
</body>
</html>

Kembali kepada | Archives →

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

2010-10-21T01:27:00.001-07:00

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

MIRING GAMBAR DENGAN CSS3 TRANSFORM SKEW

October 21, 2010
Posted by: Fauzie

Kandungan Tutorial

Pada tutorial ini saya akan berbicara tentang "skew", salah satu "CSS3 transform properties" yang diperkenalkan oleh webkit (Safari) dan moz (Mozilla).

Fungsi "skew transform" ialah membuat sesuatu objek atau element menjadi miring (skew) ke kiri, kanan, atas atau ke bawah.

Kod mark-up dan CSSnya adalah mudah, dan kod utama yang membina "skewness" ini ialah seperti berikut:

-webkit-transform: skew (0deg, 0deg);
-moz-transform: skew (0deg, 0deg);

Perhatikan kod-kod berwarna merah dan biru di atas. Kod-kod ini mewakili apa yang dipanggil "SkewX" dan "SkewY"

"SkewX" berfungsi untuk menjadikan gambar, image, objek atau element miring ke kanan dan ke kiri secara "horizontally" apabila kod berwarna merah diberi nilai (value).

Nilai positif (contoh: 31deg) membuat image miring ke kiri, dan
Nilai negatif (contoh: -31deg) membuat image miring ke kanan

"Live Demo" gambar miring ke kiri

Merdeka, Merdeka

"SkewY" pula berfungsi untuk menjadikan gambar atau image miring ke atas dan ke bawah "diagonally".

Sila lihat kod CSS berwarna biru di atas. Berikan nilai atau value seperti berikut:

Nilai negatif (contoh: -31deg) membuat image miring ke atas, dan
Nilai positif (contoh: 31deg) membuat image miring ke bawah

"Live Demo" gambar skew atau miring ke atas (sebelah kanan)

Merdeka, Merdeka

Kod HTML dan CSS3 untuk membuat "skew transform" di atas adalah seperti berikut. Kod-kod ini hanya untuk membuat gambar miring ke kiri sahaja. Untuk mendapatkan miring ke kanan, anda hanya perlu tukarkan sahaja nilai positif kepada negatif.

<html>
<head>
<style type="text/css">
#skewimage {
padding:10px;
font-family: Verdana;
color:red;
font-size:15px;
text-align: center;
}
#skewimage2 {
background:url(http://rgumaa.files.wordpress.com/2007/07/merdeka_1957_tunku_abdul_rahman.jpg);
-webkit-transform:skew(31deg, 0deg);
-moz-transform:skew(31deg, 0deg);
margin-bottom:10px;
margin-top:10px;
width: 250px;
height:250px;
margin-left:20%;
-webkit-box-shadow: 7px 7px 10px #818181;
-moz-box-shadow: 7px 7px 10px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
</head>
<body>
<div id="skewimage">
<div id="skewimage2">
<h3>Merdeka, Merdeka</h3>
</div>
</div>
</body>
</html>

Gambar atau image boleh juga dimiringkan dengan cara meng"hover" mouse ke atas gambar tersebut dengan memperkenalkan kod "hover".

"Live Demo". Sila hover mouse ke atas gambar.

Merdeka, Merdeka

Kod HTML dan CSS3 untuk mendapatkan effect ini adalah seperti berikut:

<html>
<head>
<style type="text/css">
#skewgambar {
padding:50px;
font-family: Verdana;
color:red;
font-size:15px;
text-align: center;
}

#skewgambar2 {
background:url(http://rgumaa.files.wordpress.com/2007/07/merdeka_1957_tunku_abdul_rahman.jpg);
margin-bottom:10px;
margin-top:10px;
width: 250px;
height:250px;
margin-left:20%;
-webkit-box-shadow: 7px 7px 10px #818181;
-moz-box-shadow: 7px 7px 10px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
#skewgambar2:hover {
-webkit-transform:skew(0deg, 31deg);
-moz-transform:skew(0deg, 21deg);
}
</style>
</head>
<body>
<div id="skewgambar">
<div id="skewgambar2">
<h3>Merdeka, Merdeka</h3>
</div>
</div>
</body>
</html>

Nota: Kod CSS yang ditebalkan ialah kod baru yang telah ditambah untuk mendapatkan effect miring bila dihover

Contoh yang ditunjukkan ini hanya sesuai untuk browser Safari, Firefox dan Chrome

Kembali kepada | Archives →

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

2010-10-12T22:05:00.000-07:00

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

"FANCY BUTTON" DENGAN CSS3: CONTOH 3

October 12, 2010
Posted by: Fauzie

Kandungan Tutorial

Untuk contoh ketiga "fancy button" ini, saya akan tunjukkan bagaimana menambah "feature" baru ke atas butang atau button ini. Feature yang saya maksudkan ialah property animasi (animation)dengan menggunakan CSS3 "transition property" ke atas image yang akan digunakan sebagai "background image" untuk sebuah butang atau button.

"Live Demo" di bawah ini ialah contoh butang yang dimaksudkan. Sila "hover" mouse di atas butang dan anda akan dapati "background image" butang akan bergerak ke atas dan ke bawah. Seperti contoh-contoh lain dalam blog ini, butang yang dibina ini hanya sesuai dilihat dengan browser Safari, Chrome dan Firefox dan browser yang paling sesuai bila kita memperkatakan CSS3 ialah browser Safari.

"Live Demo": Empat "fancy animated button" yang mempunyai 4 saiz yang berbeza.

Butang Besar

Butang Sederhana

Butang Kecil

Contoh Butang Rounded

Sekarang jom kita lihat kod mark-up dan kod CSS untuk mendapatkan contoh butang-butang di atas.

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

.butanganimasi{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('http://cdn.tutorialzine.com/wp-content/uploads/2010/10/bubble_background.jpg');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}

.butanganimasi:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}

.butanganimasi:active{
bottom:-1px;
}

/*** bawah ini ialah saiz untuk 3 butang ***/

.butanganimasi.besar{
font-size:30px;
}
.butanganimasi.sederhana{
font-size:18px;
}
.butanganimasi.kecil{
font-size:13px;
}

/*** cara membulatkan bucu butang ***/

.butanganimasi.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}

.blue.butanganimasi{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY= '), url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY='),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);

background-image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY= '), url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY='),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.butanganimasi:hover{
background-color:#63c7fe;
background-image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY='), url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY='),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);

background-image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY= '), url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY='),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

</style>
</head>
<body>
<div id="butanganimasiContainer">

<a href="#" class="butanganimasi besar blue">Butang Besar</a>

<a href="#" class="butanganimasi blue sederhana">Butang Sederhana</a>

<a href="#" class="butanganimasi kecil blue">Butang Kecil</a>

<a href="#" class="butanganimasi kecil blue rounded">Contoh Butang Rounded</a>

</div>
</body>
</html>

Kembali kepada | Archives →

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

2010-10-11T20:47:00.001-07:00

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

"FANCY BUTTON" DENGAN CSS3: CONTOH 2

October 22, 2010
Posted by: Fauzie

Kandungan Tutorial

Contoh kedua "fancy button" ini menggunakan elemen-elemen dan properties yang sama seperti contoh pertama.

Apa yang membezakan ialah, dalam contoh kedua ini "icon" telah digunakan untuk mencantikkan lagi butang atau button tersebut.

Saya akan tunjukkan dua jenis butang dalam contoh ini--butang mempunyai icon dan butang biasa. Di bawah ini ialah "Live Demo" bagi butang-butang tersebut.

"Live Demo"

Butang Tanpa Icon

Butang Dengan Icon

Kod mark-up dan CSS seperti berikut akan memberi anda butang atau button tanpa "icon" atau dengan kata lain butang biasa (regular button).

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

a.buttonfancy {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 18px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;

padding: 5px 15px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 24px;
font-size: 20px;
font-weight: bold;
}

a.buttonfancy:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
text-decoration:none;
}

a.buttonfancy:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}

</style>
</head>
<body>
<p class="buttonfancy"><a class="buttonfancy" href="#"><span>Butang Tanpa Icon</span></a></p>
</body>
</html>

Kod berwarna maroon ialah kod html atau "mark-up code" dan kod berwarna biru pula adalah cod CSS.

Untuk membuat butang dengan icon, anda hanya perlu tambah kod CSS berikut di bahagian atas kod </style>:

a.buttonfancy.icon {
padding-left: 11px;
}

a.buttonfancy.icon span{
padding-left: 36px;
background: url('http://images1.artua.com/icons/download-mac.jpg ') no-repeat;
}

'http://images1.artua.com/icons/download-mac.jpg '; merupakan url icon yang digunakan.

Selepas menambah kod CSS baru, sila tukar kod mark-up atau kod html kepada kod seperti ini:

<p class="buttonfancy"><a class="buttonfancy icon" href="#"><span>Butang Dengan Icon</span></a></p>

Untuk mencubanya, cara yang paling mudah ialah copy & paste semua kod CSS dan HTML DI atas dari <html> hingga </html> ke dalam Notepad dan save fail dengan menggunakan extension .html (contoh: butangfancy.html)kemudian buka browser (Safari, Chrome atau Firefox, klik File-> klik Open File dan klik nama fail yang anda save.

Nota: Prosedur ini adalah cara yang paling mudah untuk anda melihat apa yang anda buat menjadi atau tidak dalam browser.

Kembali kepada | Archives →

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

2010-10-11T20:38:00.000-07:00

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

"FANCY BUTTON" DENGAN CSS3: CONTOH 1

October 11, 2010
Posted by: Fauzie

Kandungan Tutorial

Sebelum ini saya ada tunjukkan bagaimana membuat beberapa jenis butang atau button dengan CSS3 iaitu tanpa menggunakan image.

Untuk tutorial kali ini saya ingin tunjuk tiga lagi contoh butang atau button yang dibina menggunakan CSS3 dan juga "webkit transition properties." Sama seperti sebelum ini, contoh-contoh yang ditunjukkan ini hanya sesuai dengan browser moden: Safari, Chrome dan Firefox.

Contoh pertama ialah apa yang dipanggil "fancy button". Tiada apa-apa keistimewaan pada gelaran ini melainkan atas sebab-sebab berikut:

Ia dibina sepenuhnya dengan CSS3 (pure CSS3, iaitu tanpa image
"Scalable" dimana saiz butang bertukar mengikut saiz font
Warna butang boleh ditukar dengan hanya menukar kod warna pada tag "background- color
Compatible dengan IE7 dan IE8

Di bawah ini ialah contoh "Live Demo" untuk butang atau button ini. Sila perhatikan ia mempunyai elemen-elemen "gloss" (sinar), "drop shadow" dan "3D effects". Elemen "gloss" diperolehi dengan property "gradient" dan drop shadow dibuat dengan property "shadow".

"Live Demo"

Archives

Kod-kod mark-up (html) dan CSS adalah seperti berikut:

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

a.fancy_button, button.fancy_button {
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(rgba

(0,0,0,0.4)), to(rgba(77,77,77,0.4)));
background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(77,77,77,0.4));
float: left;
padding: 4px;
text-decoration: none;
outline: 0;
border-width: 1px;
border-style: solid;
width: auto;
overflow: visible;
border-color: transparent transparent #666 transparent;
border-color: transparent transparent rgba(202,202,202,0.27) transparent;
-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
-webkit-background-clip: padding-box;

}

a.fancy_button span, button.fancy_button span {
display: block;
float: left;
letter-spacing: -1px;
border-width: 1px;
border-style: solid;
border-color: #ccc #444 #111 #444;
border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.5) rgba(0,0,0,0.7) rgba

(0,0,0,0.5);
font: bold 21px/1em Arial;
color: white;
padding: 0.48em 2em;
cursor: pointer;
text-shadow: rgba(0,0,0,0.45) 0 -1px 0;
-webkit-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: rgba

(0,0,0,0.75) 0px 0px 3px; box-shadow: rgba(0,0,0,0.75) 0px 0px 3px;
-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
background: transparent -webkit-gradient(linear, left top, left bottom,

from(rgba(255,255,255,0.6)), color-stop(0.5, rgba(255,255,255,0.15)), color-

stop(0.5, rgba(255,255,255,0.01)), to(transparent));
background: transparent -moz-linear-gradient(top, rgba(255,255,255,0.6),

rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.01) 50%, transparent);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,

StartColorstr='#80FFFFFF', EndColorstr='#00FFFFFF');
-webkit-background-clip: padding-box;
}

a.fancy_button:hover span, button.fancy_button:hover span {
border-top-color: rgba(255,255,255,0.65);
background: -webkit-gradient(linear, left top, left bottom, from(rgba

(220,220,220,0.6)), color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5,

rgba(0,0,0,0.21)), to(rgba(0, 0, 0, 0.20)));
background: -moz-linear-gradient(top, rgba(220,220,220,0.6), rgba

(100,100,100,0.2) 50%, rgba(0,0,0,0.21) 50%, rgba(0, 0, 0, 0.20));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,

StartColorStr='#99dcdcdc', EndColorStr='#33000000');
-webkit-background-clip: padding-box;

}

a.fancy_button:active span, button.fancy_button:active span {
border-top-color: rgba(255,255,255,0.2);
border-left-color: rgba(0,0,0,0.4);
background: -webkit-gradient(linear, left top, left bottom, from(rgba

(150,150,150,0.6)), color-stop(0.5, rgba(60,60,60,0.6)), color-stop(0.5,

rgba(40,40,40,0.6)), to(rgba(20, 20, 20, 0.5)));
background: -moz-linear-gradient(top, rgba(150,150,150,0.6), rgba

(60,60,60,0.6) 50%, rgba(40,40,40,0.6) 50%, rgba(20, 20, 20, 0.5));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,

StartColorStr='#80969696', EndColorStr='#59000000');
-webkit-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px

0px 3px; -moz-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75)

0px 0px 3px; box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75)

0px 0px 3px;
-webkit-background-clip: padding-box;

}

a.fancy_button span:active, button.fancy_button span:active {
border-top-color: rgba(255,255,255,0.2);
border-left-color: rgba(0,0,0,0.4);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,

StartColorStr='#80969696', EndColorStr='#59000000');
-webkit-background-clip: padding-box;
}
</style/
</head>
<body>

<a class="fancy_button" href="http://www.blogger.com/post-edit.g?

blogID=6477671071252691471&postID=3680206319345194756#"><span

style="background-color:#070;">Archives</span></a>
</body>
</html>

Anda boleh mencubanya dengan copy & paste kod-kod di atas kedalam Notepad.

Kembali kepada | Archives →

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

2010-10-04T19:36:00.000-07:00

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

BINA TYPOGRAPHY INDAH DENGAN CSS3

October 5, 2010
Posted by: Fauzie

Tutorial ini berdasarkan artikel oleh Matt Ward dari echo enduringblog. Tujuan utama demonstrasi ini ialah untuk menilai sejauh mana keberkesanannya dapat dibuat melalui platform Blogger dan juga ingin berkongsi sama di dalam mempelajari penggunaan CSS3 bagi memperbagaikan gaya atau "styling effect" bagi typography atau penggunaan huruf dalam website design.

Seperti yang anda lihat dalam "live demo" di bawah ini, ia dapat diterima dengan baik oleh platform Blogger dan keputusannya sangat menarik.

Setengah pendapat mengatakan website menggandungi 95% typography dan jika pendapat ini benar, ini bermakna typography memainkan peranan atau elemen yang sangat penting dalam persembahan sesuatu website itu, dan ia sebenarnya dapat diterjemahkan dengan cara mudah melalui penggunaan Cascading Style Sheet atau CSS.

Dalam tutorial berikut ini, mari kita lihat bagaimana kod-kod CSS3 berupaya membina "typographic design" yang cantik dan menarik.

Di bawah ini ialah "Live Demo" artikel yang telah diberi gaya atau style dengan menggunakan CSS3:

"Live Demo"

Typography WebDemonstrasi Keindahan Typography Menggunakan CSS

Demonstrasi Dibina Berdasarkan contoh oleh Matt Ward

Apa yang sering diperkatakan tentang kehebatan sesuatu website itu ialah ia dibina berasaskan kepada kecantikan dan penggunaan typographynya. Dan ini bermakna, ia merupakan satu elemen yang sangat penting dan harus diambil berat dalam membina sesuatu website.

Penggunaan CSS telah memberi kita berbagai pilihan untuk membuat "styling" atau gaya yang lebih mudah didalam menyediakan "content" sesuatu website itu. Demo ini - yang mana dijana sepenuhnya dengan CSS - dibina untuk menunjukkan cara membina atau menyediakan typography yang indah dari asas HTMLnya hingga kepada kod CSS iaitu daripada "unstyled" typo kepada design sepenuhnya. Untuk demo ini sedikit perubahan telah dibuat bagi kesesuaian template blog ini.

Ditulis: 5 Oktober , 2010

Kod Mark-Up

Sebagai permulaan jom kita sediakan "content" dengan menggunakan mark-up asas html seperti berikut:

<div class="tajuk">Typography Web<span>Demonstrasi Keindahan Typography Menggunakan CSS</span></div>
<div class="meta">Demonstrasi <span> Dibina Berdasarkan contoh</span> oleh <span>Matt Ward</span></div>
<div class="isi"><p><span >Apa yang sering diperkatakan tentang kehebatan sesuatu</span> website itu ialah ia dibina berasaskan kepada kecantikan dan penggunaan typographynya. Dan ini bermakna, ia merupakan satu elemen yang sangat penting dan harus diambil berat dalam membina sesuatu website.</p>
<p><span style="color:black; font-weight:normal;">Penggunaan CSS telah memberi kita berbagai pilihan</span> untuk membuat "styling" atau gaya yang lebih mudah didalam menyediakan "content" sesuatu website itu. Demo ini - yang mana dijana sepenuhnya dengan CSS - dibina untuk menunjukkan cara membina atau menyediakan typography yang indah dari asas HTMLnya hingga kepada kod CSS iaitu daripada "unstyled" typo kepada design sepenuhnya. Untuk demo ini sedikit perubahan telah dibuat bagi kesesuaian template blog ini.</p><div class="date">Ditulis: 5 Oktober , 2010</div>

Struktur "content" di atas ialah, heading atau subheading dibezakan dengan tag <span> dan ikuti dengan maklumat pengarang, isi dan tarikh artikel ditulis.

Jika dilihat "content" yang tidak digayakan atau "unstyled", ia akan kelihatan seperti di bawah ini. Tetapi bila digayakan dengan CSS3, ia akan kelihatan lebih menarik.

Langkah 1

Perkara pertama yang harus diberi perhatian ialah Tajuk. Kita akan menukar warnanya, "typeface", saiz dan "traking". Di bawah ini ialah kod CSS (full style rule) untuk mendapatkan contoh seperti screenshot berikut:

.tajuk {
font-size: 3.0em;
font-weight: bold;
font-family: Georgia;
letter-spacing: 0.1em;
color: rgb(142,11,0);
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

Langkah 2

Untuk langkah ke 2, kita akan memberi gaya tambahan supaya "Tajuk" nampak lebih sempurna dan menarik. Ini ialah kod CSS tambahannya dan dengan kod ini, tajuk akan kelihatan seperti screenshot di bawahnya:

.tajuk span {
display: block;
margin-top: 0.5em;
padding-bottom:1.5em;
font-family: Verdana;
font-size: 0.6em;
font-weight: normal;
letter-spacing: 0em;
text-shadow: none;
}

Langkah 3

Bagi langkah ke 3 dan langkah ke 4 ini, styling atau gaya akan melibatkan apa yang di panggil "meta data line" dimana kita akan membuat perbezaan yang ketara pada ayat baris ketiga daripada ayat-ayat baris satu dan dua (iaitu tajuk dan sub-tajuk). Di bawah ini adalah kod CSSnya:

.meta {
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.85em;
font-style: italic;
letter-spacing: 0.25em;
border-bottom: 1px solid rgba(69,54,37,0.2);
padding-bottom: 0.5em;
}

Dalam kod CSS di atas, "font-style" telah diperkenalkan iaitu jenis "italic". Dan jika anda lihat screenshot pula, ayat pada baris ketiga bertukar kepada bentuk italic (mereng). Font family "Georgia" masih digunakan di sini untuk menyeragamkan dengan font "Tajuk" (font untuk sub-tajuk ialah jenis Verdana).

Perhatikan pula kod warna. "Color definition" rgba () telah digunakan dan bukan rgb () (warna asas "Red", "Green", "Blue"). Penggunaan rgba () ini adalah salah satu keistemewaan bagi CSS3 kerana ia merujuk kepada penambahan dimensi keempat (4th dimension) iaitu apa yang dikenali sebagai "alpha channel" yang membolehkan kita mengawal "opacity".

Nota: Bagi rgba (), property keempat (iaitu nombor di antara "0" hingga "1") merujuk kepada "level of transparency" (terang atau gelap) yang digunakan ke atas sesuatu warna. Malangnya property ini tidak boleh diterima (tidak kelihatan) dalam browser IE (Internet Explorer).

Langkah 4

Dalam langkah keempat ini pula, kita akan membuat sedikit perubahan ke atas "meta data line" ini (iaitu ayat baris ketiga). Jika anda perhatikan ayat baris ketiga dalam contoh "Live Demo", perkataan-perkataan "Demonstrasi" dan "Oleh" dalam bentuk "italic" dan tidak bagi perkataan "Dibina Berdasarkan Contoh" serta nama pengarang.

Ini juga merupakan satu lagi contoh keistimewaan CSS3. Perkataan-perkataan yang tidak berbentuk italic itu sebenarnya telah "dikepong" atau "dikelilingi" oleh tag <span>. Dan ditambah pula dengan "color definition" rgba (), semua perkataan berbentuk italic akan kelihatan lebih "cerah" ("low level of transparency").

Kod CSS untuk mendapatkan effect di atas adalah seperti berikut:

.meta span {
text-transform: capitalize;
font-style: normal;
color: rgba(69,54,37,0.8);
}

Langkah 5

Untuk langkah kelima ini, isi atau content akan diasingkan dalam bentuk dua column. Sebelum penemuan CSS3, proses membuat isi atau content dalam bentuk column adalah sangat rumit. Isi akan dibahagikan kepada beberapa blok. Perkembangan CSS telah memudahkan kita membuat artikel dalam bentuk column dengan hanya menaip beberapa baris kod sahaja iaitu "column-count"

Jika anda perhatikan screenshot di bawah ini, isi telah dibahagi kepada dua column (sebelum ini isi atau content mempunyai 2 perenggan). Effect ini dibina dengan menambah kod CSS berikut:

.isi p {
font-family: Verdana;
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.5em;
color: rgb(69,54,37);
font-weight: normal;
}

Nota: Perhatikan kod -moz-column-count:2, -webkit-column-count:2 dan column-count: 2. -moz- merujuk kepada kesesuaian untuk browser Firefox dan -webkit- merujuk kepada browser Safari dan angka 2 merujuk kepada 2 column.

Langkah 6

Pada langkah kelima kita telah membina 2 column untuk isi atau content. Jika anda perhatikan screenshot, artikel contoh ini mempunyai 2 perenggan pada perinkat awalnya. Sekarang mari kita jadikan perenggan pertama sebagai perenggan biasa dan perenggan kedua tetap dalam bentuk 2 column (lihat screenshot di bawah).

Untuk mendapatkan effect tersebut kita gunakan "first-child pseudo class properties", dan berikan "column-count" sebagai "1" (untuk mendapatkan bentuk 1 column).

Kita juga boleh "bold"kan dan besarkan font bagi semua huruf dalam baris pertama untuk perenggan ini dengan memperkenalkan kod "first-line pseudo-class".

Kod CSS untuk effect ini adalah seperti berikut:

.isi p:first-child {
font-size: 1.25em;
font-family: Georgia;
font-style: italic;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
letter-spacing: 0.1em;
font-weight: normal;
}

.isi p:first-child:first-line {
font-weight: bold;
}

Langkah 7

Proses "typographic styling" untuk artikel contoh ini hampir selesai. Sekarang kita hanya tinggal satu lagi perkara yang harus diberi gaya, iaitu "Tarikh".

Kod CSS untuk mendapatkan effect "tarikh" seperti dalam screenshot di bawah ini ialah seperti berikut:

.date {
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.75em;
font-style: italic;
letter-spacing: 0.25em;
border-top: 1px solid rgba(69,54,37,0.2);
display: block;
padding-top: 0.5em;
margin-top: 2em;
}

Kod penuh Mark-up dan CSS bagi tutorial ini adalah seperti berikut. Anda boleh mencubanya dengan copy & paste kod-kod ini dalam Notepad dan save dengan nama fail mestilah mempunyai extension .html

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

.tajuk {
font-size: 3.0em;
font-weight: bold;
font-family: Georgia;
letter-spacing: 0.1em;
color: rgb(142,11,0);
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

.tajuk span {
display: block;
margin-top: 0.5em;
padding-bottom:1.5em;
font-family: Verdana;
font-size: 0.6em;
font-weight: normal;
letter-spacing: 0em;
text-shadow: none;
}

.meta {
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.85em;
font-style: italic;
letter-spacing: 0.25em;
border-bottom: 1px solid rgba(69,54,37,0.2);
padding-bottom: 0.5em;
}

.meta span {
text-transform: capitalize;
font-style: normal;
color: rgba(69,54,37,0.8);
}

.isi p {
font-family: Verdana;
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.5em;
color: rgb(69,54,37);
font-weight: normal;
}

.isi p:first-child {
font-size: 1.25em;
font-family: Georgia;
font-style: italic;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
letter-spacing: 0.1em;
font-weight: normal;
}

.isi p:first-child:first-line {
font-weight: bold;
}

.date {
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.75em;
font-style: italic;
letter-spacing: 0.25em;
border-top: 1px solid rgba(69,54,37,0.2);
display: block;
padding-top: 0.5em;
margin-top: 2em;
}

</style>
</head>
<body>

<div class="tajuk">Typography Web<span>Demonstrasi Keindahan Typography Menggunakan CSS</span></div>
<div class="meta">Demonstrasi <span> Dibina Berdasarkan contoh</span> oleh <span>Matt Ward</span></div>
<div class="isi"><p>Apa yang sering diperkatakan tentang kehebatan sesuatu website itu ialah ia dibina berasaskan kepada kecantikan dan penggunaan typographynya. Dan ini bermakna, ia merupakan satu elemen yang sangat penting dan harus diambil berat dalam membina sesuatu website.</p>
<p>Penggunaan CSS telah memberi kita berbagai pilihan untuk membuat "styling" atau gaya yang lebih mudah didalam menyediakan "content" sesuatu website itu. Demo ini - yang mana dijana sepenuhnya dengan CSS - dibina untuk menunjukkan cara membina atau menyediakan typography yang indah dari asas HTMLnya hingga kepada kod CSS iaitu daripada "unstyled" typo kepada design sepenuhnya. Untuk demo ini sedikit perubahan telah dibuat bagi kesesuaian template blog ini.</p>
<div class="date">Ditulis: 5 Oktober , 2010</div>
</div>
</body>
</html>

Kembali ke Archives

Kembali kepada | Archives →

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

2010-09-05T03:21:00.000-07:00

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

GALERI PHOTO: LIFESTREAM

September 5, 2010
Posted by: Fauzie

Nota: Sila hover cursor ke atas photo untuk mendapatkan image yang lebih besar

Portraits
Landscapes
Flowers
Trees
Birds

2010-08-31T00:40:00.000-07:00

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

TRANSITION CSS3: CONTOH 2

August 25, 2010
Posted by: Fauzie

TUTORIAL

Dalam contoh pertama kita telah lihat bagaimana Transition CSS berupaya membuat animasi "box effect" iaitu menukar sebuah kotak menjadi bulat atau circular apabila cursor di hover di atas kotak.

Dalam contoh ke dua ini jom kita lihat bagaimana transition CSS memberi effect ke atas sesuatu huruf apabila huruf berkenaan dihover.

Sila hover cursor ke atas huruf dalam "Live Demo" di bawah ini:
Nota:Hanya sesuai untuk browser Safari, Chrome and Opera

jomblog.com

Di bawah ini ialah kod CSS dan kod markup (html)

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

.Huruf {
text-align: center;
padding: 10px;
margin: 10px;
background: transparent;
}

.Huruf .letters {
text-decoration: none;
font-weight: bold;
line-height: 100px;
}

.Huruf .letters span {
-moz-transition-duration: 1.5s;
-webkit-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
font-size: 50px;
}
.Huruf .letters span:hover {
font-size: 100px;
}

.Huruf .letters span.green {
color: #547659;
text-shadow: 1px 1px 2px #8FC1A5;
}
.Huruf .letters span.green:hover {
color: #315637;
text-shadow: 5px 5px 5px #99ADA2;
}

.Huruf .letters span.red {
color: #874031;
text-shadow: 1px 1px 2px #C1998F;
}
.Huruf .letters span.red:hover {
color: #723B2F;
text-shadow: 5px 5px 5px #B4A09B;
}

.Huruf .letters span.blue {
color: #314A87;
text-shadow: 1px 1px 2px #8F9AC1;
}
.Huruf.letters span.blue:hover {
color: #2F3F72;
text-shadow: 5px 5px 5px #9B9FB4;
}
</style>
</head>
<body>

<div class="Huruf">
<a href="#" class="letters">
<span class="green">j</span>
<span class="green">o</span>
<span class="green">m</span>
<span class="red">b</span>
<span class="red">l</span>
<span class="red">o</span>
<span class="red">g</span>
<span class="blue">.</span>
<span class="blue">c</span>
<span class="blue">o</span>
<span class="blue">m</span>
</a>
</div>
</body>
</html>

Kembali kepada | Archives →

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

2010-08-24T15:56:00.000-07:00

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

TRANSITION CSS3: CONTOH 1

August 25, 2010
Posted by: Fauzie

TUTORIAL

Untuk membuat satu animasi yang mudah anda tidak perlu lagi menggunakan Javascript. Cara yang paling mudah ialah dengan menggunakan apa yang dipanggil CSS3-transition dan juga setInterval.

Kelebihan menggunakan CSS3-transition dan setInterval ialah:

1. Mudah dan effective—kita hanya memerlukan beberapa baris kod sahaja.
2. Browser dapat memberi effect animasi. Tidak seperti Javascript yang memerlukan kod-kod yang kompeks sebelum animasi terjadi
3. Ia nampak lebih “bersih” kerana kita tidak perlu membuat modifikasi “style attribute” dan sudah tentu ia lebih efficient.
4. Ianya “standard” dalam penyediaan kod.

Transition duration atau jangkawaktu transition.

Pada asasnya anda hanya perlu set “time properties” dalam css selector seperti –moz-transition-duration: 1s, untuk browser Mozilla. “Time properties” ini menentukan lamanya sesuatu animasi itu dan browser yang akan menentukan “transition”nya.

Untuk bowser-browser Firefox, Chrome, Safari dan Opera anda hanya perlukan kod-kod ini:

-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;

Nota: 1s ialah 1 saat

Contoh kod transition

.Kotak {
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;

margin: 10px;
background-color : red;
}
.Kotak:hover {
margin: 50px;
background-color : green;
}

Pengertian Kod Di atas

Jika anda letak cursor ke atas .Kotak selama 1 saat, margin akan bergerak dari 10px kepada 50px dan warna latar belakang (background-color) akan bertukar dari warna merah kepada warna hijau.

Transition-Property

Kita juga boleh memberi nama CSS property kepada transition yang kita guna, seperti color (warna), width (lebar), margin dan lain-lain seperti di bawah ini:

-moz-transition-property: margin, background-color;
-webkit-transition-property:margin, background-color;
-o-transition-property:margin, background-color;

Di bawah ini ialah "Live Demo" CSS transition untuk box effect atau effek kotak

Sila hover curso ke atas kotak.

Hello

Dan di bawah ini adalah kod-kod CSS dan markup(html)

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

.Kotak {
padding: 10px;
display: inline-block;
overflow: auto;
}
.Kotak .animasibox1 {
width: 200px;
height: 200px;
margin: 10px;

-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

background-color: #f00;
border: 2px solid #900;

line-height: 200px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.Kotak:hover .animasibox1 {
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;

background-color: #fa0;
border: 5px solid #930;

font-size: 60px;
text-shadow: 0px 0px 4px black;
}
</style>
</head>
<body>
<div class="Kotak">
<div class="animasibox1">Hello</div>
</div>
</body>
</html>

Kembali kepada | Archives →

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

2010-08-24T02:02:00.000-07:00

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

MENU ACCORDION CONTOH 3

September 15, 2010
Posted by: Fauzie

Tutorial

Ini ialah contoh ketiga dalam siri tutorial bina accordion dengan CSS3 Transition. Seperti dalam dua contoh sebelum ini, menu ini juga menggunakan kaedah "hover" untuk "buka" dan "tutup" panel accordion.

Isi atau content di"sorok" dengan menggunakan "CSS property" overflow: hidden dengan menetapkan tinggi menu bersamaan dengan tinggi tajuk atau title.

Dalam contoh ini, empat bucu telah dibulatkan untuk memberi penampilan yang lebih menarik. Dan effect ini dapat dibuat dengan "CSS property" border-radius. Isi menu atau content dibuka (slide) dengan memperkenalkan CSS Transition "ease-in-out" yang mana berfungsi sebagai "transition timing". Kelambatan atau "delay effect" dalam contoh ini ialah 500ms.

Saya telah membuat sedikit penambahan dengan memberi effect warna cara "gradient" iaitu web-kit gradient dengan property warna rgba ke atas panel accordion.

Nota: Accordion ini paling sesuai untuk browser Safari dan Firefox.

"Live Demo"

Products

Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.

Highlight

News

Contact

Kod Mark-up dan CSS bagi contoh ini adalah seperti berikut:

<html>
<head>
<style>

#container2 {
width: 600px;
margin: 20px auto;
}
#accordionmenu {
margin-top: 20px;
}
#accordionmenu .item {
width: 400px;
height: 30px; /* height = total height of A child element */
overflow: hidden;

transition: height ease-in-out 500ms; /* css3 transition */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;

border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

margin-bottom: 2px;
}
#accordionmenu a {
display: block;
height: 20px;
line-height: 20px;

background: #e6e6e6;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
}
#accordionmenu p {
height: 150px;
padding: 5px;
}
#accordionmenu div:hover {
height: 180px; /* height = total height of A and P elements */
}
#accordionmenu div:hover a {
border-bottom: 1px solid #ccc;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container2">

<div id="accordionmenu">
<div class="item">
<a href="#">Products</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
<div class="item">
<a href="#">Highlight</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
<div class="item">
<a href="#">News</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
<div class="item">
<a href="#">Contact</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
</div>
</div>
</body>
</html>

Kembali kepada | Archives →

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

2010-08-21T09:38:00.001-07:00

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

CSS TRANSITION: ANIMASI CONTOH KE 3

July 5, 2010
Posted by: Fauzie

TUTORIAL

Contoh berikut merupakan kombinasi contoh-contoh animasi polaroid sebelum ini dan aplikasinya telah diperluaskan bagi memberi effect animasi yang tidak kurang hebatnya.

Bagi contoh ke tiga ini kita membuat kepinggan "polaroid" seolah-olah bertaburan dan saiznya pula berbeza di antara satu dengan lain.

Jika anda ingin memcubanya, sila copy paste kod-kod CSS dan htmlnya dan upload gambar-gambar favorite anda.

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

.amp {
font-family:Garamond,Baskerville,Georgia,serif !important;
font-style:italic;
font-weight:normal;
border: none;
}
a.polaroid {
font-family:"Lucida handwriting", "Snell Roundhand", "Helvetica Neue",Arial,Helvetica,sans-serif;
font-size: 18px;
display: block;
text-decoration: none;
color: #333;
padding: 10px 10px 20px 10px;
width: 150px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.7em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.polaroid img {
margin: 0 0 15px;
width: 150px;
height: 150px;
}

a img {
border: none;
display: block;
}

.photo-album {
position: relative;
width: 80%;
margin: 0 auto;
margin-left:50px;
max-width: 70em;
height: 450px;
margin-top: 5em;
min-width: 400px;
max-width: 470px;
}
.photo-album .polaroid {
position: absolute;
}
.photo-album h2 {
osition: absolute;
z-index: 5;
top: 150px;
text-align: center;
width: 100%;
line-height: 1.9;
}

.photo-album h2 span {
background-color: white;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
padding: 0.4em 0.8em 0.3em 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
border: 1px solid #6A6A6A;
}
.photo-album .small {
width: 75px;
padding: 6px 6px 12px 6px;
font-size: 0.6em;
}
.photo-album .small img {
width: 75px;
height: 75px;
}
.photo-album .medium {
width: 200px;
padding: 13px 13px 26px 13px;
font-size: 0.8em;
}
.photo-album .medium img {
width: 200px;
height: 200px;
}
.photo-album .large {
width: 300px;
padding: 20px 20px 30px 20px;
font-size: 1em;
}
.photo-album .large img {
width: 300px;
height: 300px;
}

.photo-album .img1 {
bottom: 10px;
right: 365px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}

.photo-album .img2 {
top: 50px;
right: 20px;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.photo-album .img3 {
left: 400px;
top: 0;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}

.photo-album .img4 {
top: 10px;
left: 495px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}

.photo-album .img5 {
bottom: 0;
right: 0;
-webkit-transform: rotate(1deg);-moz-transform: rotate(1deg);
transform: rotate(1deg);
}
.photo-album .img6 {
bottom: 10px;
right: 156px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
.photo-album .img7 {
bottom:0;
left:350px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.photo-album .img8 {
bottom: -20px;
left: 400px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img9 {
bottom: 0;
left: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img10 {
top: 0;
left: 20px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
.photo-album .img11 {
top: 0;
right: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img12 {
top: 0;
left: 470px;
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
transform: rotate(18deg);
}
.photo-album .img13 {
bottom: -20px;
right: 430px;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.photo-album .img14 {
top: 90px;
left: 430px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
.photo-album .img15 {
left:176px;
top:20px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}

a:hover,
a:focus {
z-index: 5;
}
</style>
</head>
<body>
<div class="photo-album">
<h2><span>Come<abbr title="and" class="amp">&</abbr> Experience True Holiday</span></h2>
<a href="#" class="polaroid img2">
<img src="#" width="150" height="150" alt="">ayat di sini</a>
<a href="#" class="small polaroid img3"><img src="#" alt="">ayat di sini</a>
<a href="#" class="polaroid img5"><img src="#" width="150" height="150" alt="">ayat di sini</a>
<a href="#" class="polaroid img6"><img src="#" alt="">ayat di sini</a>
<a href="#" class="polaroid img7"><img src="#" width="150" height="200" alt="">ayat di sini</a>
<a href="#" class="small polaroid img8"><img src="#" alt="">ayat di sini </a>
<a href="#" class="medium polaroid img9"><img src="#" width="200" height="200" alt="">ayat di sini</a>
<a href="#" class="polaroid img10"><img src="#" width="150" height="150" alt="">ayat di sini</a>
<a href="#" class="small polaroid img11"><img src="#" alt="">ayat di sini</a>
<a href="#" class="small polaroid img12"><img src="#" alt="">ayat di sini</a>
<a href="#" class="small polaroid img13"><img src="#" width="75" height="75" alt="">ayat di sini</a>
<a href="#" class="small polaroid img14"><img src="#" alt="">ayat di sini</a>
<a href="#" class="polaroid img15"><img src="#" width="150" height="150" alt="">ayat di sini</a>
</div>
</body>
</html>

Nota:Sila ganti "#" yang terdapat dalam markup <img src="#" alt="">ayat di sini</a> kod dengan url image yang hendak dimasukkan.

"Live Demo"
Sila hover mouse ke atas image

Credit: 24ways.org

Come& Experience True Holiday

This lovely waterfall was at Tawau, Sabah Tea Plantation Big bird of Geruda over Langkawi Island An amazing peak of Mount Kinabalu, Sabah Eye on KL facing the Petronas Twin Tower
Orang Utan Putrajaya Mosque by the lake
Langkawi Island Beach Fishing village
Langkawi Cuti-cuti Enjoying the beach at night, Pulau Perhentian

Kembali kepada | Archives →

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

2010-08-08T07:51:00.001-07:00

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

BUAT MENU ACCORDION DENGAN CSS3: BAHAGIAN 2

September 8, 2010
Posted by: Fauzie

Tutorial

Sebelum ini saya telah pun membincangkan bagaimana membina "horizontal accordion" dengan hanya menggunakan "pure CSS3", iaitu tanpa menggunakan javaScript.

Sekarang mari kita cuba pula membina satu lagi accordion yang sama tetapi kali ini dalam bentuk "vertical" (menegak). Contoh kedua ini menggunakan kod mark-up dan CSS yang sama. Apa yang membezakan ialah nama "class" ditukar dan tanpa membuat sebarang "rotation" (dalam horizontal accordion, panel telah dipusing atau "rotate" bagi membolehkan ia berkeadaan menegak).

Di bawah ini ialah "live demo" vertical accordion yang menggunakan kaedah sama iaitu "hover". Sila hover curso di bahagian panel tajuk.

"Live Demo" Accordion Menu menggunakan CSS3
Notis:Hanya sesuai dilihat melalui browser Safari, Chrome atau Firefox sahaja

Chicago
Content For Panel 1
Flowers
Content For Panel 2
my shoes
Content For Panel 3.
snowing in country side
Content For Panel 4
HEADING 5
Isi atau Content untuk Panel 5
Sila taip isi untuk penal 5 di sini. Isi atau content boleh dalam bentuk image atau tulisan. Dalam demo ini saya telah menggunakan image dan juga tulisan bagi menunjukkan bagaimana kedua-dua kaedah ini boleh digunakan.

Kod-kod CSS dan markup untuk contoh accordion di atas adalah seperti berikut:

<html>
<head>
<style type="text/css">
.verticalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
width: 500px;
}

.verticalaccordion>ul>li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:40px;
width: 500px;

/* Decorative CSS */
background-color:#f0f0f0;

/* CSS3 Transition Effect */
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}

.verticalaccordion>ul>li>h3 {
display:block;
margin: 0;
padding:10px;
height:19px;

/* Decorative CSS */
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background: #cccccc;

/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */
}

.verticalaccordion>ul>li>div {
margin:0;
overflow: auto;
padding:10px;
height:220px;
}

.verticalaccordion>ul>li:hover {
height: 280px;
}

.verticalaccordion:hover>ul>li:hover>h3 {
/* Decorative CSS */
color:#fff;
background: #000000;

/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
}

.verticalaccordion>ul>li>h3:hover {
cursor:pointer;
}

.box-iconH {
width: 480px;
height: 220px;
float: left;
margin-right: 10px;
margin-bottom:0px;
}

</style>
</head>
<body>
<div class="verticalaccordion">
<ul>
<li>
<h3>Chicago</h3>
<div class="box-iconH">
<img src="http://l.yimg.com/g/images/home_photo_pmorgan.jpg" width="480" height="210"/>
</div>
<div>Taip maklumat panel 1 di sini</div>
</li>
<li>
<h3>Flowers</h3>
<div class="box-iconH">
<img src="http://l.yimg.com/g/images/home_photo_codepoet.jpg"width="480" height="210"/>
</div>
<div>Taip maklumat panel 2 di sini</div>
</li>
<li>
<h3>my shoes</h3>
<div class="box-iconH">
<img src="http://l.yimg.com/g/images/home_photo_orangeacid.jpg "width="480" height="210"/>
</div>
<div>Taip maklumat panel 3 di sini</div>
</li>
<li>
<h3>snowing in country side</h3>
<div class="box-iconH">
<img src=" http://l.yimg.com/g/images/home_photo_ccgd.jpg "width="480" height="210"/>
</div>
<div>Taip maklumat panel 4 di sini</div>
</li>
</ul>
</div>
</body>
</html>

Untuk contoh di atas, saya telah menggunakan image dengan kod ini <div class="box-iconH"> dan kod untuk url image <img src=" http://l.yimg.com/g/images/home_photo_ccgd.jpg "width="480" height="210"/>

Anda boleh membuang kod-kod untuk image ini:
<div class="box-iconH"> dan kod untuk url image ini <img src=" http://l.yimg.com/g/images/home_photo_ccgd.jpg "width="480" height="210"/>
jika anda hanya ingin memasukkan maklumat sahaja. Maklumat bolehlah ditaip dalam ruang <div>Taip maklumat panel 1 di sini</div>

About Minimal

Some description about you

Nulla ornare, nulla et egestas hendrerit, ipsum dui vulputate dolor, et ornare orci erat eleifend pede. Fusce eros libero, vestibulum non, elementum eu, suscipit eget, leo.

Our Mission

Our goal is to be the best

Cras neque purus, mollis non, adipiscing ac, pretium eget, turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Meet The Team

About who we are

Donec a urna a enim gravida dictum. Nunc elementum, mauris sit amet imperdiet iaculis, dolor metus consectetuer mi, et tempor elit enim at massa. Duis ac nisl. Nullam pulvinar.

Kembali kepada | Archives →

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

2010-08-08T07:40:00.001-07:00

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

MENU ACCORDION BAHAGIAN 1

September 5, 2010
Posted by: Fauzie

Tutorial

Cara yang paling terbaik untuk membuat "accordion menu" ialah dengan CSS3. Malangnya, menu yang dibina dengan CSS3 tidak boleh diterima oleh IE. Kebanyakan menu yang berasaskan CSS3 ini pula menggunakan "target" pseudo-class di mana anda perlu klik untuk membuka menu tersebut. Masaalah dengan cara mengklik ini pula ialah ia akan "melompat" ke atas setiap kali diklik.

Untuk mengatasi masaalah ini, accordion menu haruslah "berfungsi" dengan hanya meng"hover" mouse ke panel menu tersebut dan menu ini pula hendaklah boleh diterima oleh semua browser moden. Di samping itu ia juga mempunyai "feature" tambahan seperti "transition effect" (gradient) dan warna panel boleh bertukar apabila ianya dihover.

Untuk tutorial ini, jom kita bina accordion menu dengan menggunakan CSS3 dan panel boleh dibuka dengan hanya meng"hover" mouse.

Di bawah ini ialah "Live Demo" bagi contoh pertama accordion menu menggunakan CSS3. Ini ialah contoh bagi "horizontal accordion".

Paparan terbaik untuk menu accordion ini ialah browser Safari di mana panel dibuka dan ditutup dengan begitu lancar dan licin (smooth)berbanding bila dilihat dalam browser Firefox.

"Live Demo: Horizontal Accordion"

Auto innovators
Diversified automotive company JM Family Enterprises encompasses a number of different businesses: Southeast Toyota Distributors, the world’s largest independent Toyota and Scion distributor, JM&A Group, a group of industry-leading finance and insurance products companies, JM Lexus, the world’s largest volume Lexus dealership, and World Omni Financial Corp, a diversified financial services provider. It’s an $8 billion business—and iPhone is helping navigate the road ahead.
Architecture in motion
iPhone enables RTKL’s architects, designers, engineers, and other staff to share detailed visuals and build on each other’s ideas, even when team members are literally oceans apart.

With iPhone, says McKay, “we’re not just faxing or sending PDFs. We’re actually collaborating across the devices — across cultures, across geographies, across time zones — with great ease and facility. For contacts, calendars, and e-mail, it’s all there. By combining these things into a single handheld device, iPhone has made many people happy.”
Heading 3
Isi Untuk Panel 3.
Heading 4
Isi Untuk Panel 4
Heading 5
Isi Untuk Panel 5

Kod-kod Mark-Up dan CSS adalah seperti di bawah ini:

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

.horizontalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
height: 300px;
}

.horizontalaccordion>ul>li {
display:block;
overflow: hidden;
float:left;
margin: 0;
padding: 0;
list-style:none;
width:40px;
height: 300px;

/* Decorative CSS */
background:#f0f0f0;

/* CSS3 Transitions */
transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul>li>h3 {
display:block;
float:left;
margin: 0;
padding:10px;
height:19px;
width:280px;

/* Decorative CSS */
border-left:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background:#cccccc;

/* CSS3 Transform Rotate & Translate */
white-space:nowrap;
-moz-transform: rotate(90.0deg) translate(-40px,0px); /* FF3.5+ */
-moz-transform-origin: 0 100%;
-o-transform: rotate(90.0deg) translate(-40px,0px); /* Opera 10.5 */
-o-transform-origin: 0 100%;
-webkit-transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
-webkit-transform-origin: 0 100%;
transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
transform-origin: 0 100%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */

/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}

.horizontalaccordion>ul>li>div {
display:none;
float:left;
overflow: auto;
position:relative;
top:-40px;
left:40px;
*top:0px; /* IE7 Hack */
*left:0px; /* IE7 Hack */
margin:0;
width:320px;
height:280px;
padding:10px;
}

.horizontalaccordion>ul>li:hover {
overflow: hidden;
width: 380px;
}

.horizontalaccordion:hover>ul>li:hover>div {
display:block;
}

.horizontalaccordion:hover>ul>li:hover>h3 {
/* Decorative CSS */
color:#fff;
background:#000000;

/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
}

.horizontalaccordion>ul>li>h3:hover {
cursor:pointer;
}

</style>
</head>
<body>

<div class="horizontalaccordion">
<ul>
<li>
<h3>Heading 1</h3>
<div>Content For Panel 1.</div>
</li>
<li>
<h3>Heading 2</h3>
<div>Content For Panel 2.</div>
</li>
<li>
<h3>Heading 3</h3>
<div>Content For Panel 3.</div>
</li>
<li>
<h3>Heading 4</h3>
<div>Content For Panel 4</div>
</li>
</ul>
</div>

</body>
</html>

Kembali kepada | Archives →

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

2010-08-06T07:29:00.001-07:00

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

BINA IKLAN DENGAN CSS3

August 6, 2010
Posted by: Fauzie

Tutorial

Telah banyak diperkatakan tentang kebolehan CSS3 dan untuk artikel kali ini jom kita lihat kehebatan CSS3 ini dan juga HTML5 berhubung dengan membina iklan yang biasanya menggunakan Flash dan Javascript.

Contoh yang ditunjukkan dalam tutorial ini adalah contoh iklan yang telah dibina oleh Sencha.com dengan menggunakan CSS3 dan dibandingkan dengan contoh iklan yang dibina menggunakan Javascript dan Flash. Sila lawat Sencha.com untuk mengetahuinya dengan lebih lanjut.

Bagi membuat iklan seperti ini, “webkit animation properties” banyak digunakan (dan untuk melihatnya dengan lebih berkesan anda perlu menggunakan browser Safari atau Google Chrome.

Live Demo: Iklan menggunakan CSS3

Pay for standard.

Drive off in premium.

Get a free double upgrade
on Hertz weekend rentals.

Plus your regular
AAA discount.

Book Now

AAA Members:
Free double upgrade
on Hertz rentals

Nota:Hanya sesuai dilihat dengan browser Safari dan Chrome sahaja

Di bawah ini ialah contoh kod asas untuk animasi di atas:

“-webkit-animation-name: slideAnimation” merujuk kepada nama animasi
“-webkit-animation-duration: 10s” merujuk kepada lamanya animasi ini dan,
“-webkit-animation-iteration-count: 1” merujuk kepada berapa kali anda iklan ini animated. Dalam kod contoh ini ialah 1 kali. (contoh iklan di atas menggunakan 3 “count” iaitu, iklan akan berulang sebanyak 3 kali).

Kod-kod Webkit yang digunakan untuk mendapatkan effect contoh iklan di atas.

#objectIdToAnimate {
-webkit-animation-name: slideAnimation;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 1;
}

@-webkit-keyframes slideAnimation {
0% { -webkit-transform: translateX(130px); }
100% { -webkit-transform: translateX(0); }
}

Animasi untuk teks

Teks tidak bergerak. Untuk membuat ia kelihatan seperti bergerak, programmer telah menggunakan “opacity” keatas teks bagi menampakkan ia seolah-olah “fading”

Di bawah ini adalah animation kod yang telah digunakan:

@-webkit-keyframes text1 {
0% { opacity: 0; }
6% { opacity: 0; }
8% { opacity: 1; }
24% { opacity: 1; }
28% { opacity: 0; }
100% { opacity: 0; }
}

Animasi gambar kereta.

Dua animasi telah digunakan untuk gambar kereta: 1. bouncing effect dan 2. sliding effect

Di bawah ini adalah CSS keyframes untuk effect bouncing:

@-webkit-keyframes text1 {@-webkit-keyframes bounceAnimation {
0% { -webkit-transform: scale(0.2); }
3% { -webkit-transform: scale(0.57); }
4.5% { -webkit-transform: scale(0.42); }
5.5% { -webkit-transform: scale(0.50); }
6% { -webkit-transform: scale(0.48); }

25% { -webkit-transform: scale(0.48); }
28% { -webkit-transform: scale(1.2); }
29.5% { -webkit-transform: scale(0.9); }
30.5% { -webkit-transform: scale(1.05); }
31.0% { -webkit-transform: scale(1); }

100% { -webkit-transform: scale(1); }
}

Ini pula ialah kod untuk “sliding effect”

@-webkit-keyframes slideAnimation {
0% { -webkit-transform: translateX(-130px); }
55% { -webkit-transform: translateX(-130px); }
66% { -webkit-transform: translateX(0); }
100% { -webkit-transform: translateX(0); }
}

Animasi Butang (button)

Jika anda perhatikan butang “Buy Now”, ia masuk ke bahagian kotak iklan secara “sliding” dan effect ini menggunakan teknik animasi yang sama dengan image kereta.

Apabila anda hover mouse pada butang ini, anda akan dapati warna tulisan akan berubah. Animasi ini terjadi dengan menggunakan webkit property “-webkit-transformproperty” . Disamping itu terdapat juga “shine effect” (kilauan), bergerak dari kiri ke kanan. Ini juga dapat dibuat dengan hanya menggunakan kod-kod CSS seperti ini:

#button:hover {
background: -webkit-gradient(
linear,
left top,
right 50,
color-stop(0.45, #1D5365),
color-stop(0.5, #338DAD),
color-stop(0.55, #1D5365));

background-position: left top;

-webkit-background-size: 300px 22px;
-webkit-animation-name: backgroundShine;
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes backgroundShine {
0% { background-position: right top; }
100% { background-position: left top; }
}

Sekarang jom kita lihat kod-kod CSS dan markup dan anda boleh mencuba dengan copy & paste kod-kod seperti di bawah ini dalam notepad. Sila save dengan memberi nama fail menggunakan extension .html(contoh: iklan.html) bukan extension text. Buka browser Safari, klik->File->Open File dan klik nama fail yang telah disimpan dalam Notepad.

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

div.container1 {
float:left;
}

div.container2 {
margin-left: 336px;
}

#HEFlash {
margin: 0 0 12px;
}

#HEadContainer {
background-color: #FFD200;
border: 1px solid #999;
height:248px;
margin: 0 0 10px;
overflow:hidden;
position:relative;
width:300px;
}

#HEadContainer * {
font-family: Arial, "MS Trebuchet", sans-serif;
line-height: normal;
margin:0;
position:absolute;
padding:0;
}

#HEwhiteBox {
background-color:white;
height:55px;
top: 195px;
width:300px;
}

#HEwbText {
color: #2f4f76;
font-size: 11px;
top:8px;
left:12px;
width:120px;
}

#HEwbLogo {
left:135px;
top:4px;
}

#HEcar {
-webkit-animation-name: HEbounceA;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 3;
bottom: 0;
left:0;
height:130px;
-webkit-transform-origin: center bottom;
width:161px;
}

#HEcarSlider {
-webkit-animation-name: HEslideA;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 3;
bottom: 54px;
left:200px;
height:130px;
width:161px;
}

#HEcar img {
top:auto !important;
bottom:0px;
}

#HEadContainer:hover #HEcar img {
-webkit-animation-name: HEcarRumble;
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: 200;
}

@-webkit-keyframes HEcarRumble {
0% {-webkit-transform: translateY(0);}
50% {-webkit-transform: translateY(-1px);}
100% {-webkit-transform: translateY(0);}
}

@-webkit-keyframes HEbounceA {
0% {-webkit-transform: scale(0.2);}
3% {-webkit-transform: scale(0.53);}
4.5% {-webkit-transform: scale(0.38);}
5.5% {-webkit-transform: scale(0.46);}
6% {-webkit-transform: scale(0.44);}

25% {-webkit-transform: scale(0.44);}
28% {-webkit-transform: scale(1.2);}
29.5% {-webkit-transform: scale(0.9);}
30.5% {-webkit-transform: scale(1.05);}
31.0% {-webkit-transform: scale(1);}

100% {-webkit-transform: scale(1) translateX(0);}
}

@-webkit-keyframes HEslideA {
0% {-webkit-transform:translateX(-130px);}
55% {-webkit-transform:translateX(-130px);}
66% {-webkit-transform:translateX(0);}
100% {-webkit-transform:translateX(0);}
}

/*Main Text*/
#HEtext * {
color: black;
font-size: 17px;
width:250px;
}

#HEtext1,#HEtext2 {
top:20px;
left:20px;
opacity:0;
filter: alpha(opacity = 0);
}

#HEtext1 p {
font-size:20px;
}

#HEtext2 p {
font-size:20px;
}

#HEtext3 p {
font-size:18px;
}

#HEtext1 {
-webkit-animation-name: HEtext1;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 3;
}

#HEtext2 {
-webkit-animation-name: HEtext2;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 3;
}

#HEtext3 {
-webkit-animation-name: HEtext3;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 3;
top:24px;
left:20px;
}

#HEtext3b {
top:48px;
}

#HEbutton {
background-color:#338dad;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
height:22px;
top:103px;
width:95px;
}

#HEbuttonslide {
-webkit-animation-name: HEbuttonslide;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 1;
}

#HEbutton p {
color:white;
font-size: 14px;
padding:3px 0 0 10px;
-webkit-transition-property: color;
-webkit-transition-duration: 0.2s;
}

#HEbutton img {
height:13px;
top:5px;
left:78px;
width:12px;
}

#HEbutton #HEnextY {
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.2s;
}

#HEbutton:hover p {
color:#FFD200;
}

#HEbutton:hover #HEnextY {
opacity:1;
}

#HEbutton:hover {
background: -webkit-gradient(
linear,
left top,
right 50,
color-stop(0.45, #1D5365),
color-stop(0.5, #338dad),
color-stop(0.55, #1D5365)
);
-webkit-background-size: 300px 22px;
background-position: left top;
-webkit-animation-name: HEback2A;
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:linear;
}

@-webkit-keyframes HEback2A {
0% {background-position: right top;}
100% {background-position: left top;}
}

@-webkit-keyframes HEtext1 {
0% {opacity:0;}
6% {opacity:0;}
8% {opacity:1;}
24% {opacity:1;}
28% {opacity:0;}
100% {opacity:0;}
}

@-webkit-keyframes HEtext2 {
0% {opacity:0;}
30.5% {opacity:0;}
32.5% {opacity:1;}
52% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}

@-webkit-keyframes HEtext2 {
0% {opacity:0;}
30.5% {opacity:0;}
32.5% {opacity:1;}
52% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}

@-webkit-keyframes HEtext3 {
0% {opacity:0;}
60% {opacity:0;}
63% {opacity:1;}
100% {opacity:1;}
}

@-webkit-keyframes HEbuttonslide {
0% {-webkit-transform:translateX(-100px);}
60% {-webkit-transform:translateX(-100px);}
62.8% {-webkit-transform:translateX(10px);}
63% {-webkit-transform:translateX(0);}
100% {-webkit-transform:translateX(0);}
}

</style>
</head>
<body>

<div class="container1">
<h3>Contoh iklan dibina menggunakan CSS</h3>

<div id="HEadContainer">
<div id="HEcarSlider">
<div id="HEcar">
<img src="http://www.sencha.com/deploy/css3-

ads/hertz/carbody.png ">
</div>
</div>
<div id="HEtext">
<div id="HEtext1">
<p>Pay for standard.</p>
</div>
<div id="HEtext2">
<p>Drive off in premium.</p>
</div>
<div id="HEtext3">
<div id="HEtext3a">
<p>Get a free double upgrade <br> on Hertz weekend

rentals.</p>
</div>
<div id="HEtext3b">
<p>Plus your regular <br> AAA discount.</p>
</div>
<div id="HEbuttonSlide">
<div id="HEbutton">
<p>Book Now</p> <img src="

http://www.sencha.com/deploy/css3-ads/hertz/next.png"> <img id='HEnextY'

src="http://www.sencha.com/deploy/css3-ads/hertz/nextY.png ">
</div>
</div>
</div>
</div>
<div id="HEwhiteBox">
<div id="HEwbText">
<p> AAA Members: <br> Free double upgrade <br> on Hertz

rentals </p>
</div>
<div id="HEwbLogo">
<img src="http://www.sencha.com/deploy/css3-

ads/hertz/logo.png ">
</div>
</div>
</div>
</div>
</body>
</html>

Kembali kepada | Archives →

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

2010-07-05T07:26:00.001-07:00

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

CSS TRANSITION: ANIMASI CONTOH KE 2

July 5, 2010
Posted by: Fauzie

TUTORIAL

Satu lagi contoh yang tidak kurang hebatnya animasi yang boleh dibuat dengan CSS ialah seperti yang ditunjukkan di bawah ini.

Dalam demo ini anda akan dapat image atau gambar seolah-olah "melayang" ke arah anda apabila cursor di hover ke atas image. Efek ini terjadi dengan membuat image "membesar" dan juga dengan membuat "bayang-bayang" memanjang.

"Live Demo"

Sila hover cursor ke atas image.

Crystal Mosque, Kuala Terengganu

Jom kita perhatikan kod-kod CSS dan HTMLnya.

<html>
<head>
<style type="text/css">
a.gambar {
color: #333;
font-family:"Lucida handwriting", "Snell Roundhand", "Helvetica
Neue",Arial,Helvetica,sans-serif;
font-size: 10px;
display: block;
margin: 10em auto 0 auto;
text-decoration: none;
color: #333;
padding: 13px 13px 26px 13px;
width: 240px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: all 0.5s ease-in;
}
a.gambar:hover,
a.gambar:focus,
a.gambar:active
{
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: rotate(0deg) scale(1.05);
-moz-transform: rotate(0deg) scale(1.05);
transform: rotate(0deg) scale(1.05);
}
.gambar img {
margin: 0 0 15px;
}

a img {
border: none;
display: block;
}
</style>
</head>
<body>
<div class="photo-album"><a href="http://farm4.static.flickr.com/3298/3499711643_cbab59812d_m.jpg/" class="gambar"><img src="http://farm4.static.flickr.com/3298/3499711643_cbab59812d_m.jpg" alt=""><h3>Crystal Mosque, Kuala Terengganu</h3></a>
</div>
</body>
</html>

Kembali kepada | Archives →

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

2010-07-05T01:55:00.000-07:00

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

CSS TRANSITION: ANIMASI

July 5, 2010
Posted by: Fauzie

TUTORIAL

Satu kelebihan webkit ialah ia berupaya membuat animasi hanya dengan menggunakan "pure CSS". Walaubagaimana pun ia tertakluk kepada browser moden sahaja seperti Firefox, Safari dan Chrome. Dari percubaan yang telah dibuat, ia sangat sesuai dengan browser Safari dan tidak terlalu sesuai dengan Firefox.

Di bawah ini ialah "Live Demo" dengan menggunakan transition effect untuk mendapatkan satu contoh animasi. Ia adalah adaptasi dari demo webpage 24ways.org dan telah saya ubahsuai untuk digunakan dalam blogger.

Sila hover cursor ke atas image dalam "Live Demo" ini.

White water rafting in Queenstown

Untuk mendapatkan efek seperti di atas, jom kita lihat kod-kod CSS dan HTMLnya.

<html>
<head>
<style type="text/css">
a.polaroid {
display: block;
margin: 10em auto 0 auto;
text-decoration: none;
color: #333;
padding: 13px 13px 26px 13px;
width: 200px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.polaroid img {
margin: 0 0 15px;
}

a img {
border: none;
display: block;
}
</style>
</head>
<body>
<div class="photo-album"><a href="http://www.flickr.com/photos/nataliedowne/2340993237/in/set-72157604232220981/" class="polaroid"><img src="http://media.24ways.org/2009/14/img/raft.jpg " alt="">White water rafting in Queenstown</a>
</div>
</body>
</html>

Kembali kepada | Archives →

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

2010-07-02T00:36:00.001-07:00

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

CSS TRANSITION: MINI POLAROID

July 2, 2010
Posted by: Fauzie

TUTORIAL

Dalam artikel ini saya ingin tunjukkan bagaimana "CSS Transforms" dan "Webkit Transitions" boleh memberi daya tarikan kepada image atau gambar dalam webpage anda.

Pertama, kita akan membuat image atau gambar kelihatan seperti
"mini polaroid". Jom kita lihat "mark up" kodnya:

<div class="polaroid pull-right">
<img src="../img/seal.jpg" alt="">
<p class="caption">Found this little cutie on a walk in New Zealand!</p>
</div>

Perhatikan "presentational class" "pull-right". Class ini membawa maksud tiada "positioning effect" atau dengan kata lain image polaroid boleh diletakkan di mana sahaja dan webpage kita.

Dengan effect padding, border dan background, serta ditambah dengan "box-shadow property" untuk efek bayang-bayang, mini polaroid yang akan dibina sudah tentu dapat memberi satu daya tarikan yang sungguh menarik.

Ini adalah kod CSS untuk mendapatkan efek polaroid.

.polaroid {
width: 150px;
padding: 10px 10px 20px 10px;
border: 1px solid #BFBFBF;
background-color: white;
-webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
-moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);

}

Setelah kita mempunyai "mini polaroid", mari kita pusing tau rotate gambar tersebut. Untuk mendapat efek ini, kita menggunakan "CSS transform property".

-webkit-transform: rotate(9deg);
-moz-transform: rotate(9deg);
transform: rotate(9deg)

Rotation boleh buat dengan memberi nilai dalam darjah (degree),radian atau gradient. Dalam contoh yang akan ditunjukkan, kita akan memberi nilai dalam darjah (degree)dan dua pendekatan akan digunakan: nilai positif seperti di atas (9deg) dan nilai dalam negatif (-9deg) seperti di bawah ini. Nilai positif dan negatif ini akan menentukan arah dimana pusingan (rotation) akan berlaku.

.pull-left.polaroid {
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
transform: rotate(-9deg);
}

"Live Demo"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Gambar ini dipusing 9 darjah ke kanan

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Gambar ini dipusing 9 darjah ke kiri

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Di bawah ini ialah kod CSS dan HTML untuk efek di atas.

<html>
<head>
<style type="text/css">
.polaroid {
color: #333;
font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;
width: 150px;
padding: 10px 10px 20px 10px;
border: 1px solid #BFBFBF;
background-color: white;
-webkit-transform: rotate(9deg);
-moz-transform: rotate(9deg);
transform: rotate(9deg);
-webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
-moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
}
.polaroid img {
margin: 0 0 15px;
}
.polaroid .caption {
margin: 0;
font-size: 0.7em;
}
.pull-right {
float: right;
margin: 0.8em 0 2em 2em;
}
.pull-left {
float: left;
margin: 0.8em 3em 2em 0;
}
.pull-left.polaroid {
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
transform: rotate(-9deg);
}

</style>
</head>
<body>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="polaroid pull-right"><img src="http://media.24ways.org/2009/14/img/seal.jpg" alt="" />
<p class="caption"><span style="color: rgb(0, 0, 0);">Gambar ini dipusing 9 darjah ke kanan</span></p></div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<div class="polaroid pull-left"><img src="http://media.24ways.org/2009/14/img/seal.jpg" alt="" /><p class="caption"><span style="color: rgb(0, 0, 0);">Gambar ini dipusing 9 darjah ke kiri</span></p></div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Perhatikan ayat dengan huruf tebal (bold). Ini adalah kod-kod html yang diletakkan di dalam artikel untuk memberi efek gambar yang terletak di bahagian kiri dan kanan seperti contoh di atas.

Kembali kepada | Archives →

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

2010-07-01T19:42:00.000-07:00

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

GLOBAL CONNECTION

Place Text 1 here	Place text 2 here	Place text 3 here
Place text 4 here	Place text 5 here	Place text 6 here
Place text 7 here	Place text 8 here	Place text 9 here

2010-06-23T08:01:00.000-07:00

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

BUAT "INSET TYPO" DENGAN CSS3

June 23, 2010
Posted by: Fauzie

Maklumat Tepi

Inset typography atau letterpress typography adalah stail teks yang nampak seolah-olah timbul atau tengelam di atas sesuatu permukaan. Jika ianya dibuat dengan betul dan dengan cara yang kreatif, ia akan memberi impak yang sangat menarik

Dalam tutorial ini kita akan buat typo jenis "inset" dengan hanya menggunakan CSS dan juga CSS3 properties. Biasanya typo jenis ini dibuat dengan menggunakan photoshop.

Markup HTML
Perkara pertama yang kita buat ialah set HTMLnya seperti di bawah ini:

<div id="insetBG">
<letter class="insetJenis">Inset Typography</letter>
</div>

Latarbelakang atau Background
Lebar untuk contoh dalam tutorial ini ialah 500px dan tingginya 100px. Kemudian kita akan gunakan CSS3 gradient untuk memberi efek "fadding" dari atas ke bawah. Kod warna yang digunakan ialah #003471 dan #448CCB. Kod untuk latarbelakang adalah seperti di bawah ini:

#insetBG {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg, #003471, #448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

Font dan Style
Sekarang kita berikan style untuk font serta saiz dan warnanya:

letter.insetJenis {
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
font-weight: bold;
color: #0D4383;
}

Di bawah ini adalah kod-kod CSS and HTML sepenuh.

<html>
<head>
<style type="text/css">
#insetBgd {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg,#003471,#448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

letter.insetType {
padding-left: 50px; /* The padding is just there to move the h1 element to the center of the div */
padding-top: 17px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}
</style>
</head>
<body>
<div id="insetBgd">
<letter class="insetType">Inset Typography</letter>
</div>
</body>
</html>

Inset Typography

Contoh di atas dibuat menggunakan kod-kod CSS dan HTML di atas.

Jika anda tukar beberapa kod di atas:

color: #0D4383;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;

menjadi seperti ini:

color: #448ccb;
text-shadow: 0px 6px 4px #111;

Huruf atau typo akan menjadi seperti ini.

Inset Typography

Contoh di bawah ini pula terjadi apabila kod background anda tukarkan seperti berikut:

background: transparent;

Jom Kita Blog

About Minimal

Some description about you

1. Nulla ornare, nulla et
2. egestas hendrerit, ipsum dui vulputate dolor, et ornare orci erat eleifend pede.
Fusce eros libero, vestibulum non, elementum eu, suscipit eget, leo.

Our Mission

Our goal is to be the best

Cras neque purus, mollis non, adipiscing ac, pretium eget, turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

jom kita blog

Kandungan Tutorial

Kandungan Tutorial

Kandungan Tutorial

Kandungan Tutorial

Kandungan Tutorial

TAHUN TIONGHUA

May 2011

February 2011

TAHUN TIONGHUA

November 2010

Oktober 2010

September 2010

Ogos 2010

Julai 2010

Jun 2010

Mei 2010

TAHUN TIONGHUA

Disember 2009

Oktober 2009

September 2009

Ogos 2009

Julai 2009

Jun 2009

Mei 2009

Mac 2009

Januari 2009

TAHUN TIONGHUA

September 2008

Jun 2008

Mei 2008

April 2008

Kandungan Tutorial

Kandungan Tutorial

Contoh Foto Slider Menggunakan jQuery

Vivistar 3.6" Quad Band Dual SIM

Barcelona Plus Quad Dual SIM WIFI

Focus Mini Slider

6 inche HD Touch Screen GPS

Kandungan Tutorial

Kandungan Tutorial

Kandungan Tutorial

Architect of TransportTAJUK ARTIKEL

Kandungan Tutorial

Kandungan Tutorial

jom blog

Kandungan Tutorial

Kandungan Tutorial

Merdeka, Merdeka

Merdeka, Merdeka

Merdeka, Merdeka

Kandungan Tutorial

Kandungan Tutorial

Kandungan Tutorial

Kod Mark-Up

Langkah 1

Langkah 2

Langkah 3

Langkah 4

Langkah 5

Langkah 6

Langkah 7

TUTORIAL

TUTORIAL

Tutorial

TUTORIAL

Come& Experience True Holiday

Tutorial

Chicago

Flowers

my shoes

snowing in country side

HEADING 5

About Minimal

Our Mission

Meet The Team

Tutorial

Auto innovators

Architecture in motion

Heading 3

Architect of Transport
TAJUK ARTIKEL