Tween

ابتدا یه عذرخواهی بکنم از سالار عزیز، این نوشته به درخواست ایشون نوشته شد، منتهی خیلی دیر! نمی‌دونم چرا تازگی‌ها خیلی بدقول شدم…

در این آموزش می‌خوایم جلوه‌ای که در طراحی وب بسیار معمول شده رو پیاده کنیم. بیاید از جعبه بزنیم بیرون!
ابتدا باید جعبه و روبان‌مون رو طراحی کنیم. یه آموزش تصویری خوب در این رابطه رو در این‌جا ببینید.
این آموزش هم نحوه ساخت روبان‌هایی با گوشه‌های نرم رو آموزش می‌ده.

خوب، الان باید به فکر یه ساختار منطقی برای ارائه محتوا باشید. مثلاً این:

[html]
<div class="widget">
<h3>پیوندها</h3>
<ul>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
</ul>
</div>
[/html]

تصویر روبان‌مون رو به عنوان پس‌زمینه h3 معرفی می‌کنیم. تکنیک اینه که به h3مون position:relative بدیم. position:absolute و position:fixed عنصر رو از ساختار فعلی سند (جریان سند = documnt flow) خارج می‌کنن ولی با position:relative عنصر هنوز در همون موقعیت فعلیش می‌مونه و می‌تونیم شی رو نسبت به موقعیت فعلیش به میزان دلخواه جابه‌جا کنیم. این جابه‌جایی رو با top, right, bottom, left تعریف می‌کنیم. پس به‌جز تعریف‌های آرایشی، برای به‌دست آوردن این جلوه به تعریف‌های زیر نیاز داریم:

[css]
h3 {
width: 200px; /* به میزان دلخواه */
position: relative; /* مورد نیاز */
left: -30px; /* یعنی شی رو به میزان سی پیکسل به سمت چپ بکش */
background: url(images/ribbon.png) no-repeat; /* تصویر روبان */
}
[/css]

این width رو باید به اندازه (طول جعبه + اندازه‌ای که می‌خوایم از دو طرفه بیرون بزنه) باید تعریف کنیم. دقت کنید که در css بالا ما مقدار right رو تعریف نکردیم. اگه می‌خوایم از سمت راست هم بیرون بزنه باید مقدار width رو زیاد کنیم و نباید right رو تعریف کنیم (از لحاظ منطقی هم این‌کار معنایی نداره). اگه هم مقدار right و هم مقدار left رو تعریف کنیم مرورگر اگه در سند چپ به راست باشیم مقدار left و اگه سند راست به چپ باشه مقدار right رو استفاده می‌کنه و اون یکی رو در نظر نمی‌گیره. اگه هر دو مقدار top و bottom تعریف شده باشه مرورگر همیشه مقدار top رو استفاده می‌کنه.

درباره تفاوت انواع positionها این‌جا رو بخونید: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

یه استفاده معمول از position:relative برای تعریف position:absolute نسبت به یه عنصر دیگه‌ست. توضیحات بیشتر رو در این‌جا ببینید: http://css-tricks.com/absolute-positioning-inside-relative-positioning/