سلام.
چطوري يك عكس كامل رو كه گوشه هاش رو با فتوپاژ تيكه كردم در داخل هر corner از div قرار بدم با رعايت repeat و طول و عرض ؟ چون هر كاري كردم رو هم ميوفته. مرسي
Printable View
سلام.
چطوري يك عكس كامل رو كه گوشه هاش رو با فتوپاژ تيكه كردم در داخل هر corner از div قرار بدم با رعايت repeat و طول و عرض ؟ چون هر كاري كردم رو هم ميوفته. مرسي
بچه ها كسي نميدونست ؟
این مطلب رو بخونبد فکر میکنم اون چیزیه که میخواید:
کد:http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml
کد:<style>
background-image: url(YourAdress);
</style>
منظورم يه كادري هست كه مطلب درون اون قرار ميگيره و براي كارد از قبل گوشه هاي عكس رو در نظر ميگيريم و جا گذاري ميكنيم. اميدوارم منظورمو گرفته باشيد چطوري
یعنی میخوای گوشه های DIV رو گرد کنی ؟
[HTML]-moz-border-radius:5px;
border-radius:5px;[/HTML]
این دو کد رو بزنی با هم گوشه هارو گرد میکنه
کلا اگر با عکس بخواید اینکار رو کنید شما به حدود 7 عکس نیاز دارید
4 تا برای گوشه ها
دو تا برای وسط هدر و فوتر
یک دونه هم بک گراند محتوا
کد نویسیش هم یه مقدار پیچیده میشه از table هم میشه استفاده کنید منتها به چندین div نیاز دارید
دقيقا اما با عكس دوست من.نقل قول:
دقيقا منظورم همين بود آقا داريوش.نقل قول:
ميتوني آموزشش رو كه با div باشه لطف كني بذاري واسم اگر داري ؟ با css ميشه ديگه
یه سوال مشکلت با اون روش چیه ؟نقل قول:
مشكلي ندارم استفاده هم كردم ازش هما ميخوام كادر بندي با عكس داشته باشم كه زيبا تر بشه و حرفه اي تر
یه پراپرتی جدید CSS3 داده که میتونی جهات عکس هارو تعیین کنی مثلا
[HTML]border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image[/HTML]
اینجاروکد:http://www.css3.info/preview/border-image/
خيلي جالب بود. ممنون.
اما من اينو ميخوام.. ببين :
کد:http://2imgs.com/b1cf85af7c
يه چيزي تو اين مايه ها. ميبيني گوشه ها رو.. عكس نيست وقتي تو بروزر ميبيني با css درست شده. من اينو ميخوام اينجوري.کد:http://2imgs.com/82fcb69c4f
خوب دوست من گفتم که با همین کد های بالا میتونید این جلوهرو ایجاد کنید یه div ایجاد میکنید و کد CSS که بالا دادم رو تنظیم میکنید براش . زیرش یکی دیگه و رنگ دیگه
نقل قول:دوست عزیز اینچیزی که داریوش بهش اشاره کرد همون روشیه که تو لینک پست قبلیم تو این تاپیک دادمنقل قول:
دوباره میزارم ببنید:
این روشهایی که دوستمون هم داره میگه هم جواب میده ولی این مشکل هست که خیلیا هنوز از مرورگرهایی که CSS3 پشتیبانی نمیکنه استفاده میکننکد:http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml
من با فایل HTC یهکاری میکنم همه اجرا کنن
اینکار توسط border-radius در css3 انجام میشه. در همون سایت [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] هم توضیحاتش وجود داره، [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] هم هست.نقل قول:
شما هر سه رو با هم استفاده کنید تا در مرورگرهای Safari و کروم و فایرفاکس و ie 9 به مشکل برنخورید.
کد:border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
بر هم بخورن گفتم با فایل های HTC میتونن درستش کنن دوستمون میخوان با عکس این کار رو بکنن وگر نه من صفحه قبل همین روشی که شما الان گذاشتید گذاشتم
عذر می خوام، اون پست شما رو ندیده بودم.
البته فایلهای HTC فقط در مرورگر IE پشتیبانی میشن، و اونی هم که شما مدنظرتون هست فریم ورک [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] هست، که توسط فیلترهای درونی ie بعضی از خاصیتهای css3 رو مرد پشتیبانی قرار داده.
سايتي كه معرفي كرديد ديدم.
اما م ميخوام خودم از قبل عكس تعريف كنم و با خاصيت هاي 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 فیلی هست که قابلیتی که جدید اومده و مرورگر های قدیمی ساپورت نمیکنند به اون مرورگر اضافه میکنه
ممنون. حالا جواب اون سوال اصلي من با چيزايي كه تو پست قبليم گفتم چي
نقل قول:دقت کنید گوشه های گرد اون هم با عکسهنقل قول:
خوب بزار برات توضیح بدم
یه DIV میسازی توی اون 2 div دیگه به اندازه عکس هایی که داری ایجاد میکنی کنی یکی float چپ و دیگری راست .
توی div پایینی نیز یه div میسازی که عکس خط بقل سایت رو میزنی که میگی rpeat Y
پایین سایت هم به همین صورت انجام مدیدی کلا 6 عکس لازم داری
ميتوني لطف كني يه مثال خودت درست كني و اينجا واسم بذاري با كدش؟ خيلي ازت ممنون ميشم. اگر الگو بگيرم از كارت خيلي بهتر ميفهمم.
حتما فردا صبح اینکار رو برات انجام میدم
دوست من حدودا این صورت میشه اما من عکس نگذاشتم .
جا هایی که عدد گذاشتم باید تصویر بزاری
[HTML]<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0">
<tr>
<td width="3%">1</td>
<td width="94%">2</td>
<td width="3%">3</td>
</tr>
<tr>
<td height="220">4</td>
<td> </td>
<td>5</td>
</tr>
<tr>
<td height="23">6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
[/HTML]
ممنون. اما ميشه به div بذاري ؟؟ نميخوام table باشه اخه
بابا مگه چیکار داره :D ?
خودت بنداز یاد بگیری نه برای تنبلی برای من 10 دقیقه کاره
کارو که خودت کشف کنی خیلی بیشتر ارزش داره
باز اسرار داری بگو تا بزارم
بذاري ممنون ميشم D:
دوست عزیز این کدهای همون سایته
برای بوردرهای عکس هم یه تایپ مجزا زدم چون مطمئناً خیلی از کاربرا مشکل دارن باهاش
لینکش رو در آخر همین پست میزارم و به اون تاپیک مراجعه کنید
این واسه اون سایت(عکس ها رو میتونید از خود سایت Save کنید):
[HTML]<html>
<style type='text/css'>
.bl {
background: url(bl.gif) 0 100% no-repeat #e68200;; width: 20em
}
.br {
background: url(br.gif) 100% 100% no-repeat
}
.tl {
background: url(tl.gif) 0 0 no-repeat
}
.tr {
background: url(tr.gif) 100% 0 no-repeat; padding:10px
}
</style>
<body>
<div class="bl"><div class="br"><div class="tl"><div class="tr">
Boxes with curves
</div></div></div></div>
</body>
</html>
[/HTML]به تاپیک زیر مراجعه کنید:
کد:http://forum.p30world.com/showthread.php?p=5865001#post5865001