دسته‌ها
طراحی وب وب

نسل آینده سی‌اس‌اس

توی کنفرانس امسال گوگل Chrome Dev Summit 2019 معرفی نسل بعدی استایل سایت‌ها با css رو داشتیم. یه اجرای خیلی خوب که می‌تونین اینجا ببینین. یه خلاصه‌ایش رو براتون اینجا نوشتم که البته بهتره ویدیو رو هم ببینین چون توضیحات و دموی بعضی چیزها مثل توضیحات Houdini و Paint API که خیلی هم جذاب بود رو بهتره توی ویدیو ببینین.

CSS Scroll Snapping

ساپورت در مرورگرها:

سی اس اس snap تقریبا برای تمام سایت‌هایی که طراحی می‌کنیم به کارمون میاد، ساپورت خوبی داره و در حال حاضر بیشتر مرورگرهای بازار می‌تونن درست نمایش بدنش. با استفاده از css snap میتونیم اسلایدر تصاویر صفحه محصولات یه اسلایدرهای مطالب ویژه‌ی بالای سایت رو بدون نیاز به جاوااسکریپت و جی‌کوئری و … سبک‌تر و سریع‌تر پیاده‌سازی کنیم.

.slider { scroll-snap-type: x mandatory; }

دموی زیر رو ببینید. میتونین کد رو تغییر بدین و باهاش بازی کنین تا دستتون بیاد که وضعیت به چه شکله. سعی کنین ببینین می‌تونین جهت اسکرول رو عمودی کنین؟

See the Pen CSS Snap by Siavash (@siavashh) on CodePen.

element:focus-within

ساپورت مرورگرها:

در طراحی منو سایت‌ها وقتی که از لیست‌های تو در توی ul و li استفاده می‌کنیم، معمولا از hover و focus استفاده می‌کنیم. با کلیک کردن روی لیست‌های داخل parent استایل فوکوس ما از parent برداشته میشن. با استفاده از focus-within میتونیم این مشکل رو حل کنیم. در یک مثال دیگه که می‌تونین در زیر ببینین، ما وقتی فوکوسمون رو روی هرکدوم از child قرار می‌دیم می‌تونیم parent رو با استفاده از focus-within استایل کنیم. دموی زیر رو ببینید:

See the Pen CSS :focus-within by Siavash (@siavashh) on CodePen.

writing-mode

به تصویر زیر نگاه کنید، روش ما در سی‌اس‌اس همیشه همین بوده، چپ بالا راست پایین. این نگاه انگلیسی یا چپ به راست دیفالتیه که از اول باهاش آشنا شدیم:

دیدگاه قدیمیِ همیشگی در سی‌اس‌اس

حالا تصویر زیر رو ببینین:

دیدگاه جدید در طراحی سی‌اس‌اس

اگه تا حالا سعی کرده باشین تمپلیتی رو راست‌چین کرده باشین حتما براتون سوال پیش اومده که کاش به جای این همه فاصله و margin و padding که چپ و راستش رو باید برعکس کنین، میشد که خود مرورگر بفهمه که زبان راست به چپه و همه چیز رو خودش هندل کنه، این مشکل توی سی‌اس‌اس همیشه بوده و مثلا در استایل کردن اپ‌های native موبایل و تو برنامه‌نویسی اندروید و آی‌او‌اس این مساله حل شده بود. مثلا برای فاصله متن از ابتدای یک بلاک در اندروید لازم نیست تو یک فایل استایل marginLeft بدیم و تو فایل مخصوص زبان راست به چپ marginLeft، راه درست اینه که ما به صورت اتوماتیک با توجه به زبان اپ فاصله رو از ابتدای بلاک در نظر بگیریم و از marginStart استفاده کنیم.

حالا در سی‌اس‌اس هم میشه همین کار رو کرد. ما دیگه به جای مفاهیم چپ و راست با مفاهیم ابتدا و انتها طرف خواهیم بود. و با مرسوم شدن این روش کم‌کم تمامی تمپلتها به صورت اتوماتیک برای زبان‌های مختلف به درستی نمایش داده می‌شوند. فقط کافیه ما مقدار writing-mode رو تغییر بدیم به جهت زبان مورد نظرمون که حتی ممکنه به صورت ستونی از بالا به پایین مثل زبان ژاپنی باشه. همینطور ما دیگه با مفهوم height و width طرف نخواهیم بود. ما دیگه به جای ارتفاع و عرض با block-size و inline-size طرفیم. با استفاده از این مقادیر به جای height و width دیگه با تغییر direction نوشتاری ما، باکس‌ها به هم نمی‌ریزن و به صورت اتوماتیک تشخیص می‌دن که منظور ما چیه!

این مطلب موزیلا رو در مورد writing-mode بخونین تا بهتر درکش کنین، بعدها قطعا به دردتون میخوره

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

backdrop-filter

ساپورت مرورگرها:

ازین به بعد میشه برای ایجاد افکت روی تصویر به جای استفاده از جاوااسکریپت یا استفاده از فایل‌های تصویری، مثلا ایجاد blur یا مات کردن بک‌گراند، تغییر روشنایی، کانترست و … میشه از سی‌اس‌اس استفاده کرد، مقادیر مختلفی هست که میشه به backdrop-filter داد، اینجا میتونین دمو رو ببینین و مقادیرش رو عوض کنین و نتایج رو تست کنین:

blur()

brightness()

contrast()

drop-shadow()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

url() – (برای ایجاد افکت‌های svg)

See the Pen Backdrop-filter by Siavash (@siavashh) on CodePen.

flexbox gap

این یکی از امکانات مورد علاقه منه، برای ایجاد فاصله بین بلاک‌ها قبلا باید از margin و padding استفاده می‌شد که البته چون دورتادور بلاک‌ها فاصله ایجاد می‌کنه باید همیشه حواسمون به اولین و آخرین بلاک باشه، تو راست‌چین کردن تمپلیت‌ها و زمان طراحی ریسپانسیو هم خیلی اذیتمون می‌کنه. GAP اما این مشکل رو حل میکنه و میاد فاصله بین بلاک‌هارو برامون ایجاد می‌کنه. البته موقع نوشتن این مطلب فقط فایرفاکس ساپورت می‌کنه ازش ولی امیدواریم به زودی بقیه مرورگرها ساپورتش کنن.

ساپورت مرورگرها:

دسته‌ها
آموزش ها برجسته معرفی گرافیک

اکشن های اینستاگرام برای فوتوشاپ

حتما شما هم با اپلیکیشن معروف اینستاگرام که یکی از پر دانلود ترین برنامه های اپ استور اپل، اپلیکیشن سال ۲۰۱۱ و بزرگترین شبکه اجتماعی موبایلی دنیا با حدود ۱۵ میلیون کاربر است آشنایی دارید، برنامه ای که با چند “تاچ” ساده تصاویر شمارو ویرایش میکنه و شکل و شمایل خوبی به عکسهای معمولی و روزانه شما میده و به شما حس خوب عکاس بودن رو میده  : )) و البته امکان به اشتراک گذاری این تصاویر با دوستانتون هم در اختیار شما قرار میده.

ادیت مناسب تصاویر یکی از مهمترین بخشهای عکاسیه، شاید یه عکس معمولی رو عالی کنه و یا یه عکس بد رو قابل تحمل! اما خب این کار آسونی هم نیست، شاید برنامه های فوق العاده ای مثل ادوبی لایت روم  این کار رو برای عکاسها و علاقه مندان به عکاسی آسون‌تر کرده باشن اما باز هم برای کاربران معمولی کار چندان آسونی نیست که ویرایش های حرفه ای داشته باشن و بعضی وقتها این ادیت ها باعث خرابتر شدن تصویر هم میشن، اما برنامه ای مثل اینستاگرام  میاد، درست دستش رو میذاره روی این نقطه و یک سری ادیت های آماده و زیبا برای کاربران فراهم میکنه و بعد میشه یکی از موفق ترین برنامه های بزرگترین مارکت اپلیکیشن های موبایل، یعنی اپ استور…

اما همه که اونقدر پول ندارن آیفون یا آیپد بخرن و شاید نیاز هم ندارن، ولی تعداد افرادی که برنامه فوتوشاپ روی سیستم هاشون نصبه خیلی بیشتر از این حرفاس، پس چقدر خوب میشه بشه با چند کلیک ساده ادیت هایی شبیه به آنچه در اینستاگرام هست خلق کنیم!

اکشن های فوتوشاپ سلسله کارهایی هستن که روی تصویر انجام میشن و با همین نام (اکشن) ذخیره میشن تا بعدا بشه ازشون به راحتی استفاده کرد تا نیازی به انجام کارهای تکراری نباشه.

در این پست یک مجموعه اکشن آماده برای دانلود در اختیار شما قرار میدم، امیدوارم به دردتون بخوره، اگه نمیدونید چطوری باید اکشن هارو نصب کنید این مطلب جامع ترین مطلبیه که راجع به نصب براش، اکشن و … روی فتوشاپ پیدا کردم، و به طور خلاصه کار خاصی هم نیاز نیست انجام بدین، میتونین فایلهای دانلود شده رو در فولدر actions موجود در فولدر presets در محلی که فتوشاپ نصب شده کپی میکنید.

Program Files\Adobe\Adobe Photoshop X\Presets\ Actions

توضیح اینکه X ورژن فتوشاپ شماست، به طور مثال برای من به جای X نوشته شده :CS5

لینک دانلود:

  اکشن های اینستاگرام برای فتوشاپ (644 دانلود ها)

منابع:

http://instagr.am/

articles.businessinsider.com/2011-12-08/tech/30489467_1_android-apps-ipad

blog.spoongraphics.co.uk/articles/10-photoshop-actions-to-create-instagram-style-effects

dbox.tumblr.com/post/5426249009/instagram-filters-as-photoshop-actions

دسته‌ها
برجسته مرورگر اینترنت

نحوه ادیت کردن ویجت های اپرا + ویجت فارسی توییتر

سلام

من مدتیه مطلب ننوشتم و دلیلش هم اینه که ترجیح میدم ۱ مطلب خیلی خوب بنویسم تا ۱۰ تا مطلب خوب یا ۱۰۰ تا معمولی! _حداقل از نظر خودم خوب باشه کافیه! هرچند امیدوارم شما هم خوشتون بیاد.

امروز به ذهنم رسید یک ویجت اپرا که برای توییت کردن برای خودم و بعضی از دوستان ادیت کرده بودم رو به شما معرفی کنم و در عین حال آموزشی باشه برای اینکه چطور ویجت های اپرا رو ادیت کنیم!

اگر مطالب آموزش طراحی سایت من رو خونده باشین حتمن الان دیگه آشنایی خیلی خوبی با html و css دارین و میتونین کاملن بفهمین من چی میگم.

ما برای این آموزش به آخرین ورژن مرورگر اپرا _که در حال حاضر ورژن ۱۰٫۵۰ است _ نیاز داریم، که از سایت اصلی اپرا به آدرس www.opera.com قابل دریافته

برای دانلود ویجت ها هم که حتمن میدونین از منوی   opera>widgets>Get widgets یا از آدرسhttp://widgets.opera.com/ میتونین به ویجت های اپرا دسترسی داشته باشین، ویجت مورد نظر این پست هم از آدرس http://goo.gl/b4Qu قابل دسترسیه.

خب از اینجا میریم سراغ ادیت ویجت ، برای اینکار اول از همه اپرا رو باز میکنیم و کلیدهای ترکیبی ctrl+shift+i رو میزنیم. صبر میکنیم تا dragonfly لود شه.

توضیح بدم که dargonfly تقریبن کاری مشابه inspect elements در کروم و افزونه ی فایرباگ در فایرفاکس انجام میده.

بعد از اینکه dragonfly لود شد وارد تب settings میشیم و روز Remote Debug کلیک میکنیم و تیک مربوطه رو میزنیم، در قسمت port هم هر پورت آزادی که بخواهین رو میتونین وارد کنین و در آخر هم روی apply کلیک میکنیم.

ریموت دیباگ

بعد وارد ویجت مورد نظر میشیم و روش کلیک راست میکنیم و از قسمت settings وارد Remote Debugger  میشیم، اگه دقت کنید الان inspect element یا همون dargonfly روی ویجت فعال شده و ما میتونیم به راحتی بفهمیم کدوم قسمت ویجت با چه تگ، آی دی و یا کلاسی نوشته شده.

الان ما دیگه کارمون مثل ادیت کردن یک صفحه ی html ساده است و کاری که ما میخواهیم انجام بدیم هم که فقط با css کار داره، اما فایلهای این ویجت کجا هستن؟

اگه زمانی که این ویجت رو دانلود کردین با مرورگر اپرا بوده باشین که خب میتونین وارد قسمت دانلود ها شده و بعد روی ویجت کلیک راست کنین و open folder رو بزنین تا فایل ویجت رو پیدا کنین، اگر هم با مرورگر های دیگه دانلود کردین که خب حتمن میدونین کجا دانلود شده!

من میرم و فایل ویجت رو کپی میکنم توی دسکتاپم و بعد فرمتش رو از wgt به zip تغییر میدم، و فایل رو آنزیپ میکنم.

همونطور که میبینید فایلهای مربوط به ویجت همه در یک فولدر هستند که البته ما فقط با یکی از فایلها کار داریم و اون هم در پوشه ی styles و با نام v2.css هست.

در تصویر قبلی ما میخواستیم کلاس قسمتی که آخرین توییت نوشته میشه رو پیدا کنیم و اون رو در فایل css ویرایش کنیم، برای این کار روی قسمت مورد نظر کلیک کردیم و در dragonfly ویرایش مورد نظرمون رو روش اعمال کردیم (البته این فقط به منظور تست بوده و بعد از بستن ویجت تغییرات ایجاد شده به حالت اول برمیگردن، برای همین ما فایل ویجت رو آنزیپ کردیم تا بتونیمم تغییرات رو در فایلهاش اعمال کنیم!

v2.css رو باز میکنیم و کد آی دی و کلاس مورد نظر که در تصویر قبل مشخص کرده ام رو پیدا میکنیم.

#latest .text

برای پیدا کردن یک عبارت در ادیتور های متن هم حتمن میدونین که میتونیم از کلیدهای ترکیبی Ctrl+F استفاده کنیم

در خط ۹۴ آی دی latest و در زیر مجموعه ی اون کلاس text رو داریم که باید direction رو به راست به چپ یا همون rtl تغییر بدیم! برای این کار خط زیر رو به این قسمت اضافه میکنیم:

direction:rtl;

تا داشته باشیم:

#latest .text {
        direction:rtl;
        height: 65px;
        padding: 5px;
        background: transparent url(‘../images/status_bg_middle.png’) 0 0 repeat-x;
}

باز به ویجت برمیگردیم تا قسمت های خراب دیگه رو هم درست کنیم.

با کلیک بر روی قسمتی که توییت یکی از دوستان شما در توییتر رو در بر میگیره میفهمیم که کلاس قسمت توییتهای دوستان entry هست، با این حساب باز به ویرایشگر متن خودمون برمیگردیم و direction کلاس entry رو هم به rtl تبدیل میکنیم.

الان در خط ۳۶۶ داریم:

.entry {

  direction:rtl;

  background: #fff url(../images/bg_tweet_separator.png) 50% 100% no-repeat;

  padding: 8px 5px 8px 10px;

  line-height: 1.4em;

  overflow: hidden;

}

حالا فونت رو هم تاهوما کنیم که این یکی خیلی منو آزار میده! میریم و توی فایل v2.css تگ body رو که معمولن در قسمت های بالایی فایلهای استایل یا همون css ها هستند پیدا میکنیم و کد زیر رو بهش اضافه میکنیم:

font-family: tahoma;

به همین راحتی تمام متنهای داخل ویجت تبدیل به تاهوما میشن(برای تست میتونین در همون dragonfly این کارها رو انجام بدین و بعد وارد فایل ویجت بشین تا خیالتون راحت باشه که کار درست رو انجام دادین! )

حالا تقریبن شکل و قیافه ی بهتری داره ویجت مون، اما میتونیم بهترش هم بکنیم! اگه دقت کنید توییت ها یه کم چسبیده اند به عکسهای نویسنده هاشون، برای اینکه بفهمیم توی چه کدی باید تغییر ایجاد کنیم میریم و روی یکی از عکسها کلیک میکنیم، همونطور که توی عکس هم مشخصه سمت راست یک padding داره که اگه توی dragonfly نگاه کنید ۱۰ پیکسل از راست هست، من اون رو به ۳ پیکسل تغییر میدم و از این طرف هم برای اینکه یک فاصله ای از متن داشته باشه یک margin-left برابر با ۵ پیکسل بهش میدم.

حالا دیگه شکل و شمایل خیلی بهتر از قبل شده، و تقریبن مشکلی نداره، ولی اگر هم باشه میتونیم خیلی راحت با همین روش هرکاری که دوست داریم انجام بدیم، مثلن موقع توییت کردن همچنان متن توییتی که در حال نوشتنش هستیم چپ به راسته و فونتش هم تاهوما نیست! بعد از پیدا کردن تگ مربوطه و کلاس مربوط بهش میتونیم خیلی راحت این مشکل هم حل کنیم:

با بررسی قسمت textarea که محل توییت کردنه میفهمیم که آی دی مربوط به این قسمت doing هست که در فایل css فونتش مشخص شده که sans-serif است که میریم و به tahoma تغییرش میدیم و یک direction راست به چپ (rtl) هم میدیم بهش.

این هایی که گفتم در حد یک آشنایی بود برای شما که میخواهین شروع کنین به کارهای این چنینی!

ینی مثلن یک افزونه ی فایرفاکس، کروم هم که میبینین میتونین به راحتی ادیتش کنین، و همین طور ویجت های اپرا، کم کم از ادیت میتونین دست به کار بشین و برسین به ساخت ویجت یا افزونه! که البته نوشتن اصلن قابل مقایسه با ادیت کردن نیست!

امیدوارم این مطلب کمکی به شمایی که به این کار علاقه دارین کرده باشه!

در آخر ویجتی که تا اینجا ادیت کردیم رو برای دانلود در اختیار شما میذارم، که یا علاقه ای به یادگیری این مسائل ندارین و فقط میخواهین یکم راحت تر توییت کنید، و یا شمایی که میخواهین نتیجه ی کار من رو با خودتون مقایسه کنید.

ویدجت توییتر (645 دانلود ها)

موفق و پیروز و خوشحال باشید

به امید دیدار