h1 {
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

در این روش من ابتدا به المنت موردنظر یک بک‌گراند با گرادینت می‌دهم (خط ۲).
بعد با مشخصه‌ی -webkit-background-clip تعیین می‌کنم که بک‌گراند مورد نظر فقط در نواحی‌ای که متن وجود دارد دیده شود. واضح‌تر بگویم؛ حرف A را درنظر بگیرید. حالا بک‌گراند فقط در قسمت‌هایی که خطوط حرف A وجود دارد، دیده خواهد شد (خط ۳).
در آخر هم متن داخل المنت را به‌صورت شفاف در می‌آورم، یعنی عاری از هر رنگی که در این صورت فقط بک‌گراند متن دیده خواهد شد (خط ۴).

نتیجه را ببینید.

منبع: CSS-Tricks

• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس
• هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا
• آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی‌کوئری
• یک آموزش کوتاه و مهم در سی اس اس – important! چیست؟

چیزی که قصد دارم درباره‌ش صحبت کنم، جی‌کوئری UI (مخفف User Interface) هست که یک کتاب‌خانه‌ی تحت جی‌کوئری‌ست و روی بخش رابط کاربری فکوس دارد. به‌طوری که عمل‌هایی مانند درگ‌کردن یک المنت در صفحه یا تغییر اندازه‌ی آن با کشیدن ماوس و یا بزرگ‌نمایی یک عکس با بالا پایین کردن یک نوار لغزنده و خیلی کارهای دیگر را تا حدی ساده کرده است که شاید کمی دور از ذهن باشد.

یک شروع ساده

ابتدا باید کتاب‌خانه‌ی جی‌کوئری UI را از اینجا دریافت کنید. نکته‌ی جالب این است که هنگام دریافت می‌توانید پکیج دلخواه خودتان را ایجاد و دریافت کنید. در صفحه‌ی دریافت لیستی از کامپوننت‌های جی‌کوئری UI قرار دارد که با برداشتن تیک ِ چک‌باکس ِ هرکدام، آن کامپوننت از پکیج‌تان حذف می‌شود. این مورد برای زمانی که حجم کد برای‌مان اهمیت زیادی دارد بسیار مناسب است و می‌شود کامپوننت‌های اضافی را حذف نمود.

پس از دریافت، کافی است سری به بخش دموها بزنید. این بخش به‌عنوان یک مرجع جمع‌و‌جور و کامل، نمونه‌های زیادی از کارهایی که می‌شود با جی‌کوئری UI انجام داد را به همراه توضیحاتی برای‌تان قرار داده است.

اما بهتر است برای درک بهتر ماجرا، یکی از نمونه‌ها را با هم مرور کنیم؛

درگ‌کردن [+]

- یادتان باشد که کتاب‌خانه‌ی جی‌کوئری و جی‌کوئری UI را به صفحه اضافه کنید (هردو کتاب‌خانه در پکیجی که دریافت می‌کنید، در فولدر js قرار دارند).

دستور اچ‌تی‌ام‌ال زیر را داریم:

<div class="draggable">Drag me!</div>

حالا کافی است اسکریپت زیر را اضافه کنیم:

$(function() {
	$(".draggable").draggable();
});

همه‌چیز به همین ساده‌گی است؛ هر المنتی که در صفحه، کلاس draggable داشته باشد، توسط اسکریپت بالا، دارای خاصیت درگ‌شدن می‌شود.
حالا می‌توانیم آپشن‌هایی را به آن اضافه کنیم تا کاربردی‌تر شود. مثلاً هنگام درگ‌کردن، المنت موردنظر کمی شفاف شود:

$(function() {
	$(".draggable").draggable({ opacity: 0.50 });
});

می‌توانیم از چند آپشن هم‌زمان استفاده کنیم، با گذاشتن یک , بین آپشن‌ها:

$(function() {
	$(".draggable").draggable({ opacity: 0.50, revert: true });
});

آپشن revert اگر مقدارش true باشد باعث می‌شود المنت را وقتی درگ می‌کنید به سمتی، پس از رها کردن، برگردد سر جای اولش. مقدار پیش‌فرض آن false است.

اما از این قسمت که بگذریم می‌رسیم به یک مورد مهم دیگر از جی‌کوئری UI و آن این است که این کتاب‌خانه، علاوه بر دارا بودن پلاگین‌های قدرتمند جی‌کوئری، یک فریم‌ورک سی‌اس‌اس هماهنگ با این پلاگین‌ها نیز به‌همراه دارد و با استفاده از آن می‌شود به پلاگین‌ها استایل داد. استایل‌ها و پوسته‌های متعدد ِ آماده‌ای که باعث می‌شوند در بیشتر مواقع کار به طراحی استایل توسط خودمان نرسد.

برای استفاده از این فریم‌ورک سی‌اس‌اس کافی است فایل سی‌اس‌اسی که نامش یک همچین‌چیزی است: jquery-ui-1.8.4.custom.css و در مسیر css/smoothness قرار دارد را به صفحه‌مان اضافه کنیم.

البته به‌همراه پکیجی که در ابتدا دریافت می‌کنید فقط همین یک استایل وجود دارد و اگر می‌خواهید استایل‌های دیگر را هم ببینید، بروید اینجا و هرکدام را که خواستید دریافت کنید و یا قبل از دریافت می توانید تغییراتی که می‌خواهید را به آن اعمال نمایید و بعد دریافتش کنید.

و البته یک سری قواعدی هم برای استفاده از این فریم‌ورک مانند هر فریم‌ورک سی‌اس‌اس دیگری وجود دارد که کمی در این‌باره توضیح می‌دهم؛

در فریم‌ورک UI نام همه‌ی کلاس‌ها با .ui آغاز می‌گردد. مثلاً: .ui-widget یا .ui-widget-content

کمی بالاتر مثالی برای درگ‌کردن ِ یک المنت زدم. حالا می‌خواهم آن المنت را با فریم‌ورک سی‌اس‌اس جی‌کوئری UI استایل‌دهی کنم؛

<div class="draggable ui-widget">
<div class="ui-widget-header">Title</div>
<p class="ui-widget-content">Content...</p>
</div>

درواقع .ui-widget المنت اصلی‌ای است که درگ می‌شود. در داخلش .ui-widget-header آوردم و عنوانی در آن نوشتم و بعد از آن هم .ui-widget-content برای قراردادن محتوا در آن.

لُپ ِ کلام اینکه جی‌کوئری UI زمینه‌ها را برای‌مان آماده می‌کند تا ما حواس و تمرکزمان روی هدفی که داریم باشد.

نمونه‌ای از مثال‌هایی که زده شد را اینجا ببینید.

• آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی‌کوئری
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر
• چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!
• گرادینت متن با سی اس اس
• ای‌جکس بازی » به‌یاد هایپرترمینال

ابتدا در پرونده‌ی اچ‌تی‌ام‌ال‌مان یک همچین‌چیزی می‌نویسیم:

<div id="content">
<div id="dot-effect"></div>
<img src="img.jpg" />
</div>

سپس فتوشاپ‌مان را آتیش می‌کنیم و یک سند جدید با طول و عرض مثلا ۳ پیکسل ایجاد می‌کنیم و دقیقا در وسط ِ آن یک نقطه‌ی ریز با طول و عرض ۱ پیکسل و رنگ ِ مشکی قرار می‌دهیم. به‌تر هست که شفافیت نقطه را تا حدودی کم کنیم. مثلا روی ۶۰ درصد بگذاریم! البته این نقطه را من قبلا درست کرده‌ام و در فایلی که دریافت می‌کنید، موجود است، و می‌توانید از همان استفاده کنید.
خب، حالا این نقطه‌ای که طراحی کرده‌ایم را با پسوند ِ پی‌ان‌جی (png) ذخیره می‌کنیم. یادتان هم باشد که این نقطه نباید زمینه داشته باشد، یعنی Transparent باشد.

حالا نوبت به دستورات ِ سی‌اس‌اس می‌رسد:

#dot-effect {background: transparent url(dot.png) repeat; position: absolute; width: 500px; height: 374px;}

نقطه‌ای که درست کرده بودیم را در زمینه‌ی dot-effect قرار می‌دهیم. پوزیشنش را هم ابسُلوت می‌کنیم تا مستقل از عناصر ِ دیگر ِ صفحه شود و بی‌آید روی تصویر. طول و عرضش را هم برابر با طول و عرض ِ تصویرمان می‌کنیم.

تمام شد. به همین راحتی یک جلوه‌ی زیبا برای تصاویرمان درست کردیم. از این افکت به‌نظرم به‌تر هست که در نمایش‌های اسلایدی یا چیزهایی شبیه آن استفاده شود. مثلا همان نمایش اسلایدی‌ای که چند وقت پیش یاد گرفتیم. این افکت را به آن اضافه کنید و نتیجه را ببینید که چقدر جالب می‌شود :)

نمونه‌ی این افکت را این‌جا ببینید و آن را از زیر دریافت کنید:

• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا
• آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی‌کوئری
• یک آموزش کوتاه و مهم در سی اس اس – important! چیست؟

فرض کنید یک کادر در صفحه داریم که اندازه‌ی ارتفاعش در فایرفاکس دقیقا همانی هست که در سی‌اس‌اس تعیین کرده‌ایم، اما در اینترنت‌اکسپلورر ۶ کمی ارتفاع بیشتر است. در این‌جا از دستورات اختصاصی اینترنت‌اکسپلورر استفاده می‌کنیم و در آن، اندازه‌ی ارتفاع ِ کادر ِ موردنظر را کمتر می‌کنیم تا متناسب شود و این فقط شامل اینترنت‌اکسپلورر (۶) خواهد بود و فایرفاکس و دیگر مرورگرها، هم‌چنان از همان مقدار اولیه برای ارتفاع تبعیت می‌کنند.

خب، برگردیم سر ِ بحث ِ اصلی‌مان. برای اُپرا در حالت عادی، دستور اختصاصی وجود ندارد و باید از راه‌هایی که اصولا توصیه نمی‌شود، استفاده کرد. اما هک ِ زیر به ما در این مورد کمک بزرگی می‌کند و می‌‌توانیم خیلی راحت در بین دستورات سی‌اس‌اس، دستورات اختصاصی برای اُپرا بنویسیم:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{

your css codes here..

}

یک مثال هم می‌زنم که کاملا متوجه‌ی ماجرا بشوید. به فرض، می‌خواهیم یک متن که در تگ P قرار دارد را در اُپرا با رنگ سبز نشان دهیم و در مرورگرهای دیگر با رنگ مشکی دیده شود. به این صورت عمل می‌کنیم:

p {
color: #000;
}

کد بالا، متن‌مان را مشکی می‌کند و کاری با نوع مرورگر ندارد.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{

p {
color: #45c705;
}

}

واضح هست؟ با کد بالا گفتیم که متن موردنظر در اُپرا سبز باشد. همین :)

• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس
• آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی‌کوئری
• یک آموزش کوتاه و مهم در سی اس اس – important! چیست؟

پیش نیاز: قبل از هرچیز به کتابخانه ی جی کوئری احتیاج داریم. از اینجا دریافت کنید. (اگر داخل ایران هستید، قادر به دریافت نخواهید بود که در این صورت می توانید از اینجا دریافت کنید).

۱- ایجاد پنجره شناور متنی – نمایش نمونه

برای ایجاد پنجره های شناور متنی، از روش زیر استفاده می کنیم:

ابتدا این اسکریپت را دریافت کنید.

سپس در پرونده HTML ِ خود، در بین تگ head، کدهای زیر را قرار دهید:

<script src="jquery.js" type="text/javascript"></script> 

 <script src="tooltip-text.js" type="text/javascript"></script>

با این کار، کتابخانه جی کوئری و اسکریپتی که دریافت کردید را به صفحه HTML معرفی کردیم.

دستورات سی اس اس زیر را هم اضافه می کنیم:

#tooltip{
position:absolute;
border:1px solid #eee;
background:#f9f9f9;
padding:2px 5px;
color:#999;
display:none;
font: 11px Tahoma;
}

حالا کافی است یک لینک مانند زیر داشته باشیم:

<a class="tooltip" title="یک طراح وب" href="http://aliha.ir/">یک طراح وب</a>

هر لینکی که کلاس ِ آن برابر با tooltip باشد، از این قاعده اطاعت می کند و متنی که در title ِ آن می نویسید را در پنجره شناور نمایش می دهد.

۲- ایجاد پنجره شناور تصویری – نمایش نمونه

اسکریپت آن را از اینجا دریافت کنید.

مانند مثال قبل، کتابخانه جی کوئری و اسکریپت را به صفحه HTML معرفی می کنیم.

حالا دستورات سی اس اس زیر را باید اضافه کنیم:

#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

سپس در پرونده HTML، کدهای زیر را قرار می دهیم:

<ul>
<li><a class="preview" href="1.jpg"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a class="preview" href="2.jpg"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a class="preview" href="3.jpg"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a class="preview" href="4.jpg"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>

همانطور که می بینید، یک لیست از چند تصویر ایجاد کردیم و به لینک شان، کلاس ِ preview دادیم.

پنجره شناور تصویری مان ایجاد شد :) می توانید به لینک های تصاویر، title هم اضافه کنید تا در پنجره شناور، یک توضیح هم نمایش داده شود.

فایل های لازم و مثال های مطرح شده را یکجا و کامل دریافت کنید(۲۵۰ کیلوبایت):

• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• گرادینت متن با سی اس اس
• ای‌جکس بازی » به‌یاد هایپرترمینال
• ای‌جکس‌بازی » بارگذاری محتوای صفحات با جی‌کوئری
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری

این مشکل را با دستور زیر می توان برطرف کرد:

img {
-ms-interpolation-mode: bicubic;
}

این مشخصه از الگوریتم bicubic استفاده می کند و در نتیجه، اینترنت اکسپلورر هم مانند مرورگرهای دیگر، تصاویری که تغییر سایز داده اید را مثل یک آقای خوب نشان خواهد داد :)

• استایل فارسی جدید برای فرندفید و چگونگی استفاده از آن
• چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!
• زمان آن رسیده که مرورگر خود را بروز کنید!
• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید

float: right !important;

زمانی از این عبارت استفاده می کنیم که قرار است به یک عنصر در صفحه، بیش از یک دستور بدهیم. یعنی چی؟ فرض کنید ما می خواهیم یک پوسته ای را فارسی کنیم و استایل آن را راست به چپ کنیم. روش معمول هم برای این کار این است که یک استایل جدا برای آن تهیه کنیم و فقط دستورات ِ قسمت های لازم به فارسی شدن را در آن بنویسیم. در این صورت ما برای بعضی عناصر، دو دستور متفاوت داریم. به همین خاطر برای اینکه مرورگر بفهمد الویت با کدام دستور است، در آخر دستور موردنظر یک important! می گذاریم.

برای درک این قضیه، به این مثال توجه کنید:
فرض کنید ما یک تگ p داریم که دایرکشن اش چپ به راست است:

P {
direction: ltr;
}

حالا در استایلی جدا می خواهیم آن را راست به چپ کنیم:

P {
direction: rtl;
}

حالا ما برای این تگ p دو مقدار lrt و rtl داریم. مرورگر گیج می شود که :) مقدار موردنظر ما همان rtl است پس در آخر آن، یک important! می گذاریم تا مرورگر بی چون و چرا بلافاصله rtl را روی تگ p اجرا کند:

P {
direction: rtl !important;
}

همین دیگر :)

• استایل فارسی جدید برای فرندفید و چگونگی استفاده از آن
• چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!
• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس

حالا اگر ما بیاییم از این روش های خلاصه نویسی استفاده کنیم، تا حدودی می توانیم از این حجیم شدن و شلوغ پلوغ شدن دستورات بکاهیم.

در ادامه ی این پست، فرض ِ من بر این است که شما می دانید سی اس اس دقیقا چیست و کمی آن را بلد هستید :)

برای شروع، یکی از دستورات ساده را انتخاب می کنم:

/*sample 1*/
body {
background: #ccc url(/images/bg.jpg) right fixed no-repeat;
}

این یک نمونه از دستور خلاصه شده است. یعنی ما همه ی مقدارهای لازم را به ترتیب به خاصیت background دادیم. حالا اگر بخواهیم همین دستورها را به صورت معمولی و مفصل بنویسیم، نتیجه می شود ۵ خط کد:

/*sample 2*/
body {
background-color: #ccc;
background-image: url(/images/bg.jpg);
background-position: right;
background-attachment: fixed;
background-repeat: no-repeat;
}

مورد بعدی کمی مهمتر است. خاصیت های margin و padding را در نظر بگیرید. این دو خاصیت معمولا در لا به لای دستورات، زیاد استفاده می شوند. حالا فرض کنید اگر مقدارهای این دو را به صورت مفصل و کامل بنویسید، چقدر به حجم دستوراتتان اضافه می شود!

/*sample 3*/
#content {
margin: 20px 10px 15px 10px;
padding: 10px 5px 10px 5px;
}

این، شکل خلاصه شده ی این دستورات است. درواقع به ترتیب، چهار جهت ِ top، right، bottom و left را در یک خط، مقدار دادیم. برای اینکه ترتیب جهت ها را درک کنید، به مثال زیر توجه کنید:

/*sample 4*/
margin: top / right / botoom / left;

دو روش دیگر برای خلاصه کردن مقدار های padding و margin وجود دارد که اولی به صورت زیر است:

/*sample 5*/
margin: 20px 10px;

این یعنی دو جهت ِ top و botoom دارای مقدار ۲۰px هستند و دو جهت ِ right و left دارای مقدار ۱۰px. متوجه شدید دیگر؟

آخرین روش خلاصه نویسی برای خاصیت های padding و margin به این شکل می باشد:

/*sample 6*/
margin: 20px;

به این معنی که هر چهار جهت ِ top، right، bottom و left دارای مقدار ۲۰px می باشند.
تمامی موارد گفته شده ی بالا در مورد خاصیت padding نیز صدق می کند.

خب، قضیه ی padding و margin دیگر تمام شد. حالا یک روش نسبتا متفاوت را با هم امتحان می کنیم :)

اکثر اوقات پیش می آید که بعضی از عناصری که در صفحه ایجاد می کنیم، یک سری خاصیت های مشترک دارند. مثلا رنگ زمینه ی آنها مشکی است و یا اندازه ی فونت آن ها ۱۲px است و…

در اینجور مواقع ما می توانیم یک بار همه ی این خاصیت ها را برای این گونه عناصر بنویسیم و از تکرار کردن آن ها بپرهیزیم. چگونه؟

فرض می کنیم که ما دو عنصر داریم که قرار هست خاصیت هایشان یکسان و مشترک باشد. عنصر اول، تگ p و عنصر دوم، تگ h3 است. حالا خیلی زیبا و قشنگ، یک بار خاصیت های موردنظر را می نویسیم برای هردو عنصر. اینگونه:

/*sample 7*/
p, h3 {
background: #ccc;
color: #333;
font: 12px Tahoma;
margin: 10px;
padding: 5px;
}

در اینجا ما با گذاشتن یک (,) بین دو عنصر، این منظور را رساندیم که دستورات نوشته شده هم برای تگ p درنظر گرفته شود، هم برای تگ h3. این را هم بگویم که از این روش می توانید برای بی نهایت عنصر استفاده کنید و محدودیتی از این بابت نیست.

موارد اصلی و مهم همین هایی بود که ذکر کردم و فقط دو مورد جزئی می ماند که برای کامل شدن بحث، به آن ها هم اشاره می کنم.

اولی در رابطه با خلاصه کردن کد رنگ است که از ۶ کاراکتر به ۳ کاراکتر تبدیل می شود.

/*sample 8*/
background-color: #cccccc;

در این مثال ما یک رنگ خاکستری ِ روشن تولید کردیم. همانطور که می بینید از ۶ کاراکتر c استفاده کردم. حالا اگر به جای ۶ کاراکتر c فقط از ۳ کاراکتر استفاده کنم، باز همان رنگ خاکستری روشن تولید می شود.

/*sample 9*/
background-color: #ccc;

برای مورد آخر هم به خلاصه نویسی خاصیت فونت می پردازم. مثال زیر، خود گویای همه چیز است:

/*sample 10*/
#content {
font: bold 12px Tahoma;
}

ترتیب ِ قراردادن ِ مقدارها را باید رعایت کنید حتما:

/*sample 11*/
#content {
font: font-style and font-weight / font-size / font-family;
}

خب، بحث مان دیگر تمام شد. چیزی که قابل توجه است این است که من برای تمامی خاصیت هایی که می توان آن ها را خلاصه نویسی کرد اینجا مثال نیاورم. مثل خاصیت border که دیگر این ها را می گذارم به عهده ی خودتان. با کمی حوصله به خرج دادن و الگو برداری از همین مثال هایی که زدم، می توانید برای خاصیت های دیگر هم خلاصه نویسی کنید.

اگر سوالی بود، در خدمت هستم :)

• چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!
• رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » دو
• رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » یک
• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید

راه حل؟
خب همیشه برای هر مشکلی راه حلی هم پیش رو هست. می خواهیم با استفاده از استایلی که آماده کرده ام و انجام دادن چند مرحله ی بسیار ساده ی زیر، بیشترین لذت را از محیط فرندفید ببریم :)

ویژگی های این استایل:
با استفاده از این استایل، قسمت هایی که که در آن ها متن های فارسی قرار می گیرند، کاملا راست به چپ و متناسب با زبان فارسی می شوند. و اگر همزمان از کلمات فارسی و انگلیسی در یک متن استفاده کنید، جمله تان بهم نمی خورد و همان طور که باید نشان داده می شود.
همچنین لوگوی اصلی فرندفید هم که در بالا و سمت چپ قرار دارد، با لوگوی معادل فارسی آن تعویض می شود. (واژه ی “دوست نوشت” را دوست خوبم امیرعباس عزیز انتخاب کرده بود). سعی می کنم برای مناسبت های مختلف مانند عید نوروز، لوگوی متناسب با همان مناسبت را تهیه کنم و جایگزین کنم. البته تعهدی در این مورد نمی دهم چون ممکن است فراموش کنم :دی
مورد بعدی، رنگ سفید زمینه ی فرندفید است که فوق العاده چشم را اذیت می کند. خصوصا اگر مثل من، شب ها هم مشتری فرندفید هستید، بدون شک بارها چشم تان خسته می شود و ممکن است عوارض نامطلوبی هم داشته باشد.
اگر از این استایل استفاده کنید، زمینه ی فرندفیدتان کمی مایل به رنگ طوسی می شود و این امر جلوی درخشش زمینه ی سفید را می گیرد. امیدوارم کم تر چشم تان خسته شود :)
اما چیزی که سعی کردم در نوشتن استایل رعایت کنم، چیدمان اصلی عناصر بود. یعنی قسمت هایی که احتیاجی به راست به چپ شدن نداشتند را تغییری ندادم. مانند قسمت سرصفحه. این امر موجب می شود که تا حدودی فضای جدید فرندفید در این استایل برای تان غریب نباشد و خیلی زود در آن احساس راحتی کنید.

چگونه از این استایل فارسی استفاده کنیم؟
مسلما اولین پیش نیاز شما داشتن مرورگر فایرفاکس است :)
مراحل بسیار ساده و آسان است. ابتدا افزونه ی Stylish را در فایرفاکس ِ خود نصب کنید. بعد از نصب، فایرفاکس را ری استارت کنید. سپس به این صفحه بروید و مانند تصویر زیر، در قسمت Install Options روی Load into Stylish کلیک کنید. در پنجره ی باز شده روی Save کلیک کنید.
حالا وارد فرندفید ِ خود شوید و لحظات خوشی در کنار دوستان تان داشته باشید :)

نکته: اگر از استایل های دیگری برای فرندفید استفاده می کنید، یادتان باشد که غیر فعال اش کنید تا این استایل به درستی کار کند!

پس نوشتت ۱: استایل به روز شد و اشکالاتی که داشت همگی برطرف شدند و کدهای آن نیز بهینه تر شد! (+)

و کلام آخر اینکه به هرحال ممکن است نواقصی در کار وجود داشته باشد. اگر با مشکلی برخورد کردید و یا حتی پیشنهادی برای بهتر و بهینه تر شدن استایل داشتید، حتما به بنده اطلاع دهید. یا در همین جا لطف کنید و کامنت بگذارید و یا مرحمت کنید و ایمیل بزنید :)

من در فرندفید

• یک آموزش کوتاه و مهم در سی اس اس – important! چیست؟
• چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!
• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس

۱٫ فلش
۲٫ جاوا اسکریپت
۳٫ سی اس اس

ابتدا اجازه بدید هرکدام از این روش ها را بررسی کنیم و ببینیم کدام روش اصولی تر و کاربردی تر می باشد.

۱٫ فلش: لازمه ی استفاده از این روش در مرحله ی اول تسلط کافی بر فلش است و باید کار با فلش را بلد بود تا بتوان منوهای جالب ایجاد نمود. البته نرم افزارهایی مانند “۱۲۳ flash menu” در این زمینه ارائه شده اند که منوهایی از پیش طراحی شده را در اختیار کاربر قرار میدهند و با استفاده از ابزارهایی که در خود گنجانده اند، امکان ویرایش منوها را به کاربر میدهند. یکی از معایبی که منوهای فلش دارند، ایندکس نشدن محتوای آن ها در موتورهای جستجوگر میباشد که البته اخیرا گوگل این مشکل را برطرف کرده و محتوای فایل های فلش اعم از همین منوها را نیز ایندکس می کند و این مورد تا حدودی مشکلات سئو را برطرف میکند.

۲٫ جاوا اسکریپت: بگذارید یک چیزی را همینجا بگویم! اگر میخواهید منوهای سایتتان با جاوا اسکریپت باشد، تاکید می کنم که اگر می توانید، خودتان آن را کدنویسی کنید وگرنه از کدهای آماده بپرهیزید، چرا که اگر با مشکلی رو به رو شوید، هرگز نمیتوانید مشکلتان را برطرف کنید، مگر اینکه از کسی کمک بگیرید!

۳٫ سی اس اس: در این بین، تنها منوهایی که با استفاده از سی اس اس ایجاد میشوند، از نظر سئو و ایندکس شدن کاملا بهینه و اصولی می باشند! چرا که محتوای این منوها در پرونده ی اکس اچ تی ام ال موجود است. و البته ایجاد و کدنویسی آن در مقایسه با فلش و جاوا اسکریپت، به نسبت راحت تر می باشد. اما خب مشکل دیگری که سر راه مان قرار می گیرد، عدم پشتیبانی مرورگری مثل IE (نسخه ی ۶ به پایین) از این روش است! در ادامه توضیحات بیشتری در این زمینه می دهم و البته راه حل این مشکل را هم به زودی و در مقاله ای جداگانه منتشر خواهم کرد!

چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

خب، چیزهایی که لازم داریم، اینها هستند: یک فایل سی اس اس، یک فایل اکس اچ تی ام ال و یک ویرایشگر متن، مثلا نوت پد ویندوز.
برای ساختن فایل سی اس اس، می توانید یک فایل متنی ایجاد کنید و پسوند آن را به css تغییر دهید و ترجیحا نام فایل را style بگذارید. یعنی در نهایت بشود:

style.css

ساختید فایل رو؟! خب، حالا بریم سراغ کدنویسی…
فایل سی اس اسی رو که ساختید، با کمک یک برنامه ی ویرایشگر متن، باز کنید.
ما باید با کمک لیست ها این منو را طراحی کنیم. فقط کافیست کمی با تگ های ul و li، بازی کنیم. پس در ابتدا یک سلکتور با نام nav می نویسیم و پدینگ و مارجین ِش رو صفر میکنیم و به list-styleش هم مقدار none می دیم:

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

حالا یک اینتر بزنید و برید خط بعدی… اینبار باید به تگ li ای که در nav قرار می گیرد، دستورات زیر را بدهیم:

#nav li {
float: right;
position: relative;
width: 90px;
height: 20px;
background-color: #f6f6f6;
color: #f75801;
font: bold 70% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
direction: rtl;
border: 1px solid #e1e1e1;
text-align: center;
padding-top: 5px;
}

به خاصیت float مقدار right دادیم، چون می خواهیم منو در قسمت راست صفحه و به صورت شناور قرار بگیره.
دوباره اینتر بزنید و برید خط پایین. این دستوری که می خواهیم بنویسیم، برای این هست که وقتی کرسر موس رفت روی عناوین منو، رنگ زمینه اش تغییر کند:

#nav li:hover {
background-color: #f1ff96;
}

باز هم اینتر بزنید. دستورات زیر هم وضعیت ظاهری لینک ها را تعیین می کنند:

#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
color: #868584;
}
#nav a:hover, #nav a:active {
display: block;
text-decoration: none;
color: #f75801;
}

اینتر لطفا! قسمت مهم اینجاست. باید محتوای منو (یعنی همان زیرمنو) را مخفی نگه داریم تا زمانی که کرسر موس رفت روی عناوین منو:

#nav ul {
display: none;
position: absolute;
padding-top: 7px;
}

خاصیت display که با none مقداردهی شده، درواقع دستور میدهد که قسمت زیر منو، مخفی و غیر قابل نمایش بماند!
اینتر بزنید باز هم! خب، حالا باید کمی ظاهر زیرمنو را سبک دهی کنیم. به زمینه و حاشیه اش رنگی بدهیم و موقعیتش را جمع و جور کنیم:

#nav ul li {
float: none;
border: 1px solid #dded6f;
background-color: #f1ff96;
font-size: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
}

اینتر فراموش نشه! باز هم با دستور زیر، رنگ زمینه ی گزینه های زیر منو ها را در زمان حرکت کرسر موس روی آن ها، تعیین می کنیم:

#nav ul li:hover {
background-color: #f9ffcf;
}

آخرین اینتر را بزنید که می خواهیم یک کار قشنگ بکنیم:) یادتان که هست چند خط بالاتر، دستور مخفی کردن زیرمنوها را دادیم؟! حالا باید دستور بدهیم که هر زمان کرسر موس روی یکی از عناوین منو رفت، بی چون و چرا زیرمنوی آن نمایش یابد! فقط کافیست بگوییم:

#nav li:hover ul {
display: block;
}

زیبا نیست؟! خب، فایل سی اس اس تان تکمیل شد. حالا برویم سراغ فایل اکس اچ تی ام ال! خسته که نشدید خدای ناکرده؟!
فایل اکس اچ تی ام ال را بسازید. برای ساختن آن مانند ساختن فایل سی اس اس عمل کنید و نام فایل را بگذارید menu. یعنی باید بشود:

menu.htm یا menu.html

خب. اول کدهای مربوط به هدر را می نویسیم:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>creating menus with CSS | Demo!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

حالا تگ بدنه رو باز می کنیم و لیست مورد نظر رو ایجاد می کنیم و سلکتور nav رو بهش نسبت می دهیم و بعد از اون، عناوین و زیرمنوها رو اضافه می کنیم:

<body>
<ul id="nav">
<li><a href="#">رنگ ها</a>
<ul>
<li><a href="#">آبی</a></li>
<li><a href="#">سبز</a></li>
<li><a href="#">نارنجی</a></li>
</ul>
</li>
<li><a href="#">آموزش ها</a>
<ul>
<li><a href="#">سی اس اس</a></li>
<li><a href="#">پی اچ پی</a></li>
<li><a href="#">جی کوئری</a></li>
</ul>
</li>
</ul>
</body></p>

واضح هست دیگه؟! در اینجا ما یک منو، دو عنوان به نام های “رنگ” و “آموزش ها” و برای هر عنوان، سه زیرمنو داریم. در آخر هم تگ html را ببندید!

پشتیبانی از این روش
همون طور که در ابتدا هم گفتم، این روش در نسخه ها ی ۶ و پایین تر ِ مرورگر IE پشتیبانی نمی شود و کار نمی کند! دلیلش هم روشن است. ما برای این کار از خاصیت hover استفاده کرده ایم که این نسخه ها از مرورگر IE (یعنی نسخه های ۶ به پایین) خاصیت hover را فقط برای لینک ها می شناسند و برایشان جای تعجب دارد که بخواهید با استفاده از خاصیت hover، مثلا متنی را ظاهر و یا مخفی کنید! اما از IE7 به بعد این مشکل رفع شده و این منویی که ایجاد کردیم به درستی کار خواهد کرد. سعی می کنم به زودی مقاله ای را در این رابطه منتشر کنم و در آن به حل این مشکل پردازم. یعنی این منو بتواند در IE6 و حتی پایین تر هم کار کند!

کمک ها
اگر انجام مراحل بالا برایتان مشکل است، می توانید فایل اکس اچ تی ام ال و سی اس اس آماده ی این منو را از اینجا دریافت نمایید.
برای دیدن دموی این منو نیز به این صفحه مراجعه فرمایید.

• روش های خلاصه نویسی در سی اس اس
• رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » دو
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• یک آموزش کوتاه و مهم در سی اس اس – important! چیست؟
• استایل فارسی جدید برای فرندفید و چگونگی استفاده از آن