تبلیغات
دغدغه|طراحی حرفه ای قالب هدر بنر لوگو،تفریح و دانلود - ایجاد یک متن ۳بعدی با استفاده از CSS3




پکیج کامل شانه لیزری پاور گرو
تبلیغات
Ferends
هنزفری تغییر صدا
موضوعات
Category
تبلیغات
Ferends
لیزر انگشتری بیمز
دوستان+3
Ferends
تبلیغات
Ferends
عروسک پرنده خشمگین
لینک دونی
linkdaily
تبلیغات
Ferends
بلوتوث هوشمند ماشین
آمار سایت
Site info

Check Google Page Rank
ما رو در الکسا ببینید!
Ferends
حمایت میکنیم
Ferends
آخرین مطالب ارسالی
Last Posts
آرشیو
Archiv
لینک باکس
tags
مطالب موجود در این لینک باکس ها به هیچ وجه مورد تایید ما نمی باشد

مطالب برتر
tags
تبلیغات
tags
برچسب ها
tags
لینک باکس

مطالب موجود در این لینک باکس به هیچ وجه مورد تایید ما نمی باشد

گروه صنعتی فرش پاتریس تهران

تولید کننده انواع پشتی های سلطنتی و اعلاء و قابل شستشو
تولید کننده پشتی های crx _ hcp
آدرس : کاشان - بلوار قطب راوندی
شماره تماس:09131632129
تبلیغات

ایجاد یک متن ۳بعدی با استفاده از CSS3 - شنبه 19 فروردین 1391
 دسته بندی : کد زیباساز وب،


CSS3 واقعا یک قدرت خارق العاده هست! باور کنید! باعث شده که طراحان در طراحی وب از فتوشاپ کمتر استفاده کنند . نمونه بارز این کار استفاده از سایه می باشد . با استفاده از آموزش امروز با کمک ترفند های سایه و کمی کد نویسی می توانید یک متن سه بعدی رو با استفاده از CSS3 بوجود بیاورید.
البته مثل همیشه اینترنت اکسپلورر ! که از همه عقب تره توانایی نمایش این سری کد CSS رو نداره .  [...]


برین ادامه مطلب...
منبع:ام گرافیک

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

در ابتدا در css ( استایل ) برای سه بعدی شدن متن خود ویژگی های زیر را در آی دی(ID) یا کلاس (class) مورد نظر قرار می دهیم . ( ما در اینجا آی دی “wrapper” را انتخاب کردیم ) . برای هر چه طبیعی و زیبا تر شدن کار خود در آی دی wrapper از دو تگ (TAG)  مختلف (h1 , p) استفاده کردیم . در واقع تفاوت این دو تگ فقط در سایز فونت نوشته های آنها می باشد .

 

#wrapper h1{
 font:normal 60pt Arial;
 color:#FFFFFF;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}

#wrapper p{
 font:normal 40pt Arial;
 color:#FFFFFF;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}

 

حالا کافیست در قسمتی از کد HTML خود که می خواهیم نوشته سه بعدی با ویژگی های تعریف شده ی بالا نشان داده شود کافیست با استفاده از کدی مشابه کد زیر آِی دی و تگ مورد نظر خود را فراخوانی کنیم .


<div id="wrapper">
 <h1>3D TEXT</h1>
 <p>This works well with major Browsers like FireFox, Opera, Safari and Chrome however does not work with Internet Explorer!
By Graweb . Ir
</p>
</div>

 

در اینجا همونطور که میبینید آی دی (ID) مورد نظر ما که در DIV معرفی شده warpper است . و متن های موردنظر ما در تگ های <H1> و <P> قرار دارد .

حالا نوشته سه بعدی ما ایجاد شده است و می توانیم از آن استفاده کنیم و لذت ببریم …..

 

منبع : این آموزش نوشته شده توسط دوست خوبم آقای مهدی دستمرد در گراوب می باشد .


نویسنده : محمد بهنام نیا *مدیر وب*   نظرات |