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

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


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

با پیشرفت عواملی چون مرورگرها و پشتیبانی از قابلیت‌ها و تکنولوژی‌های جدید طراحی وب٬ افزایش سرعت اینترنت و حرکت به سوی جلوه‌های دیداری بیشتر در طرح‌ها این روزها موارد خلاق زیادی از طراحی صفحات وب با بک‌گراندهای تمام صفحه‌ای که یک عکس زیبا و مناسب با طرح و رنگ‌بندی کلی سایت که کمی حالت 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. امیر حافظی
    ۱۲ آذر ۱۳۹۱

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

    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]



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

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