• شاخه: طراحی    ::    بازدید: ۱۳۳۷
  • ۶

ساخت بخش‌های تمام‌صفحه فقط با یک خط CSS

امروزه وب سایت‌های مدرن توی صفحه اصلی‌شون (home page) بخش‌هایی دارن که در اصطلاح بشون میگیم تمام صفحه (full screen). برای مثال یعنی بخشی که 90% صفحه مرورگر رو می‌پوشونه. برای ساخت و پیاده سازی چنین بخش‌هایی خیلی مرسوم هست که از جاوااسکریپت استفاده کنن. که لازمش زمان و کد زدن زیادِ. برای درک بهتر چندتا از همین سایت‌ها رو در ادامه می‌بینید:

www.flickr.com

flickr

فلیکر

 

www.beeptunes.com

Beeptunes

بییپ تونز

 

و چند نمونه دیگه: اسپاتیفای، اکسپوژر و واندرکیندر

حالا چطور میتونیم فقط با یک خط css چنین چیزی رو بسازیم ؟

فقط کافیه کد زیر رو بکار ببرید 🙂

(Viewport Height) یعنی در واقع هر 1vh مساوی‌ست با 1% از ارتفاع پنجره‌ی مرورگر بدون در نظر گرفتن سایز مرورگر. این یک روش قدرتمند وسریعِ که کلی کاربرد متفاوت میتونید ازش داشته باشید. درمورد پیشتیبانی مرورگرها باید بگم 78.38% مرورگرها ازش پشتیبانی میکنن. برای جزئیات بیشتر به Caniuse.com سر بزنید.

Caniuse.com

Caniuse.com

 دیدن سورس کد | دیدن دموی آنلاین

منبع: +

بنیامین نجفی

کل جریان من و طراحی از نوشتن شروع شد. اینقدر شوق نوشتن و وبلاگنویسی رو داشتم که کم‌کم برای تغییرات وبلاگ‌هام مجبور شدم چیزای در مورد طراحی یاد بگیرم. اگر میخواید سر حرف رو با من باز کنید، کتاب بهترین موضوعِ.

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

۶ واکنش

  1. امین ضیا گفت:

    عالی حاجی، عالی

  2. آیدین خلصی گفت:

    خیلی خوبه
    همیشه اندازه Height مشکل بوده واسه من توی اکثر طراحی ها

  3. فوق العاده بود. شده وقتی که واسه همین مشکل سه روز وقتم گرفته شده!

  4. علی موسوی گفت:

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *