• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
alireza1375

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

2 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

xpsd-to-css3-cover-olomrayaneh.org_.jpg

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

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

پلاگین CSS3Ps

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

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

xCSS3Ps-1-olomrayaneh.org_.jpg

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

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

xpsd-transparent-bar-olomrayaneh.org_.jpg

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

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

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

xpsd-layer-olomrayaneh.org_.jpg

نکته: پنل 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 تولید کرد.

ویرایش شده در توسط alireza1375
5

به اشتراک گذاری این پست


لینک به پست

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

ممنون

بایگانی

2

به اشتراک گذاری این پست


لینک به پست
مهمان
این موضوع برای عدم ارسال قفل گردیده است.