• اطلاعیه ها

    • Saeed Fard

      آگهی استخدام برنامه نویس و پشتیبان وردپرس   13/12/95

      آگهی استخدام برنامه نویس و پشتیبان وردپرس
       
      2 نفر پشتیبان سایت وردپرسی
      ⁃ آشنا به برنامه نویسی قالب و پلاگین وردپرس 
      ⁃ توانایی راه اندازی سایت، قالب و افزونه های وردپرسی 
      ⁃ توانایی برنامه نویسی PHP در حد متوسط 
      ⁃ اطلاعات عمومی وب بالا 
      ⁃ توانایی پاسخگویی نوشتاری به سوالات انگلیسی با گرامر ساده 
      ⁃ آشنایی با HTML/CSS/jQuery 
      ⁃ دارای روحیه کار تیمی، خلاق، مسئولیت‌پذیر و پشتکار بالا ——— ۲ نفر برنامه نویس قالب وردپرس
      ⁃ تسلط به HTML/CSS/jQuery و Bootstrap
      ⁃ توانایی تبدیل HTML به قالب وردپرس
      ⁃ توانایی برنامه نویسی PHP و پلاگین نویسی وردپرس در حد متوسط
      ⁃ آشنایی به اصول سئو 
      ⁃ آشنایی با Git/subversion مزیت محسوب می‌شود.
      ⁃ دارای روحیه کار تیمی، خلاق، مسئولیت‌پذیر و پشتکار بالا ——— ۱ نفر طراح UI/UX
      ⁃ طراحی خلاقه وب سایت
      ⁃ طراحی با جدیدترین استایل‌های طراحی سایت
      ⁃ مسلط به تایپوگرافی انگلیسی و طراحی وب سایت انگلیسی
      ⁃ انتقاد پذیری و قبول بازخوردهای تیم و مشارکت با دیگر اعضاء تیم برای سرعت بخشیدن به فرایند انجام پروژه
      ⁃ آشنایی و درک HTML/CSS/jQuery
      ⁃ دارای روحیه کار تیمی، خلاق، مسئولیت‌پذیر و پشتکار بالا
      ⁃ امکان همکاری به صورت پروژه‌ای و دورکاری در این موقعیت شغلی فراهم است ——— مزایای کار در مجموعه گرودیا
      ⁃ تجربه ناب کار در سطح یک جهانی
      ⁃ محیط کار بسیار دوستانه و آرام
      ⁃ پرداخت های مناسب و سر وقت
      ⁃ کلاس های آموزشی داخلی به جهت بالا بردن دانایی و توانایی همه اعضا   از علاقه‌مندان و نیازمندان تقاضا می‌شود لطفا رزومه کاری خود را با قید موقعیت شغلی به ایمیل info@grodea.co ارسال نمایید.
    • Morteza

      سال 1396 خورشیدی مبارک   29/12/95

      سال 1396 خورشیدی مبارک
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

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


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

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

ممنون

بایگانی

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


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