ورود

نسخه کامل مشاهده نسخه کامل : ایجاد بکگراند و منوهای کم حجم با استفاده از تصاویر تکرار پذیر !


ms368
23-02-2012, 23:46
سلام
عکس زیر رو ببینید

[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

مطمئنا اگه چندتا عکس اینجوری برای طراحی وب استفاده کنیم ، لود شدن اون سایت یکم طولانی میشه
حالا سوال اینجاست
آیا میشه عکس رو به تیکه های کوچکتر برش داد و فقط قسمت وسط اون رو تکرارپذیر به محور ایکس ها کرد و قسمت چپ و راست اونو هم طوری بزاریم که با عکس اصلی فرقی نداشته باشه ؟ ( ترجیحا با CSS , Html )
مثه عکس زیر که اونا رو برش دادم ( البته برش وسط خیلی بزرگه واسه اینکه شما متوجه بشین ، وگرنه عرضش 1 پیکسل باید باشه )


[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]


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

tnx
peyman1987
24-02-2012, 14:07
اگه بکگراند شما یکنواخت باشه دقیقا کار درست همینه که یه پیکسل بگیرین و تکرارش کنین بجای گرفت کل تصویر ولی اگر یکنواخت نباشه و رنگ قسمتهای مختلفش فرق کنن اونوقت دیگه نمیشه و باید عکس کامل بگیریم.

راجع به background-repeat سرچ کنین مطلب ساده و زیاد بدست میاد
rezaee3
24-02-2012, 14:17
براي تكرار بك گراندهاي چند قسمتي ميتوني به سادگي از جدول استفاده كني...
يك سطر و سه ستون...

ستون چپ عكس چپ رو بش ميدي و سايز سلول رو با عكست هماهنگ ميكني
ستون وسط با دستور بكگراند مشخص ميكني كه بكگراند يو آر الش چي هست و بصورت y بايد تكرار بشه و
ستون راست هم مثل ستون اول

اما اين نكته رو بايد گفت به دلايلي استفاده از تيبل داره تموم ميشه و بجاي اون از دايو استفاده ميشه

براي ايجاد اين نوع منو هاي چند تيكه با دايو بايد 4 دايو بسازي
يكي كانتينر براي 3 دايو ديگه باشه...
يك ميوفته سمت چپ با بكگراند موردنظر و سايز عكس بكگران
يكي ميوفته وسط با بكگراند تكرار شونده وسط
و ديگري هم كه واضحه...

موفق باشي
ms368
24-02-2012, 14:35
اگه بکگراند شما یکنواخت باشه دقیقا کار درست همینه که یه پیکسل بگیرین و تکرارش کنین بجای گرفت کل تصویر ولی اگر یکنواخت نباشه و رنگ قسمتهای مختلفش فرق کنن اونوقت دیگه نمیشه و باید عکس کامل بگیریم.

راجع به background-repeat سرچ کنین مطلب ساده و زیاد بدست میاد

ممنون رفیق
دقیقا همین کارو واسه بکگراند های یکنواخت استفاده میکردم
ولی واسه منو ها تصویر یکنواخت یکم تکراری میشه و من مجبور بود عکسی طراحی کنم که گوشه های چپ یا راستش فرق داشته باشه ( مثه گذاشتن یه آیکون توی اون )
و اگه تکرار پذیرش میکردم خیلی صفحه رو زشت و درهم میکرد


براي تكرار بك گراندهاي چند قسمتي ميتوني به سادگي از جدول استفاده كني...
يك سطر و سه ستون...
اما اين نكته رو بايد گفت به دلايلي استفاده از تيبل داره تموم ميشه و بجاي اون از دايو استفاده ميشه

خیلی خیلی ممنون بابت جوابتون

متن شما رو که تا نیمه خوندم گفتم ای بابا من دارم درباره سرعت بالای لود شدن صفحات صحبت میکنم اونوقت شما table رو پیشنهاد دادین
بعد بیشتر که خوندم متوجه تجربه بالای شما شدم
در حقیقت table رو اصلا استفاده نمیکنم چون واقعا سرعت لود شدن رو میگیره ولی div یه دنیای دیگه داره

هرکی روش دیگه ای بلده بیاد بگه .
Tnx
rezaee3
24-02-2012, 14:38
روش ديگه css3 هست كه بايد بپذيري توي مرورگراي ورژن پايين مشكل داره

و ميتوني براي مرورگرهاي پايين از تصوير ثابت استفاده كني... يعني بگي مثلا اگه آي اي 7 بود از اين فايل سي اس اس بخون..

سي اس اس سه به سادگي اين سبك رو كه شما طرح كرديد ميكشه

موفق باشي
ms368
24-02-2012, 14:59
سي اس اس سه به سادگي اين سبك رو كه شما طرح كرديد ميكشهممنون
یه مثال میزنی تا با طرز کارش آشنا شم
rezaee3
24-02-2012, 19:54
ممنون
یه مثال میزنی تا با طرز کارش آشنا شم


يه مثال ساده
اينو تويه يه فايل با پسوند اچ تي ام ال بزار



برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید