با پیشرفت عواملی چون مرورگرها و پشتیبانی از قابلیت‌ها و تکنولوژی‌های جدید طراحی وب٬ افزایش سرعت اینترنت و حرکت به سوی جلوه‌های دیداری بیشتر در طرح‌ها این روزها موارد خلاق زیادی از طراحی صفحات وب با بک‌گراندهای تمام صفحه‌ای که یک عکس زیبا و مناسب با طرح و رنگ‌بندی کلی سایت که کمی حالت 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/
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/
آپدیت یکم : با تشکر از دوستان که برای ما کارهای بیشتری را ارسال کردند تعدادی از اینگونه نمونه کارهای فارسی به پست افزوده شد.
امیر حافظی
2 December 2012
ممنون از وب سایت خوبتون
وب سایت من (کرل دیزاین) هم هست ولی خب بگراندش بلور نیست:
http://www.coreldesign.com
big man
2 December 2012
درود
پست پر محتوایی بود و یاعث آشنایی طراحان وب میشه! ادامه بدین ، موفق باشید.
من دنبال دکمه + Google بودم ولی پیدا نکردم ! :(
علی طبیب زاده
3 December 2012
سلام.
ممنون از بازخورد گرم شما.
در آینده‌ای بسیار نزدیک این امکان را برای شما همراهان وب‌تارگت فراهم می‌کنیم.
موفق و پیروز باشید :)
مهدخت
2 December 2012
خیلی جالب بود مخصوصا نمونه های ایرانیش :)
علی اقدم
3 December 2012
به به بسیار زیبا
علی و امیر آخرشم وای نسادین من ریدیزاین کنم ماله منم بیاد تو لیست :دی
علی طبیب زاده
3 December 2012
ایشالا سایت شما نه تنها در این قسمت و دسته بندی در قسمت های دیگه هم جای خودش را پیدا میکنه علی جان ;-)
حسین
3 December 2012
سلام من منظورتون را از این مقاله متوجه نمیشم درسته که مرورگر ها پیشرفته اند ولی این ویژگی سالها قبل قابل انجام بود من چند تا از این سایتها را چک کردم همشون از عکسی که قبلا در PhotoShop ساخته شده بود استفاده میکنند و خود عکس Blur هستند و این اصلا چیز جدیدی نیست و در 1998 هم میشد از این تکنیک استفاده کرد الان یک دستور CSS3 برای مرورگر های Webkit-Based اومده و اون اینه:-(webkit-filter: blur(2px که شما با استفاده از اون میتونید هر عکسی را که مات نیست را هم مات نشون بدین این مربوط میشه به پیشرفت مرورگر ها نه این مقاله که نوشتین این چیزی که شما میفرمایید را 12 سال پیش هم می شد پیاده کرد و اصلا تعجبی نداره ممون
علی طبیب زاده
3 December 2012
سلام.
صحبت در مورد این عوامل از دیدگاه پشتیبانی مرورگرهای مختلف و از آن مهم‌تر «نحوه پشتیبانی» آن مرورگرها از این تکنولوژی است و قرار دادن یک بک‌گراند بزرگ با یک سایز «ثابت» چیزی نبود که ما در ذهن داشتیم. همینطور پیشرفت بستر و زیرساخت اینترنتی و ارتباطی در ۲ یا ۳ سال اخیر همراه با فراگیرتر شدن سی‌اس‌اس۳ به ما کمک می‌کند که با اطمینان خاطر بیشتری از این امکان استفاده کنیم.
شاد و پیروز باشید :)
آرمین جلیلی
3 December 2012
سبک جدید و جالبی هست، این دو سایت زیر از قلم افتادن:
http://www.comva.me/
http://www.podcaster.ir/
علی طبیب زاده
3 December 2012
بله موافقم با شما٬ کارهای زیادی می‌شود با این متد انجام داد و از همه جالب‌تر به نظر من می‌توان پیغام‌های زیادی فرستاد و با مخاطب ارتباط بهتری برقرار کرد.
ممنون از لینک‌های شما.
حسین
4 December 2012
سلام اولا که استفاده از بک گراند بزرگ ربطی به پیشرفت تکنولوژی در دو سه سال اخیر نداره
ثانیا CSS3 در حال توسعه است و قراره در 2014 تکمیل بشه
ثالثا همون طور که عرض کردم این بک گراند هایی که نشون دادین همه عکس هستند که قبلا Blur شدند و همونطور که گفتم یک دستور CSS3 وجود داره که عکس ها واضح را Blurring میکنه و این شکل مطلوب هست یعنی شما یک بک گراند واضح را استفاده میکنید و به راحتی با دستور CSS3 این بک گراند یا هر عکسی را Blur میکنید همین و این یعنی تکنولوژی
به نظر من مقاله شما بیشتر یک ایده زیبا از لحاظ Design معرفی میکنه نه یک تکنولوژی این مطلب را هم برای این مینویسم که چند وقت پیش با یکی از دوستان طراح به مشکل برخوردم علتش هم عدم اطلاع ایشون از تکنولوژی های وب بود مثلا ایراد میگرفت چرا فلان چیز این ور تره در صورتی که اگر ایشون با CSS آشنایی داشت می فهمید که کمتر از 3 ثانیه بیشتر وقت نمیگیره ولی فکر کرده که بوم نقاشی و دیگه اگر فلان المان این ور تره باید همه چیز را پاره کرد!
خوبه که سایت شما این مشکل تاریخی اختلاف بین هنرمند ها و کدنویس ها را با آموزش حل کنه اگر کسی دنبال CSS3 BLUR EFFECT هست به این لینک ها سری بزنید البته هنوز این تکنولوژی به صورت کامل برای همه مرورگر ها اعمال نشده (این کار را با هر عکس میشه انجام داد)
http://css3playground.com/blur-filter.php
http://css-plus.com/2012/03/gaussian-blur
علی طبیب زاده
4 December 2012
دوست عزیز ما صرفا تکنیک مات کردن توسط سی‌اس‌اس۳ را نگفتیم و در حالت کلی‌تر این نوع طراحی که جدیدا ترند هم شده است را مد نظر داشتیم. و صد البته راه برای انجام این کار زیاد است.
علی حدادکار
7 December 2012
درود
تا حالا با نمونه های ایرانی اینجور طرح ها برخورد نداشتم واقعا جالب بود.
Hesam
12 December 2012
توییترم فراموش کردید :)
داوود
18 December 2012
سلام
اینم یک سایت دیگه : wikishahr.com
امیر حافظی
3 March 2013
این هم یک سایت دیگه :
http://www.hod.ir
امیر اخوان
10 March 2013
مرسی از مطلب مفیدتون.
صفحه اول پنل جدید مشترکین سایت مبین نت هم همینجوری هست :)
حمیدرضا محمدیان
14 March 2013
سلام .
این هم میتونه یه نمونه باشه:
http://www.linkhaa.com
Diplo
22 January 2017
عالی! ممنونم از وقتی که میزارید