اين روز ها ايجاد جعبه ها يا divider (جداكننده ها) يي با گوشه هاي گرد توي طراحي صفحات وب خيلي مرسومه و زيبايي خاصي به صفحه ميده . چندين راه براي اين كار وجود داره و راه هاي خوبي هم پيشنهاد شده .اما من مي خوام راه هاي ساده تري رو هم پيشنهاد كنم . با هم سه روش اين كار رو بررسي مي كنيم :
ايجاد جعبه هاي گوشه گرد با عرض و ارتفاع ثابت
اين ساده ترين راهه ! ما اول تصويري با گوشه هاي گرد و با عرض و ارتفاع ثابت درست مي كنيم . و اونو به عنوان پس زمينه يه div قرار مي ديم . همچنين با CSS ، يه padding 4 پيكسلي هم به div مون مي ديم تا مطمئن بشيم كه متن داخل اون با border هاي عكسمون تداخل نداشته باشه .
روي عكس زير راست كليك كرده و اونو ذخيره كنيد تا استفاده كنيم .
اين هم كد HTML و CSS ش :
<div style="background-image: url('/sites/default/files/rounded_fixed.gif'); width: 228px; height: 160px; padding: 10px;">
Some content. Some content. Some content.
Some content. Some content. Some content.
Some content. Some content. Some content.
</div>
ايجاد جعبه هاي گوشه گرد با عرض ثابت و ارتفاع متغير
توي اين روش ما از دو تا عكس براي بالا و پايين جعبه مون استفاه مي كنيم . همچنين از يه div كه قراره محتوي متن ما باشه استفاده مي كنيم . براي اين div از خاصيت border براي كشيدن خطوط حاشيه چپ و راست استفاده مي كنيم .
دو تا عكس زير رو ذخيره كنيد .
و
<div style="width: 248px;">
<div style="background-image: url('/sites/default/files/rounded_top.gif'); height: 20px;"></div>
<div style="border-left: 2px solid #B5B5B5; border-right: 2px solid #B5B5B5; padding: 10px;">
Some content. Some content. Some content.
Some content. Some content. Some content.
Some content. Some content. Some content.
</div>
<div style="background-image: url('/sites/default/files/rounded_bottom.gif'); height: 20px;"></div>
</div>
اين روش يه كم از روش قبلي كامل تره . چون ما مي تونيم ازش براي محتواي متغير استفاده كنيم .
ايجاد جعبه هاي گوشه گرد بدون استفاده از تصاوير
الان مي خوام طريقه ايجاد همون div ها رو بدون استفاه از تصاوير و فقط به كمك CSS و HTML توضيح بدم .
ما از چند تا div كمكي براي ايجاد گوشه هاي گرد استفاده خواهيم كرد . تصوير زير موقعيت و كار هر يك از اون ها رو نشون مي ده .
ما از مقادير متفاوتي براي خصوصيت margin براي هر شش div به منظور شكل دادن و تنظيم پيچ گوشه ها استفاده مي كنيم .
خط اول يه div هست كه خاصيت margin-left و margin-right اون برابر 6 ، background-color اون برابر black و height اون برابر 1px هستش .
خط دوم هم به همين شكل اما با margin كمتر . بقيه div ها هم به همين رواله .
اين كد كامل رو امتحان كنيد و حاصل رو ببينيد .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.round_corners .line_1,
.round_corners .line_2,
.round_corners .line_3,
.round_corners .line_4,
.round_corners .line_5 {
line-height: 0px;
font-size: 1px;
overflow: hidden;
}
.round_corners .line_1 {
margin-left: 6px;
margin-right: 6px;
background-color: black;
height: 1px;
}
.round_corners .line_2 {
margin-left: 4px;
margin-right: 4px;
border-left: 2px solid black;
border-right: 2px solid black;
height: 1px;
}
.round_corners .line_3 {
margin-left: 3px;
margin-right: 3px;
border-left: 1px solid black;
border-right: 1px solid black;
height: 1px;
}
.round_corners .line_4 {
margin-left: 2px;
margin-right: 2px;
border-left: 1px solid black;
border-right: 1px solid black;
height: 1px;
}
.round_corners .line_5 {
margin-left: 1px;
margin-right: 1px;
border-left: 1px solid black;
border-right: 1px solid black;
height: 2px;
}
.round_corners .content {
border-left: 1px solid black;
border-right: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="round_corners">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
<div class="line_4"></div>
<div class="line_5"></div>
<div class="content">Content</div>
<div class="line_5"></div>
<div class="line_4"></div>
<div class="line_3"></div>
<div class="line_2"></div>
<div class="line_1"></div>
</div>
</body>
</html>
البته روش هايي زيادي براي اين كار هست كه يكي از اينها خاصيتي است كه به CSS3 اضافه شده به نام border-radius كه وظيفه اش گرد كردن گوشه هاي div هستش كه دوتا مقدار طولي مي گيره . مقدار اول طول شعاع افقي و مقدار دوم طول شعاع عمودي يه بيضي فرضي در هر چهار گوشه رو كنترل مي كنه . براي اطلاعات بيشتر به اينجا مراجعه كنيد .
این روش سوم را دارم واسه بلاگفا کار می کنم، اگه انجام بشه فوق العاده است. ممنون
می بایست سرعت بارگذاری بیشتری هم نسبت به تصویر داشته باشه. نظر شما چیست؟