InsaneJournal

Tweak says, "Nothing is written!"

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-01-11 21:27:00

Entry tags:

layouts: media

iChat Video Mock-up

Live Example

Video Chat with Kristopher

Effects

The Code

<lj-raw>
<table style="background:url(http://img199.imageshack.us/img199/3347/brushedmetal.jpg) #bbbbbb;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-family:sans-serif;font-size:12px;color:#333333;width:500px;height:450px;padding:4px;">
<tr>
<td colspan=3 align="center" valign="top"><div style="background:url(http://img156.imageshack.us/img156/5485/upperbuttons.png) no-repeat 0 0;float:left;"><div style="text-align:center;width:490px;text-shadow:0 1px 0 #c5c5c5;">Video Chat with NAME</div></div></td>
</tr>
<tr>
<td colspan=3 align="center"><div style="background:url(LARGE IMAGE URL);width:490px;height:400px;"><div style="background:url(SMALL IMAGE URL) no-repeat 0 0;border:2px #ffffff solid;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:160px;height:130px;margin-top:255px;margin-right:12px;float:right;"></div></div></td>
</tr>
<tr>
<td align="left"><div style="background:#b6b6b6 -moz-linear-gradient(top,  #e2e2e2,  #b6b6b6);background:-webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#b6b6b6));-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px #555555 solid;color:#000000;padding:3px 10px;float:left;">Effects</div></td>
<td align="center"><div style="background:#b6b6b6 -moz-linear-gradient(top,  #e2e2e2,  #b6b6b6);background:-webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#b6b6b6));-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px #555555 solid;color:#000000;padding:4px;float:left;margin-right:5px;"><img src="http://img97.imageshack.us/img97/8981/plussign.png"></div> <div style="background:#b6b6b6 -moz-linear-gradient(top,  #e2e2e2,  #b6b6b6);background:-webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#b6b6b6));-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px #555555 solid;color:#000000;padding:3px;float:left;margin-right:5px;"><img src="http://img255.imageshack.us/img255/8476/micsign.png"></div> <div style="background:#b6b6b6 -moz-linear-gradient(top,  #e2e2e2,  #b6b6b6);background:-webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#b6b6b6));-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px #555555 solid;color:#000000;padding:3px;float:left;margin-right:5px;"><img src="http://img526.imageshack.us/img526/3735/arrowssign.png"></div></td>
<td align="right" valign="bottom"><img src="http://img508.imageshack.us/img508/171/arrowcorner.png" style="margin:-6px;"></td>
</tr>
</table></lj-raw>

Images

Background Image

Chat Images
Large Image Dimensions: 490px x 400px
Small Image Dimensions: 160px x 130px

Questions/Feedback?
Leave a comment to this post. Thanks!

	sansastark 2011-01-12 05:33 pm UTC (link)
	this is so cool. thanks for sharing! :D (Reply to this) (Thread)

	wastintime 2011-01-13 01:03 am UTC (link)
	Thank you and you're welcome! (Reply to this) (Parent)