حرکت در گذرگاه زندگی

۲ مطلب با کلمه‌ی کلیدی «طراحی وب» ثبت شده است

تغییر اندازه‌ی تصویر زمینه بر اساس سایز دستگاه با css

در css، یکی از روش‌های تغییر اندازه‌ی تصویر زمینه متناسب با سایز صفحه نمایش استفاده از خاصیت background-size است.

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

بصورت زیر میتوانید ازین خاصیت استفاده کنید.


body {
    background: url('http://bayanbox.ir/view/3671047358495111419/the-eiffel-tower-by-gemini-soul-d6s3rug.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

همچنین مثال بالا را بصورت زنده میتوانید در فیدلی که برای این پست ساخته شده امتحان کنید. فیدل امتحان این ویژگی...

همچنین گزینه های بیشتری هم برای background-size در دسترس است که میتوانید در MDN بیشتر مطالعه کنید. بیشتر ...

۰۵ ارديبهشت ۹۴ ، ۱۲:۳۱ ۱ نظر
داریوش عباسی

sprint، یک آلترناتیو سبک برای جی‌کوئری

jQuery کتابخانه ای معروف است برای حل مشکلات طراحان‌وبی که با جاوااسکرپیت کنار نمی‌امدند و همچنین پرفورمنس کدهایشان در استفاده از DOM پایین بود گزینه ای بسیار مناسب است اما پشتیبانی از مرورگرهای قدیمی‌تر و ماژول های زیاد در حالت اولیه قدری از همه‌پسند بودن آن کاسته است.

فریم‌ورک‌هایی مانند آنگولار کتابخانه‌ی کوچک و سبکی شبیه به jQuery با خود دارد و توجه بسیاری را به خود جلب کرد و حالا یک کتابخانه‌ی جدید به اسم Sprint.js پا را فراتر نهاده و ویژگی‌هایی نزدیک به جی‌کوئری را در خود قرار داده با این تفاوت که صرفا در مرورگرهای مدرن پشتیبانی میشود و ابزارهای محدودتری دارد و البته پرفورمنس خیلی بهتری از نمونه های مشابه خود به دست میدهد.

اگر طراح وب هستید و کاربرانتان مرورگرهایشان تا حدی مدرن است بد نیست به این کتابخانه نگاهی بیاندازید شاید برای شما هم جایگزین jquery شد.

نصب :

نصب از bower :

bower install bendc/sprint

همچنین میتوانید کد منبع را دستی دریافت کرده و استفاده کنید. کد منبع روی گیتهاب ...

API

اسپرینت شباهت زیادی به جی‌کوئری دارد و اگر جی‌کوئری بدانید با اسپرینت هم مشکلی نخواهید داشت. لیست توابع...

:)

۰۳ ارديبهشت ۹۴ ، ۰۰:۱۵ ۰ نظر
داریوش عباسی