Tutorial Photoshop Impulse Animation CSS Links | Copyright 2008 Web 2.0 www.dremi.info

Tutorial Photoshop, Forum Photoshop, Tutorial CSS, Tutorial PHP, HTML, Web Tips, dll ! dremi.info

Custom Search

Apr ‘08 16 Impulse Animation CSS Links

2656 hits 3 comments 385 download print send

tutorial photoshop nya kali ini gw gabung ma sdikit CSS skin...ni bwat bikin link overlay bergaya impulse, saat disentuh akan menganimasikan background gambar di belakangna, yang sebelumna kita bikin di Adobe ImageReady.

awalna kita bikin file html na di Macromedia Dreamweaver. karena yang diperlukan ada beberapa option:

1. index.html
2. ui.css
3. background.gif

bikin index.html, kasi code ke gini:

<ul class="links">
<li><a href="#" title="Sample Link">Sample Link</a></li>
<li><a href="#" title="Sample Link">Sample Link</a></li>
<li><a href="#" title="Sample Link">Sample Link</a></li>
<li><a href="#" title="Sample Link">Sample Link</a></li>
<li><a href="#" title="Sample Link">Sample Link</a></li>
</ul>

letakkan di antara TAG body

kedua bikin file ui.css agar bisa di link ke index.html

ul.links{
list-style: none;
padding: 0;

}
ul.links li a{
display: block;
width: 200px;
height: 10px;
border-left: 6px solid #1958b7;
border-right: 10px solid #2175bc;
background: #2175bc;
padding: 10px 20px;
color: white;
text-decoration: none;
font: 12px sans-serif;
}

ul.links li a:hover{
border-right: 10px solid #508fc4;
background: url('background.gif');
}

save manjadi ui.css, lalu link kan make tag code dibawah ini:

<link rel="stylesheet" href="ui.css" type="text/css" media="screen"/>

taro Tag link diatas di antara TAG head, dalam file index.html

kalo udah skarang kita butuh fiel background.gif, bwat di photoshop, dua layer masing masing kasi warna dari dark ke light

kalo dah siap klik icon Edit in ImageReady (SHIFT+CTRL+M)

di imageready kita bakalan bikin animasi impulse sederhana.

perhatikan pada frame 1

ubah opacity layer light menjadi 10 % dan layer dark biarkan pada 100 %, click icon Duplicat current frame . akan muncul frame 2

pada frame 2, yang dibuah ipacityna menjadi 10 % adalah layer dark, dan light menjadi 100 %.

bwat sedikit animasi, untuk impulse na. dengan mngklik icon tween.

ulangi langkah animasi diatas sekali lagi. pilih file > save optimize as, untuk menyimpan file ke background.gif

biar kbntuk background ke gini:

woke, background ini bakalan di load dalam css saat mouse disentuh, bwat liat sample na download aja paket tutorial ini.

hehehekkm mahap buru2 nih...selamat mencoba dah... huuuhhahahahahahaa...

385 download print send

Technorati Cosmos: other blogs commenting on this post

SOCIAL BOOKMARK :

Social Bookmarks

PERMALINK HERE :

http://www.dremi.info/tutorial/photoshop/impulse-animation-css-links.html

SHARE TUTORIAL :

<style type="text/css">
<!--
.tagContent {
	font-family: "Courier New", Courier, monospace;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	color: #006600;
	text-decoration: none;
	background-color: #F7FFEA;
	padding: 4px;
	border: 1px solid #99CC00;
	width: 90%;
}

-->
</style>
<p>tutorial photoshop nya kali ini gw gabung ma sdikit CSS skin...ni bwat bikin link overlay bergaya impulse, saat disentuh akan menganimasikan background gambar di belakangna, yang sebelumna kita bikin di Adobe ImageReady.</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Impulse%20Animation%20CSS%20Links/impulse-menu.png" width="267" height="192" /></p>
<p>awalna kita bikin file html na di Macromedia Dreamweaver. karena yang diperlukan ada beberapa option:</p>
<p>1. index.html<br />
  2. ui.css <br />
  3. background.gif
</p>
<p>bikin index.html, kasi code ke gini:</p>
<div class="tagContent"><ul class="links"><br />
<li><a href="#" title="Sample Link">Sample Link</a></li><br />
<li><a href="#" title="Sample Link">Sample Link</a></li><br />
<li><a href="#" title="Sample Link">Sample Link</a></li><br />
<li><a href="#" title="Sample Link">Sample Link</a></li><br />
<li><a href="#" title="Sample Link">Sample Link</a></li><br />
</ul></div>
<p> </p>
<p>letakkan di antara TAG body </p>
<p>kedua bikin file <strong>ui.css</strong> agar bisa di link ke index.html</p>
<div class="tagContent">ul<strong>.</strong>links<strong>{</strong><br />
  list-style: none<strong>;</strong><br />
  padding: 0<strong>;</strong><br />
  <br />
  <strong>}</strong><br />
  ul<strong>.</strong>links li a<strong>{</strong><br />
  display: block<strong>;</strong><br />
  width: 200px<strong>;</strong><br />
  height: 10px<strong>;</strong><br />
  border-left: 6px solid #1958b7<strong>;</strong><br />
  border-right: 10px solid #2175bc<strong>;</strong><br />
  background: #2175bc<strong>;</strong><br />
  padding: 10px 20px<strong>;</strong><br />
  color: white<strong>;</strong><br />
  text-decoration: none<strong>;</strong><br />
  font: 12px sans-serif<strong>;</strong><br />
  <strong>}</strong><br />
  <br />
  ul<strong>.</strong>links li a:hover<strong>{</strong><br />
  border-right: 10px solid #508fc4<strong>;</strong><br />
  background: url<strong>(</strong>'background.gif'<strong>)</strong><strong>;</strong><br />
<strong>}</strong></div>
<p>save manjadi ui.css, lalu link kan make tag code dibawah ini:</p>
<div class="tagContent"><<strong>link</strong> rel="stylesheet" href="ui.css" type="text/css" media="screen"/></div>
<p>taro Tag link diatas di antara TAG head, dalam file index.html</p>
<p>kalo udah skarang kita butuh fiel background.gif, bwat di photoshop, dua layer masing masing kasi warna dari dark ke light</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Impulse%20Animation%20CSS%20Links/greenlight.png" width="202" height="380" /></p>
<p>kalo dah siap klik icon Edit in ImageReady (SHIFT+CTRL+M)</p>
<p>di imageready kita bakalan bikin animasi impulse sederhana.</p>
<p>perhatikan pada frame 1</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Impulse%20Animation%20CSS%20Links/frame1.png" width="219" height="385" /></p>
<p>ubah opacity layer light menjadi 10 % dan layer dark biarkan pada 100 %, click icon Duplicat current frame <img src="http://i175.photobucket.com/albums/w126/hairulazami/Impulse Animation CSS Links/duplicat-cframe.png" width="24" height="27" />. akan muncul frame 2 </p>
<p>pada frame 2, yang dibuah ipacityna menjadi 10 % adalah layer dark, dan light menjadi 100 %.</p>
<p>bwat sedikit animasi, untuk impulse na. dengan mngklik icon tween. </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Impulse%20Animation%20CSS%20Links/tween.png" width="386" height="401" /> </p>
<p>ulangi langkah animasi diatas sekali lagi. pilih file > save optimize as, untuk menyimpan file ke background.gif</p>
<p>biar kbntuk background ke gini:</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Impulse%20Animation%20CSS%20Links/background-green.gif" width="20" height="20" />  </p>
<p>woke, background ini bakalan di load dalam css saat mouse disentuh, bwat liat sample na download aja paket tutorial ini.</p>
<p> </p>
<p>hehehekkm mahap buru2 nih...selamat mencoba dah... huuuhhahahahahahaa...</p>
<p> </p> <P>&nbsp;</P><P style='font-size:11px;'><strong>© Copyright 2008 <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> </strong><BR>
Original Post: <a href='http://www.dremi.info/tutorial/photoshop/impulse-animation-css-links.html' title='tutorial photoshop Impulse Animation CSS Links'>Impulse Animation CSS Links</a> Category: <a href='http://www.dremi.info/tutorial/photoshop/button.html' title='tutorial photoshop Button'>Button</a>
<BR><B>About the Author:</B> dr.emi is a free man to distribute anything that he was founded. As a Webmaster He was publishing <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> to create one community that loves free idealism. Very specialy in Design Category. <I>Welcome to love it!</I></P>

Selama untuk keperluan non profit dan belajar gratis, dipersilahkan untuk dicopy, disebarluaskan, atow diperbanyak, tanpa merubah content tutorial dengan tetap memasang author link, sesuai source code HTML na. Ntu tandana lu mensupport All Free Idealism dan menghargai karya dr.emi. Copy TAG HTML diatas bwat dipasang di web / blog lu.

3 Comments to
“ Impulse Animation CSS Links “

riza

Posted On: 22-06-2008 / 13:06:38

dok tiasa teu sayah minta tutor untuk me retouch foto orang? misalnya, foto pengantin wanita yang make-up nya sedikit belepotan jadi bisa rada rapih begitu.. tolong yaaaaahh... kalau bisa e-amil ke rza_eotz@yahoo.com nuhun..

tutorial photoshop

Posted On: 17-04-2008 / 21:52:29

woke ... hehek

thanks jg, dintunggu kunjungan kembali na ...