این اولین مطلبی هست که دارم از وبلاگم منتشر میکنم و امیدوارم که خوشتون بیاد.
شاید تو خیلی از سایت ها دیده باشین که یک نوشته (مثلا عنوان سایت در سربرگ) حالت سه بعدی داشته باشه و براتون سوال پیش اومده باشه که چطوری به نوشته بعد دادن ؟ .
در پاسخ به این سوال باید بگم با استفاده از text-shadow در css براحتی میشه این کار رو کرد.
در پایان آموزش شما قادر به ساخت چنین متنهایی خواهید بود.
خب بریم سراغ آموزش
برنامه مورد نیاز : ویرایشگر ساده متن .(من از notepad++ استفاده کردم ، شما هم هرچی دوست داشین استفاده کنین. مثل notepad ، aptana Studio , dreamweaver)
اول از همه یه فایل Html باز کنید.
حالا متنی رو که میخواین بهش بُعد بدین رو بنویسین . مثلا من نوشتم : "آموزش بعد دادن به تصاویر"
اینطوری
<h1> آموزش بعد دادن به تصویر </h1>
حالا بریم بهش یه استایل بدیم تا متن اونجوری که میخوایم بشه
h1{
font-family:tahoma;
color:#fff;
text-shadow:0px 1px 0px rgb(153, 153, 153), 0px 2px 0px rgb(136, 136, 136), 0px 3px 0px rgb(119, 119, 119), 0px 4px 0px rgb(102, 102, 102), 0px 5px 0px rgb(85, 85, 85), 0px 6px 0px rgb(68, 68, 68), 0px 7px 0px rgb(51, 51, 51), 0px 8px 7px rgb(0, 17, 53);
}
به همین سادگی !!!
مهمترین چیزی که توی این آموزش باید بدونین اینه که چطوری از text-shadow پشت سر هم استفاده کنین.
چند خط برای اونایی که تازه دارن css رو یاد میگیرن و هنوز با دستوراتش بطور کامل آشنا نیستن:
- در استایل بالا h1 یک سلکتور است.
- از خاصیت font-family برای تغییر دادن فونت سلکتور استفاده میشود.
- از خاصیت color برای تغییر رنگ نوشته استفاده میشود.
- از خاصیت text-shadow برای سایه دادن به متن استفاده میکنن.
