PDA

نسخه کامل مشاهده نسخه کامل : نحوه قرار دادن عكس به عنوان ژس زمينه با css


Ahmad-Ra
27-01-2011, 02:32
سلام.
چطوري يك عكس كامل رو كه گوشه هاش رو با فتوپاژ تيكه كردم در داخل هر corner از div قرار بدم با رعايت repeat و طول و عرض ؟ چون هر كاري كردم رو هم ميوفته. مرسي
Ahmad-Ra
28-01-2011, 12:46
بچه ها كسي نميدونست ؟
David.Jn
02-02-2011, 12:27
این مطلب رو بخونبد فکر میکنم اون چیزیه که میخواید:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Web Design
03-02-2011, 21:07
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Ahmad-Ra
05-02-2011, 18:30
منظورم يه كادري هست كه مطلب درون اون قرار ميگيره و براي كارد از قبل گوشه هاي عكس رو در نظر ميگيريم و جا گذاري ميكنيم. اميدوارم منظورمو گرفته باشيد چطوري
Web Design
05-02-2011, 18:59
یعنی میخوای گوشه های DIV رو گرد کنی ؟

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
این دو کد رو بزنی با هم گوشه هارو گرد میکنه
DaRiOuShJh
07-02-2011, 12:22
کلا اگر با عکس بخواید اینکار رو کنید شما به حدود 7 عکس نیاز دارید

4 تا برای گوشه ها

دو تا برای وسط هدر و فوتر

یک دونه هم بک گراند محتوا

کد نویسیش هم یه مقدار پیچیده میشه از table هم میشه استفاده کنید منتها به چندین div نیاز دارید
Ahmad-Ra
07-02-2011, 14:13
یعنی میخوای گوشه های DIV رو گرد کنی ؟

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

دقيقا اما با عكس دوست من.


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

4 تا برای گوشه ها

دو تا برای وسط هدر و فوتر

یک دونه هم بک گراند محتوا

کد نویسیش هم یه مقدار پیچیده میشه از table هم میشه استفاده کنید منتها به چندین div نیاز دارید

دقيقا منظورم همين بود آقا داريوش.
ميتوني آموزشش رو كه با div باشه لطف كني بذاري واسم اگر داري ؟ با css ميشه ديگه
Web Design
07-02-2011, 19:13
دقيقا اما با عكس دوست من.


یه سوال مشکلت با اون روش چیه ؟
Ahmad-Ra
08-02-2011, 12:13
مشكلي ندارم استفاده هم كردم ازش هما ميخوام كادر بندي با عكس داشته باشم كه زيبا تر بشه و حرفه اي تر
Web Design
08-02-2011, 12:25
یه پراپرتی جدید CSS3 داده که میتونی جهات عکس هارو تعیین کنی مثلا

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

اینجارو
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Ahmad-Ra
08-02-2011, 18:20
خيلي جالب بود. ممنون.
اما من اينو ميخوام.. ببين :


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


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

يه چيزي تو اين مايه ها. ميبيني گوشه ها رو.. عكس نيست وقتي تو بروزر ميبيني با css درست شده. من اينو ميخوام اينجوري.
Web Design
08-02-2011, 19:30
خوب دوست من گفتم که با همین کد های بالا میتونید این جلوهرو ایجاد کنید یه div ایجاد میکنید و کد CSS که بالا دادم رو تنظیم میکنید براش . زیرش یکی دیگه و رنگ دیگه
David.Jn
08-02-2011, 20:28
مشكلي ندارم استفاده هم كردم ازش هما ميخوام كادر بندي با عكس داشته باشم كه زيبا تر بشه و حرفه اي تر


دقيقا اما با عكس دوست من.



دقيقا منظورم همين بود آقا داريوش.
ميتوني آموزشش رو كه با div باشه لطف كني بذاري واسم اگر داري ؟ با css ميشه ديگه

دوست عزیز اینچیزی که داریوش بهش اشاره کرد همون روشیه که تو لینک پست قبلیم تو این تاپیک دادم
دوباره میزارم ببنید:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
این روشهایی که دوستمون هم داره میگه هم جواب میده ولی این مشکل هست که خیلیا هنوز از مرورگرهایی که CSS3 پشتیبانی نمیکنه استفاده میکنن
Web Design
08-02-2011, 20:31
من با فایل HTC یهکاری میکنم همه اجرا کنن
eAmin
08-02-2011, 20:46
خيلي جالب بود. ممنون.
اما من اينو ميخوام.. ببين :


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


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

يه چيزي تو اين مايه ها. ميبيني گوشه ها رو.. عكس نيست وقتي تو بروزر ميبيني با css درست شده. من اينو ميخوام اينجوري.
اینکار توسط border-radius در css3 انجام میشه. در همون سایت css3.info ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) هم توضیحاتش وجود داره، اینجا ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) هم هست.
شما هر سه رو با هم استفاده کنید تا در مرورگرهای Safari و کروم و فایرفاکس و ie 9 به مشکل برنخورید.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Web Design
08-02-2011, 20:53
بر هم بخورن گفتم با فایل های HTC میتونن درستش کنن دوستمون میخوان با عکس این کار رو بکنن وگر نه من صفحه قبل همین روشی که شما الان گذاشتید گذاشتم
eAmin
08-02-2011, 21:05
عذر می خوام، اون پست شما رو ندیده بودم.
البته فایلهای HTC فقط در مرورگر IE پشتیبانی میشن، و اونی هم که شما مدنظرتون هست فریم ورک CSS3Pie ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) هست، که توسط فیلترهای درونی ie بعضی از خاصیتهای css3 رو مرد پشتیبانی قرار داده.
Ahmad-Ra
08-02-2011, 21:44
سايتي كه معرفي كرديد ديدم.
اما م ميخوام خودم از قبل عكس تعريف كنم و با خاصيت هاي css مثلا تو dream waver با تعيين repeat و background position(x,y) و background image و... انجامش داد.

اين سايت فقط رنگ دهي داره من لايه عكس ميخوام بذارم خودم.

---------- Post added at 09:44 PM ---------- Previous post was at 09:39 PM ----------


من با فایل HTC یهکاری میکنم همه اجرا کنن

HTC چي هست ؟
Web Design
08-02-2011, 22:06
یه فایل با فرمت .HTC فیلی هست که قابلیتی که جدید اومده و مرورگر های قدیمی ساپورت نمیکنند به اون مرورگر اضافه میکنه
Ahmad-Ra
09-02-2011, 20:26
ممنون. حالا جواب اون سوال اصلي من با چيزايي كه تو پست قبليم گفتم چي
David.Jn
09-02-2011, 22:29
سايتي كه معرفي كرديد ديدم.
اما م ميخوام خودم از قبل عكس تعريف كنم و با خاصيت هاي css مثلا تو dream waver با تعيين repeat و background position(x,y) و background image و... انجامش داد.




ممنون. حالا جواب اون سوال اصلي من با چيزايي كه تو پست قبليم گفتم چي
دقت کنید گوشه های گرد اون هم با عکسه
Web Design
09-02-2011, 22:30
خوب بزار برات توضیح بدم
یه DIV میسازی توی اون 2 div دیگه به اندازه عکس هایی که داری ایجاد میکنی کنی یکی float چپ و دیگری راست .
توی div پایینی نیز یه div میسازی که عکس خط بقل سایت رو میزنی که میگی rpeat Y
پایین سایت هم به همین صورت انجام مدیدی کلا 6 عکس لازم داری
Ahmad-Ra
09-02-2011, 23:04
ميتوني لطف كني يه مثال خودت درست كني و اينجا واسم بذاري با كدش؟ خيلي ازت ممنون ميشم. اگر الگو بگيرم از كارت خيلي بهتر ميفهمم.
Web Design
09-02-2011, 23:12
حتما فردا صبح اینکار رو برات انجام میدم
Web Design
11-02-2011, 09:54
دوست من حدودا این صورت میشه اما من عکس نگذاشتم .
جا هایی که عدد گذاشتم باید تصویر بزاری

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Ahmad-Ra
11-02-2011, 13:32
ممنون. اما ميشه به div بذاري ؟؟ نميخوام table باشه اخه
Web Design
11-02-2011, 16:20
بابا مگه چیکار داره :D ?
خودت بنداز یاد بگیری نه برای تنبلی برای من 10 دقیقه کاره
کارو که خودت کشف کنی خیلی بیشتر ارزش داره
باز اسرار داری بگو تا بزارم
Ahmad-Ra
12-02-2011, 17:38
بذاري ممنون ميشم D:
David.Jn
16-02-2011, 17:51
دوست عزیز این کدهای همون سایته

برای بوردرهای عکس هم یه تایپ مجزا زدم چون مطمئناً خیلی از کاربرا مشکل دارن باهاش
لینکش رو در آخر همین پست میزارم و به اون تاپیک مراجعه کنید
این واسه اون سایت(عکس ها رو میتونید از خود سایت Save کنید):

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنیدبه تاپیک زیر مراجعه کنید:

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