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

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


علی طبیب زاده ۱۹ دیدگاه ایده و خلاقیت یکشنبه, 2nd دسامبر , 2012 21684 بازدید

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

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

    http://www.coreldesign.com




  2. big man
    2 دسامبر 2012

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

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




    • علی طبیب زاده
      3 دسامبر 2012

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




  3. مهدخت
    2 دسامبر 2012

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




  4. علی اقدم
    3 دسامبر 2012

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




    • علی طبیب زاده
      3 دسامبر 2012

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




  5. حسین
    3 دسامبر 2012

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




    • علی طبیب زاده
      3 دسامبر 2012

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

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




  6. آرمین جلیلی
    3 دسامبر 2012

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




    • علی طبیب زاده
      3 دسامبر 2012

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




  7. حسین
    4 دسامبر 2012

    سلام اولا که استفاده از بک گراند بزرگ ربطی به پیشرفت تکنولوژی در دو سه سال اخیر نداره
    ثانیا 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




    • علی طبیب زاده
      4 دسامبر 2012

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




  8. علی حدادکار
    7 دسامبر 2012

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




  9. Hesam
    12 دسامبر 2012

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




  10. داوود
    18 دسامبر 2012

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




  11. امیر حافظی
    3 مارس 2013

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

    http://www.hod.ir




  12. امیر اخوان
    10 مارس 2013

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




  13. حمیدرضا محمدیان
    14 مارس 2013

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




  14. Diplo
    22 ژانویه 2017

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



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





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

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

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

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

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



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

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