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 GreenSkin . Ir
</p>
</div>در اینجا همونطور که میبینید آی دی (ID) مورد نظر ما که در DIV معرفی شده warpper است . و متن های موردنظر ما در تگ های <H1> و <P> قرار دارد .
حالا نوشته سه بعدی ما ایجاد شده است و می توانیم از آن استفاده کنیم و لذت ببریم …..