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


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>&nbsp;<img src="

http://www.sencha.com/deploy/css3-ads/hertz/next.png">&nbsp;<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: