افکار متلاطم یک برنامه نویس

۴ مطلب با موضوع «Design» ثبت شده است

فیلتر های اینستاگرام توسط CSS

امروز تو وبگردی یه چیز خیلی جالب دیدم

توی دنیای اسنتاگرام پر از فیلتر های سریع و جذابه ، و بدون دردسر میتونیم به عکس هامون اعمال کنیم

اما اگه بخوایم این فیلتر ها رو ، روی تصاویر وبسایتمون اعمال کنیم با چند تا مشکل اساسی وجود داره:

می تونیم از فتوشاپ استفاده کنیم (که واقعا باید حرفه ای باشیم! و یا از اکشن های آماده استفاده کنیم) 

ولی خوب به هر حال وقتی که از یه سیستم مدیریت محتوا استفاده می کنیم و کاربر می تونه هر عکسی انتخاب کنه

و زیبایی سایت رو به چالش بکشه ، می شه از یه راه فوق العاده جذاب استفاده کرد!

CSS

طبیعیه که مرورگر های مدرن از این قابلیت css پشتیبانی می کنند , و اگه شما جز افرادی هستید که با IE سر و کار دارید بهتره بیخیال بشین!


دمو | سورس کد

۰۲ آذر ۹۴ ، ۱۴:۰۹ ۰ نظر موافقین ۰ مخالفین ۰
سعید صالحی

معرفی پلاگین

خوب از اونجا که اینجا مربوط به مطالب فنی بنده میشه بد نیست که این پلاگین رو هم معرفی کنم
چون به نظرم واقعا یکی از بهترین پلاگین ها تو زمینه confirm , modal و این جور چیزاس

۱۸ تیر ۹۴ ، ۱۰:۰۳ ۱ نظر موافقین ۰ مخالفین ۰
سعید صالحی

Gestalt


در مورد Gestalt حتما بخونید

در واقع اصل صحبت درباره اینه که ما اول یه چیزی رو می بینیم ، بعد بهش دقت می کنیم

استفاده از این توی طراحی ها می تونه ذهن کاربر رو درگیر کنه

۱۶ تیر ۹۴ ، ۱۵:۴۰ ۰ نظر موافقین ۰ مخالفین ۰
سعید صالحی

ارتفاع ثابت در صفحات

امروز خیلی اتفاقی با یه قابلیتی توی CSS آشنا شدم که خیلی به درد می خوره

شاید برای شما هم پیش اومده که تو طراحی یه صفحه وب نیاز داشتین که ارتفاع یک المان را به صورت ثابت بدین ، البته ثابت نه به این معنی که یک عدد مثلا 300px وارد کنید

اولین راه حلی که به ذهن من میرسه اینه که بیام با استفاده از jquery و یا ابزار های مشابه رویداد تغییر سایز صفحه رو بگیرم و به نسبت همون بیام  درصد ارتفاع مورد نیازم رو حساب کنم و به المانم اعمال کنم

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

راه حلی که برای این مساله هست استفاده از یک دستور پیش پردازنده در CSS هست! به اسم ()Calc

نحوه استفاده از این به این صورت هست که توی کانتینر المانی که می خواین سایزش رو بدست بیارین به این صورت عمل کنید

    height: calc(100% - 50px);

خوب یه مساله وجود داره!

آیا همه مرورگرا این دستور رو پشتیبانی می کنن؟  

برا اساس آماری که سایت Caniuse.com قابل اعتماد داده تقریبا مرورگر های مدرن همشون این رو پیشتیبانی می کنن

این هم یک نمونه پیاده شده با این دستور.




۰۴ آذر ۹۳ ، ۱۲:۲۱ ۳ نظر موافقین ۰ مخالفین ۰
سعید صالحی