ایجاد کدهای CSS با شبیه ساز Photoshop

تبلیغات
کانال تلگرام فتولیا

در این مقاله می خواهیم یک برنامه تحت وب ساده رو معرفی کنیم که شبیه کادرهای تنظیمات نرم افزار معروف فتوشاپ طراحی شده است. به عنوان یک طراح وب اگر با فتوشاپ آشنایی داشته باشید می توانید از همان دانش فتوشاپ تان برای ایجاد یک سری از کدهای CSS هم استفاده کنید.

اسم این وب سایت  LayerStyles است که همان کادر ویرایش خصوصیات لایه ها در Photoshop را شبیه سازی کرده است و شما با کشیدن و رها کردن در هر بخش می توانید کدهای CSS مربوط به اون بخش رو تولید کنید.

اگر به صفحه builder آن مراجعه کنید می توانید سریع و راحت با نحوه کار آن آشنا شوید.این پنجره شامل ۵ بخش مختلف است که دقیقا سعی شده مثل فتوشاپ باشند و با همان کارکرد.هر تغییری که روی این بخش ها انجام دهید روی کادر موجود در صفحه اعمال می شود و می توانید به زنده نتیجه کار را ببینید و در صورت رسیدن به نتیجه دلخواه تان کدها را کپی و استفاده کنید.

بعد از پایان کار کافیست روی دکمه سیاه رنگ پایین صفحه “CSS Code” کلیک و کدها را کپی کنید.

این پروژه اپن سورس بوده و به صورت کامل در Github در دسترس است و می توانید کدهای اصلی آن را ببینید دانلود کنید و حتی به صورت لوکال روی کامپیوترتان استفاده کنید.

در همین رابطه :   آشنایی با CSS و شروع کار با آن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in CSS
آموزش ساده کشیدن مثلت در CSS با دستور Clip-Path!

احتمالا تا به حال نیاز به طراحی نشانگرها نوک بالا، حباب های نقل قول یا سایر المنت های نوک تیز...

Close