آموزش بُعد دادن به یک متن با استفاده از css

  • نویسنده موضوع HamedR
  • تاریخ شروع

HamedR

کاربر عضو
شاید تو خیلی از سایت ها دیده باشین که یک نوشته (مثلا عنوان سایت در سربرگ) حالت سه بعدی داشته باشه و براتون سوال پیش اومده باشه که چطوری به نوشته بعد دادن ؟ .

در پاسخ به این سوال باید بگم با استفاده از text-shadow در css براحتی میشه این کار رو کرد.

در پایان آموزش شما قادر به ساخت چنین متنهایی خواهید بود.

You must be registered for see images attach


خب بریم سراغ آموزش

برنامه مورد نیاز : ویرایشگر ساده متن .(من از notepad++ استفاده کردم ، شما هم هرچی دوست داشین استفاده کنین. مثل notepad ، aptana Studio , dreamweaver)

اول از همه یه فایل Html باز کنید.

حالا متنی رو که میخواین بهش بُعد بدین رو بنویسین . مثلا من نوشتم : "آموزش بعد دادن به تصاویر"

اینطوری


کد:
<h1>آموزش بعد دادن به تصویر با استفاده از css </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 برای سایه دادن به متن استفاده میکنن.



 
آخرین ویرایش توسط مدیر:
بالا