چگونه طرح های فتوشاپ را به CSS تبدیل کنیم

[alireza1375 892]

امروزه کمتر کسی است که نام فتوشاپ را نشنیده باشد. فتوشاپ نه تنها یک ابزار محبوب برای ویرایش تصاویر است، بلکه بسیاری افراد از این نرم افزار برای طراحی ظاهر وب سایت ها استفاده می کنند. تنوع امکانات و افکت ها یکی از بزرگترین مزایای این نرم افزار شرکت ادوبی است.

شما به عنوان طراح وب سایت، پس از آماده شدن طرح نهایی چگونه آن را به HTML و CSS تبدیل می کنید؟ در ادامه مطلب قصد داریم ابزار مفید و البته رایگانی را معرفی کنیم که با یک کلیک دستورات سی اس اس را محاسبه و تولید می کند.

پلاگین CSS3Ps

CSS3Ps پلاگینی رایگان برای فتوشاپ است که به کمک سرویس ابری خود، وظیفه تبدیل لایه های فتوشاپ به سی اس اس را بر عهده دارد. این پلاگین را می توانیم در فتوشاپ با حداقل نسخه CS3 استفاده کنیم.

تا لحظه نگارش این مطلب، CSS3Ps قادر است تبدیل های زیر را انجام دهد. (خوشبختانه این پلاگین به روز رسانی مناسبی دارد)

نکته خوب این است که CSS3Ps همزمان با تولید دستورات، پیشوندهای مورد نیاز برای مرورگرهای مختلف را نیز در خروجی نهایی قرار می دهد.

به عنوان مثال، تصمیم داریم لایه ای که در تصویر زیر مشخص شده است را با استفاده از CSS3Ps به دستورات سی اس اس تبدیل کنیم.

در ابتدا فایل مربوط به پلاگین را از

وب سایت CSS3Ps دانلود و آن را به فتوشاپ اضافه می کنیم.

برای تبدیل کافی است لایه مورد نظر را انتخاب و روی دکمه مربوطه در پنل CSS3Ps کلیک کنیم.

نکته: پنل CSS3Ps را می توانید از منوی window > Extensions فعال کنید.

پس از آن به صورت خودکار به وب سایت CSS3Ps وارد شده و سیستم کدهای نهایی را تولید می کند.

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

controls base
{
width: 500px;
height: 40px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: rgba(34,36,38,.9);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15);
box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15);
border: solid 1px #000;
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
background-image: -o-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
background-image: linear-gradient(to top, rgba(0,0,0,.35), rgba(255,255,255,.35));
}

همانطور که مشاهده می کنید، CSS3Ps بسیار هوشمندانه عمل کرده و حتی opacity لایه را با استفاده از دستور rgba تولید کرد.

ویرایش شده خرداد 92 توسط alireza1375

[Parsa 23463]

تبدیل به آموزش شد

ممنون

بایگانی