ایجاد گوشه های گرد برای div با استفاده از عکس

[lady64]

سلام . من میخوام تمام دایو ها مو با عکس بصورت گوشه های گرد دار در بیارم .
الان من این div رو دارم و 4 تا عکس left,right,top,botom.
1. چطور دایو رو تقسیم بندی کنم به صورتی که با قرار دادن این عکس ها بهم نریزه ؟
2. این روشی که میخوام استفاده کنم صحیحه ؟
3.لطفا شکل استاندارد این روش رو بگید.


#news{ width:440px;height:250px;float:right;margin:auto;m argin-top:10px;background-color:#FFFFFF;}


<div id="news"><p> news</p> </div>



عکسها :

[khanlo.javid]

دوست عزیز به جای اینکه از این همه عکس و کد css استفاده کنید میتونید فقط از کد css استفاده کنید ، یه سرچ بزنید پیدا میکنید.

این یه نمونشه خیلی جالبه:
.blank-banner {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-transition-delay: 0s;
-moz-transition-duration: 0.5s;
-moz-transition-property: all;
-moz-transition-timing-function: ease-in;
background-color: #EEEEEE;
background-position: center center;
background-repeat: no-repeat;
border-bottom-color: #C1C1C1;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #C1C1C1;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 2px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #C1C1C1;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 2px;
border-top-color: #C1C1C1;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
border-top-style: solid;
border-top-width: 2px;
box-shadow: 0 0 5px #888888;
opacity: 0.8;
}
.blank-banner:hover {
-moz-transition-delay: 0s;
-moz-transition-duration: 0.5s;
-moz-transition-property: all;
-moz-transition-timing-function: ease-in;
box-shadow: 0 0 10px #888888;
opacity: 1;
}
این کد رو داخل کد های css صفحتون بذارید و هر دیوی که میخوایید گوشه هاش گرد بشه رو فقط کلاسش رو برابر با blank-banner قرار بدید.




موفق باشید.

[lady64]

مرسی که وقت گذاشتید . درسته ، شاید این روشی که گفتید ساده تر باشه ، اما مشکلش اینه که در همه ی مرورگر ها جواب نمیده و مسئله cross-browser ها رو داره . مثلا در ie8 تست کردم جواب نداد ولی در firefox درست بود.

[khanlo.javid]

البته تو IE8 هم گوشه هاش گرد میشه ولی box-shadow روش اعمال نمیشه ولی تو بقیه مرورگر ها هم گرد میشه هم سایه نشون داده میشه.

[lady64]

ولی در ie8 که من امتحان میکنم اینطور نیست . ولی دوست دارم بدونم اونهایی که از این روش استفاده میکنند ، چطور دایو رو تقسیم بندی میکنند . آقای صابر مقدس هم از عکس در سایتشون استفاده کردند . تو یکی از پست ها اینو گفتند و اینکه دیگه دردسر های cross browser ها رو نداره .

[khanlo.javid]

حق با شماست استفاده از عکس مشکل cross browser رو نداره و میتونه صحیح ترین روش باشه ولی استفاده از عکس هایی با حجم بالا برای گرد کردن دیو میتونه مشکل لود به وجود بیاره و با توجه به اینترنت ایران که هنوز خیلی ها از روش DialUp استفاده میکنن میتونه یه فاجعه باشه . ولی در کل شما میتونید به جای اینکه از دو تا عکس با عرض دیوی که دارید استفاده کنید میتونید یه شکل داره رو دقیقا به چهار قسمت تقسیم کنید و از اون برای گوشه های دیو استفاده کنید اینطور به نظر من با مشکل لود شدن سایت هم روبه رو نمیشید.



موفق باشید.

[Saber Mogaddas]

سلام
من آموزش این رو تو تاپیک های اعلان (http://barnamenevis.org/showthread.php?350524-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DB%8C%DA%A9-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B3%D8%A7%D8%AF%D9%87-%D8%A8%D8%A7-CSS-HTML) قرار دادم پیشنهاد می کنم مطالعه کنید در این زمینه به خوبی توضیح داده شده که به صورت css sprit عمل کنید..
توجه کنید اگه به صورت اصولی این برش ها رو انجام بدید مشکلی در لود با سرعت پایین اینترنت نیز نخواهید داشت.
آقای خانلو باید به این مورد هم توجه کنیم که با سرعت dialup تو ایران خیلی ها هستند که مرورگر خودشون رو بروز نکردن..
موفق باشید..

[khanlo.javid]

بله آقای مقدس خیلی ممنون از راهنماییتون به نظر من هم بیشتر مشکلات به خاطر بروز نبودن مرورگر هاست.