با در این مقاله می خواهیم یک برنامه تحت وب ساده رو معرفی کنیم که شبیه کادرهای تنظیمات نرم افزار معروف فتوشاپ طراحی شده است. به عنوان یک طراح وب اگر با فتوشاپ آشنایی داشته باشید می توانید از همان دانش فتوشاپ تان برای ایجاد یک سری از کدهای CSS هم استفاده کنید.
اسم این وب سایت LayerStyles است که همان کادر ویرایش خصوصیات لایه ها در Photoshop را شبیه سازی کرده است و شما با کشیدن و رها کردن در هر بخش می توانید کدهای CSS مربوط به اون بخش رو تولید کنید.
اگر به صفحه builder آن مراجعه کنید می توانید سریع و راحت با نحوه کار آن آشنا شوید.این پنجره شامل 5 بخش مختلف است که دقیقا سعی شده مثل فتوشاپ باشند و با همان کارکرد.هر تغییری که روی این بخش ها انجام دهید روی کادر موجود در صفحه اعمال می شود و می توانید به زنده نتیجه کار را ببینید و در صورت رسیدن به نتیجه دلخواه تان کدها را کپی و استفاده کنید.
بعد از پایان کار کافیست روی دکمه سیاه رنگ پایین صفحه “CSS Code” کلیک و کدها را کپی کنید.
این پروژه اپن سورس بوده و به صورت کامل در Github در دسترس است و می توانید کدهای اصلی آن را ببینید دانلود کنید و حتی به صورت لوکال روی کامپیوترتان استفاده کنید.
