وب سایتهایی با تصاویر پس زمینه مات یا blur

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


علی طبیب زاده ۱۹ دیدگاه ایده و خلاقیت یکشنبه, ۱۲ام آذر , ۱۳۹۱ 19526 بازدید

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

در اینگونه وب‌سایت‌ها جا برای تزریق خلاقیت و کار کردن روی جلوه‌های دیداری زیاد وجود دارد و می‌توان طرح‌هایی نفس‌گیر را به کمک این متد خلق کرد.

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


http://paris.3ds.com/en-index.html#Heritage


http://www.tinyfactory.co/#!home


https://spacebox.io/


http://www.humaan.com.au/


https://squareup.com/


http://www.cageapp.com


http://instafoc.us/


http://www.meernotes.com/


Pre-CMS Content Production and Workflow


http://ideakites.com/


http://www.happytables.com/


https://do.com/


http://www.nvinteractive.co.nz


http://www.designedtomove.org

حتی این موج و Trend هم به وب فارسی رسیده و وب‌سایت‌های جالبی با این تکنیک راه‌اندازی شده است. اگر شما هم وب‌سایتی که با این متد طراحی شده دارید یا می‌شناسید لطفا برای ما بفرستید.


http://www.baaemail.com


http://www.yadaavar.com/


http://www.yadambiar.ir/


http://www.podcaster.ir/


http://www.comva.me/


http://wonderfulglasses.com/launch/

 

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

 



نویسنده / مترجم : علی طبیب زاده

علی طبیب زاده علی طبیب زاده علی طبیب زاده علی طبیب زاده

  1. وب سایت هایی با تصاویر پس زمینه کامل
  2. استفاده از شخصیت سازی در طراحی وب سایت
  3. وب سایت هایی با طراحی وسط چین
  4. معرفی نمونه کارهای خلاقانه – ۱
  5. معرفی نمونه کارهای خلاقانه – ۲
  6. معرفی نمونه کارهای خلاقانه – ۳
  7. استفاده از Thumbnail در طراحی وب سایت
  8. تصاویر مورد استفاده در طراحی وب سایت – GIF , PNG , JPG
  9. بهینه سازی تصاویر – آموزش بهینه سازی سایت – #۷
  10. پرورش ایده های خلاقانه و نوآورانه

۱۹ دیدگاه برای این نوشته ثبت شده است


  1.  امیر حافظی
    ۱۲ آذر ۱۳۹۱

    ممنون از وب سایت خوبتون
    وب سایت من (کرل دیزاین) هم هست ولی خب بگراندش بلور نیست:

    http://www.coreldesign.com


    پاسخ پاسخ دادن


  2. big man
    ۱۲ آذر ۱۳۹۱

    درود
    پست پر محتوایی بود و یاعث آشنایی طراحان وب میشه! ادامه بدین ، موفق باشید.

    من دنبال دکمه + Google بودم ولی پیدا نکردم ! :(


    پاسخ پاسخ دادن


    • علی طبیب زاده
      ۱۳ آذر ۱۳۹۱

      سلام.
      ممنون از بازخورد گرم شما.
      در آینده‌ای بسیار نزدیک این امکان را برای شما همراهان وب‌تارگت فراهم می‌کنیم.
      موفق و پیروز باشید :)


      پاسخ پاسخ دادن


  3. مهدخت
    ۱۲ آذر ۱۳۹۱

    خیلی جالب بود مخصوصا نمونه های ایرانیش :)


    پاسخ پاسخ دادن


  4. علی اقدم
    ۱۳ آذر ۱۳۹۱

    به به بسیار زیبا
    علی و امیر آخرشم وای نسادین من ریدیزاین کنم ماله منم بیاد تو لیست :دی


    پاسخ پاسخ دادن


    • علی طبیب زاده
      ۱۳ آذر ۱۳۹۱

      ایشالا سایت شما نه تنها در این قسمت و دسته بندی در قسمت های دیگه هم جای خودش را پیدا می‌کنه علی جان ;-)


      پاسخ پاسخ دادن


  5. حسین
    ۱۳ آذر ۱۳۹۱

    سلام من منظورتون را از این مقاله متوجه نمیشم درسته که مرورگر ها پیشرفته اند ولی این ویژگی سالها قبل قابل انجام بود من چند تا از این سایتها را چک کردم همشون از عکسی که قبلا در PhotoShop ساخته شده بود استفاده میکنند و خود عکس Blur هستند و این اصلا چیز جدیدی نیست و در ۱۹۹۸ هم میشد از این تکنیک استفاده کرد الان یک دستور CSS3 برای مرورگر های Webkit-Based اومده و اون اینه:-(webkit-filter: blur(2px که شما با استفاده از اون میتونید هر عکسی را که مات نیست را هم مات نشون بدین این مربوط میشه به پیشرفت مرورگر ها نه این مقاله که نوشتین این چیزی که شما میفرمایید را ۱۲ سال پیش هم می شد پیاده کرد و اصلا تعجبی نداره ممون


    پاسخ پاسخ دادن


    • علی طبیب زاده
      ۱۳ آذر ۱۳۹۱

      سلام.
      صحبت در مورد این عوامل از دیدگاه پشتیبانی مرورگرهای مختلف و از آن مهم‌تر «نحوه پشتیبانی» آن مرورگرها از این تکنولوژی است و قرار دادن یک بک‌گراند بزرگ با یک سایز «ثابت» چیزی نبود که ما در ذهن داشتیم. همینطور پیشرفت بستر و زیرساخت اینترنتی و ارتباطی در ۲ یا ۳ سال اخیر همراه با فراگیرتر شدن سی‌اس‌اس۳ به ما کمک می‌کند که با اطمینان خاطر بیشتری از این امکان استفاده کنیم.

      شاد و پیروز باشید :)


      پاسخ پاسخ دادن


  6. آرمین جلیلی
    ۱۳ آذر ۱۳۹۱

    سبک جدید و جالبی هست، این دو سایت زیر از قلم افتادن:
    http://www.comva.me/
    http://www.podcaster.ir/


    پاسخ پاسخ دادن


    • علی طبیب زاده
      ۱۳ آذر ۱۳۹۱

      بله موافقم با شما٬ کارهای زیادی می‌شود با این متد انجام داد و از همه جالب‌تر به نظر من می‌توان پیغام‌های زیادی فرستاد و با مخاطب ارتباط بهتری برقرار کرد.
      ممنون از لینک‌های شما.


      پاسخ پاسخ دادن


  7. حسین
    ۱۴ آذر ۱۳۹۱

    سلام اولا که استفاده از بک گراند بزرگ ربطی به پیشرفت تکنولوژی در دو سه سال اخیر نداره
    ثانیا CSS3 در حال توسعه است و قراره در ۲۰۱۴ تکمیل بشه
    ثالثا همون طور که عرض کردم این بک گراند هایی که نشون دادین همه عکس هستند که قبلا Blur شدند و همونطور که گفتم یک دستور CSS3 وجود داره که عکس ها واضح را Blurring میکنه و این شکل مطلوب هست یعنی شما یک بک گراند واضح را استفاده میکنید و به راحتی با دستور CSS3 این بک گراند یا هر عکسی را Blur میکنید همین و این یعنی تکنولوژی
    به نظر من مقاله شما بیشتر یک ایده زیبا از لحاظ Design معرفی میکنه نه یک تکنولوژی این مطلب را هم برای این مینویسم که چند وقت پیش با یکی از دوستان طراح به مشکل برخوردم علتش هم عدم اطلاع ایشون از تکنولوژی های وب بود مثلا ایراد میگرفت چرا فلان چیز این ور تره در صورتی که اگر ایشون با CSS آشنایی داشت می فهمید که کمتر از ۳ ثانیه بیشتر وقت نمیگیره ولی فکر کرده که بوم نقاشی و دیگه اگر فلان المان این ور تره باید همه چیز را پاره کرد!
    خوبه که سایت شما این مشکل تاریخی اختلاف بین هنرمند ها و کدنویس ها را با آموزش حل کنه اگر کسی دنبال CSS3 BLUR EFFECT هست به این لینک ها سری بزنید البته هنوز این تکنولوژی به صورت کامل برای همه مرورگر ها اعمال نشده (این کار را با هر عکس میشه انجام داد)
    http://css3playground.com/blur-filter.php

    http://css-plus.com/2012/03/gaussian-blur


    پاسخ پاسخ دادن


    • علی طبیب زاده
      ۱۴ آذر ۱۳۹۱

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


      پاسخ پاسخ دادن


  8. علی حدادکار
    ۱۷ آذر ۱۳۹۱

    درود
    تا حالا با نمونه های ایرانی اینجور طرح ها برخورد نداشتم واقعا جالب بود.


    پاسخ پاسخ دادن


  9. Hesam
    ۲۲ آذر ۱۳۹۱

    توییترم فراموش کردید :)


    پاسخ پاسخ دادن


  10. داوود
    ۲۸ آذر ۱۳۹۱

    سلام
    اینم یک سایت دیگه : wikishahr.com


    پاسخ پاسخ دادن


  11. امیر حافظی
    ۱۳ اسفند ۱۳۹۱

    این هم یک سایت دیگه :

    http://www.hod.ir


    پاسخ پاسخ دادن


  12. امیر اخوان
    ۲۰ اسفند ۱۳۹۱

    مرسی از مطلب مفیدتون.
    صفحه اول پنل جدید مشترکین سایت مبین نت هم همینجوری هست :)


    پاسخ پاسخ دادن


  13. حمیدرضا محمدیان
    ۲۴ اسفند ۱۳۹۱

    سلام .
    این هم میتونه یه نمونه باشه:
    http://www.linkhaa.com


    پاسخ پاسخ دادن


  14. Diplo
    ۳ بهمن ۱۳۹۵

    عالی! ممنونم از وقتی که میزارید


    پاسخ پاسخ دادن

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





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

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

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2020 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.