پس زمینه سایتم

[mazaher5723]

سلام دوستان و اساتید
چطوری میشه هدر سایتو مثل این انجامش بدم البته منظورم پس زمینه اش هست.
ممنون

[s2/mri]

سلام

یه تیکه از عکس رو برش میدی و بعد اونو در راستای x تکرار میکنی



#menu{
background:url(yourimage) repeat-x;
}

[mazaher5723]

برش دادم اما قشنگ نشد

[هزاره سوم]

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

[s2/mri]

خب درست برش ندادین

یه احتمال میدم گوشه های عکسی که برش دادین یه حاشیه سفید داره که ناشی از برش بد

یه نگاه به این لینک (http://khabaronline.ir/Content/default/images/HeaderBg.gif) بنداز :چشمک:

[mazaher5723]

ممنونم.
پس بخاطر گوشه ها بود؟

[pary_daryayi]

تو فتوشاپ چطور میشه اینو ایجاد کرد ؟ با چه ابزاری ؟

[s2/mri]

ممنونم.
پس بخاطر گوشه ها بود؟

اره . چون معمولا گوشه ها بد برش داده میشن و به دلیل تکرار عکس ظاهر مناسب رو ندارن


تو فتوشاپ چطور میشه اینو ایجاد کرد ؟ با چه ابزاری ؟

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

[pary_daryayi]

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

ممنونم .
بین پترن های آماده حالت هاشوری نداره . پس باید خودمون یک پترن بسازیم . این حالت هاشور رو چطور میشه ایجاد کرد ؟

[کامروا]

چون رنگ Background بصورت Gradient‌ هست و همینطور دونه های سفید روی عکس هست ، نمیشه تکه ای از اون رو جدا کرد و اون رو repeat‌کرد. یعنی در واقع میشه ولی قشنگ نمیشه.
من توصیه میکنم که رنگ رو خودتون ایجاد کنید و سپس عکس دونه های سفید بصورت Transparent رو اضافه کنید.

یک مثال ساده میزنم واستون :

ابتدا یک Div واسه header ایجاد میکنیم :

<div id="header"></div>

خب حالا بوسیله دستور زیر میتونیم بهش رنگ Gradient بدیم :
#header {
height: 80px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#cb60b3), color-stop(0.5, #ad1283), to(#de47ac));
}

و مثلا عکس زیر (عکس کوچیکه ولی هست) :

v اینجاس :چشمک:
http://up.vbiran.ir/uploads/137448150215521_bg2.png

رو هم میخوام روی این پخش کنم باید در نهایت به این صورت عمل کنیم‌:

#header {
height: 80px;
background: url('http://up.vbiran.ir/uploads/137448150215521_bg2.png'), -webkit-gradient(linear, 0 0, 0 100%, from(#cb60b3), color-stop(0.5, #ad1283), to(#de47ac));
}

موفق باشید.

[s2/mri]

ممنونم .
بین پترن های آماده حالت هاشوری نداره . پس باید خودمون یک پترن بسازیم . این حالت هاشور رو چطور میشه ایجاد کرد ؟

اینجا (http://designm.ag/images/1209/patterns/36.jpg) ، اینجا (http://designm.ag/resources/650-free-photoshop-patterns/)و اینجا (http://www.brusheezy.com/patterns)

منم ساخت پترن رو یاد ندارم . چون پترن دقت مضاعفی برا ایجادش می خواد(باید تمام دقت رو این باشه که از کجا تموم شده و در انتها باید از کجا شروع بشه!) . هم وقت کافی و هم حوصله

[ateryad]

شما اگر مرورگر کروم و یا فایرفاکس همون سایت بالا رو باز کنید و روی قسمت header اون راست کلیک کنید و inspect element رو بزنی به راحتی می تونی اون عکس رو از سایت کپی کنی....