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

Printable View

23-02-2012, 23:46
ms368

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

سلام
عکس زیر رو ببینید

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

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

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

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

tnx
24-02-2012, 14:07
peyman1987

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

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

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

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

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

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

موفق باشي
24-02-2012, 14:35
ms368

نقل قول:

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

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

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

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

نقل قول:

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

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

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

هرکی روش دیگه ای بلده بیاد بگه .
Tnx
24-02-2012, 14:38
rezaee3

روش ديگه css3 هست كه بايد بپذيري توي مرورگراي ورژن پايين مشكل داره

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

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

موفق باشي
24-02-2012, 14:59
ms368

نقل قول:

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

ممنون
یه مثال میزنی تا با طرز کارش آشنا شم
24-02-2012, 19:54
rezaee3

نقل قول:

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

ممنون
یه مثال میزنی تا با طرز کارش آشنا شم

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

[PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=UTF-8" http-equiv="content-type" /><title>NewTechs</title>

<body>
<div style="margin:auto;
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
background: -o-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr=’#f47a20′, endColorstr=’#faa51a’);

width:100%;
height:40px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
text-shadow: 0 1px 1px rgba(0,0,0,.3);
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
background: -o-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr=’#faa51a’, endColorstr=’#f47a20′);
">

</div>

</body>
</html>[/PHP]