• اطلاعیه ها

    • Saeed Fard

      حمایت وردپرس پارسی از همایش آینده وب و موبایل   19/04/74

        چهارم و پنجم اسفند ماه 1395، همایش آیندهٔ وب و موبایل ایران با حمایت سازمان فناوری اطلاعات در مرکز همایش‌های شهید قندی برگزار خواهد شد. این همایش یک رویداد ۲ روزه است که در آن پیشتازان صنعت وب و موبایل از تکنولوژی‌های روز دنیا در این حوزه‌ها سخن می‌گویند به طوری که این همایش پنجره‌ای به چشم‌انداز آینده‌ٔ وب و موبایل در جهان، و همچنین راهنمایی برای تصمیم‌گیران، تصمیم‌سازان و متخصصان ایرانی است.   فرصت‌هایی که FOWM#  برای شما خلق خواهد کرد: آشنایی با تکنولوژی‌های آینده‌ساز وب و موبایل شرکت در مباحث چالشی درباره وب و موبایل ارتباط و شبکه‌سازی با “قله‌های وب و موبایل” موقعیت‌های کاری، هم‌تیمی‌های جدید دریافت گواهی شرکت در همایش دو روز به‌یادماندنی سرشار از شگفتی   شرکت‌کنندگان در این همایش ضمن آشنایی با فناوری‌های آینده‌ساز وب و موبایل، شرکت در مباحث چالشی و ارتباط با بزرگان وب و موبایل ایران، می‌توانند موقعیت‌های کاری و هم‌تیمی‌های جدید برای کسب‌وکار خود بیابند. این همایش برای طراحان و توسعه‌دهندگان وب‌سایت و موبایل، مدیران ارشد سازمان‌ها، صاحبان کسب‌وکارهای کوچک و متوسط، دانشجویان و علاقه‌مندان دارای نکات آموزشی و جذاب خواهد بود.   مجید علوی‌زاده، دبیر همایش آیندهٔ وب و موبایل که سابقه اجرای چند همایش و سمینار مرتبط را دارد، اعلام کرد: جمعی از بهترین‌ها و پیشروان این دو حوزه در ایران با ارائه‌های تخصصی خود، چشم‌انداز آینده این صنعت‌ها را به شرکت‌کنندگان عرضه خواهند کرد.   در هر یک از روزهای برگزاری همایش، یک پنل تخصصی در مورد یکی از موضوع‌های مهم این حوزه نیز برگزار خواهد شد و دست‌اندرکاران به بحث و تبادل نظر خواهند پرداخت و در پایان، به شرکت‌کنندگان گواهی حضور در همایش اعطا خواهد شد.   ثبت نام در مهمترین رویداد صنعت وب و موبایل ایران تا پایان بهمن ماه ۹۵ امکان پذیر خواهد بود، برای ثبت نام و یا کسب اطلاعات بیشتر در خصوص این رویداد و آشنایی با موضوعات و سخنرانان به آدرس http://conf.wsschool.org/fowm مراجعه نمایید.   کاربران وردپرس پارسی می‌توانند با استفاده از کد wp-parsi از مبلغ ۴۰ هزار تومان تخفیف در ثبت نام برخوردار شوند.
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

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


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

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

ممنون

بایگانی

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


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