۱۲ ابزار ضروری برای طراحی ریسپانسیو

سه شنبه ۱۳ آبان ۹۳ • نوشته شده در رابط کاربری ، یادداشت‌ها

ریسپانسیو به معنای پاسخ‌گرا یا واکنشی می‌باشد.به این معنا که طراحی وب سایت به گونه‌ای باشه که در صفحات مختلف و ابزارهای متفاوت سایت به درستی نمایش داده بشه،به عنوان مثال زمانی که شما از طریق گوشی یا تبلت سایت رو تماشا می‌کنید ساختار ظاهری سایت به گونه ای تغییر پیدا میکنه که قابلیت پیمایش سایت در این ابزارها به راحتی فراهم میشه.از طرفی در مانیتورهای با رزولوشن بالا نیز سایت به گونه‌ای مناسب نمایش داده میشه و به عبارت دیگر کاربران با هر ابزاری سایت شما رو تماشا می‌کنند از محتوا و ظاهر سایت شما کمال استفاده را خواهند برد.
در این بین ابزارهای زیادی هستند که برای کمک کردن و راحت واکنشگرا کردن یک سایت به ما کمک میکنن که در این مطلب به این ابزارها نگاهی میکنیم.

بیشتر بخوانید

ساخت انیمیشن‌های Stop Motion توسط CSS

جمعه ۲۸ شهریور ۹۳ • نوشته شده در آموزش ، توسعه وب ، رابط کاربری

قطعا شما هم انیمیشن‌هایی رو دیده‌اید که از گرفتن تصاویر متعدد و نمایش اونها پشت سر هم شکل میگیره،به این نوع ساخت انیمیشن Stop-Motion میگن،استاپ موشن یا همان انیمیشن ایست / حرکت یکی از تکنیکهای ساخت انیمیشنه که در اون با استفاده از فیلمبرداری فریم به فریم اشیاء فیزیکی رو به حرکت در میارن،بدین ترتیب که شئ مورد نظر رو کمی جابجا کرده و عکسبرداری می کنند و سپس کمی دیگر اون رو جابجا کرده و دوباره عکسبرداری می کنند و این کار رو ادامه می دهند و در نهایت وقتی این عکسها پشت سر هم به نمایش در میاد اینطور به نظر میرسه که اون شئ در حال حرکته.
این تیکنیک رو میشه توسط یک تابع انیمیشن در CSS توی صفحات وب به کار برد.

بیشتر بخوانید

تکنیک‌های CSS برای نمایشگرهای رتینا

دوشنبه ۲۴ شهریور ۹۳ • نوشته شده در آموزش ، رابط کاربری

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

ما سال‌ها از صفحه‌های نمایش با فشردگی ۱ پیکسل استفاده کردیم و بعد با معرفی شدن صفحه‌نمایش رتینا از طرف اپل، این فشردگی به ۲ پیکسل تبدیل شد. به این معنی که تعداد پیکسل‌هایی که در یک اندازه واحد جا می‌گیرن ۲ برابر شد

حالا راه حل چیه؟ چطوری میتونیم تصویر رو توی صفحه نمایش‌های رتینا به درستی و بدون افت کیفیت و تار شدن نشون بدیم؟

بیشتر بخوانید