ایجاد دکمه های 3d در طراحی سایت

[elham1388]

استفاده از زبان CSS افکت های بصری زیبایی را در طراحی وب سایت برای ما به ارمغان می آورد. ایجاد کلید های سه بعدی که تنها به صورت یک متن ساده است موجب جذابیت بیشتر سایت ما از دید کاربران خواهد شد که این خود به نوعی در سئو سایت تاثیر مثبت خود را خواهد گذاشت. در این مقاله ما سعی بر توضیح جامعی از پروسه کار را فراهم می آوریم. در واقع دو متد برای انجام این افکت برای کلیدها وجود دارد.
1- استفاده از "Inset" و "Outset" در حاشیه استایل در CSS
ساده ترین روش برای ایجاد افکت های 3D استفاده از کدهای CSS در طراحی سایت ما می باشد. قطعه کد زیر توضیحی برای انجام این روش می باشد.




#tswcssbuttons li a {
color: #000 ;
background-color: #ffb200 ;
border: 1px outset #b37d00 ;
width: 180px ;
text-decoration: none ;
display: block ;
}





قطعه کد "border: 1px outset #b37d00 ;" مشخص می کند که ضخامت حاشیه باید یک پیکسل باشد، با کد رنگ "#b37d00" و خصیصه "outset".خصیصه "outset" موجب می شود که حاشیه از صفحه وب بیرون زده شود. CSS همچنین خصیصه ای بنام "inset" دارد که موجب می شود کلیدها به صورت عمیق تری در طراحی سایت ما مشاهده شوند.اگر ضخامت حاشیه را افزایش دهید خواهید دید که افکت به صورت برجسته تری قابل نمایش خواهد بود. البته باید اشاره نمود که نسخه های قدیمی مرورگرها این افکت ها را پشتیبانی نمی کنند.
برای مثال فرض کنید که شما در صدد هستید دکمه "Home" را ایجاد نمایید.




color: black ;
background-color: #ffb200 ;
border: 1px outset #b37d00 ;




2- تعیین دستی 4حاشیه برای نمایش دکمه با ایفکت 3D
روش دیگر مشخص نمودن رنگ هر یک از 4 حاشیه بالا،پایین،چپ و راست به صورت دستی می باشد. قطعه کد زیر توضیحی بر این متد می باشد.




div.button {
color: black ;
background-color: #9cf ;
border-top: 1px solid #c0ffff ;
border-right: 1px solid #00f ;
border-bottom: 1px solid #00f ;
{ border-left: 1px solid #c0ffff ;


منبع: طراحی سایت ([Only registered and activated users can see links])