ahmadbadpey
دوشنبه 30 شهریور 1388, 20:47 عصر
اين روز ها ايجاد جعبه ها يا divider (جداكننده ها) يي با گوشه هاي گرد توي طراحي صفحات وب خيلي مرسومه و زيبايي خاصي به صفحه ميده . چندين راه براي اين كار وجود داره كه قبلا دوستانمان توي اين تاپيك (http://www.barnamenevis.org/forum/showthread.php?t=123526) در موردش بحث كردن و راه هاي خوبي هم پيشنهاد شده .اما من مي خوام راه هاي ساده تري رو هم پيشنهاد كنم . با هم سه روش اين كار رو بررسي مي كنيم :
ايجاد جعبه هاي گوشه گرد با عرض و ارتفاع ثابت
اين ساده ترين راهه ! ما اول تصويري با گوشه هاي گرد و با عرض و ارتفاع ثابت درست مي كنيم . و اونو به عنوان پس زمينه يه div قرار مي ديم . همچنين با CSS ، يه padding 4 پيكسلي هم به div مون مي ديم تا مطمئن بشيم كه متن داخل اون با border هاي عكسمون تداخل نداشته باشه .
روي عكس زير راست كليك كرده و اونو ذخيره كنيد تا استفاده كنيم .
http://www.table2css.com/sites/default/files/rounded_fixed.gif
اين هم كد 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>
اين هم نتيجه :
http://tehranpic.net/images/4s5t7exa9us0r6s5f6.jpg
نكته : اين راه ساده و سريعيه . اين براي وقتايي به كار مي آد كه محتواي div ما ثابت باشه و تغيير نكنه . در غير اين صورت ممكنه متنمون از div مون بزنه بيرون و كار رو خراب كنه .
ايجاد جعبه هاي گوشه گرد با عرض ثابت و ارتفاع متغير
توي اين روش ما از دو تا عكس براي بالا و پايين جعبه مون استفاه مي كنيم . همچنين از يه div كه قراره محتوي متن ما باشه استفاده مي كنيم . براي اين div از خاصيت border براي كشيدن خطوط حاشيه چپ و راست استفاده مي كنيم .
دو تا عكس زير رو ذخيره كنيد .
http://www.table2css.com/sites/default/files/rounded_upper.gif
و
http://www.table2css.com/sites/default/files/rounded_lower.gif
اين هم كد CSS :
<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>
اين هم نتيجه :
http://tehranpic.net/images/94ob6d7e2ulr69tkufld.jpg
دقت كنيد كه عرض و رنگ border مربوط به div وسطي رو همرنگ border عكس هاي بالا و پايين انتخاب كنيد . براي ست شدن !!! اگه شما از عكس هاي ديگه اي براي بالا و پايين استفاده كنيد مجبوريد از كد CSS متفاوتي براي div وسطي استفاده كنيد .
اين روش يه كم از روش قبلي كامل تره . چون ما مي تونيم ازش براي محتواي متغير استفاده كنيم .
ايجاد جعبه هاي گوشه گرد بدون استفاده از تصاوير
الان مي خوام طريقه ايجاد همون div ها رو بدون استفاه از تصاوير و فقط به كمك CSS و HTML توضيح بدم .
ما از چند تا div كمكي براي ايجاد گوشه هاي گرد استفاده خواهيم كرد . تصوير زير موقعيت و كار هر يك از اون ها رو نشون مي ده .
http://www.table2css.com/sites/default/files/round_corners_scheme.png
همونطور كه مي بينين اون قسمت هايي از جعبه مون كه قراره گوشه هاي گرد رو تشكيل بدن به چند خط كه هر خط در واقع يه div با خاصيت هايي از css هست تقسيم شده . (به شش خط بالا و پايين توي شكل نگاه كنيد .)
ما از مقادير متفاوتي براي خصوصيت 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>
شما مي تونيد با افرايش دادن تعداد div ها و كلاس هاي متناظرشون ميزان گرد بودن گوشه ها رو كنترل كنيد . يا مي تونيد با كم كردن تعداد div ها به 5 يا كمتر از حجم كدتون كم كنيد .
البته روش هايي زيادي براي اين كار هست كه دوستان توي اون تاپيك بهش اشاره كردن . يكي از اينها خاصيتي است كه به CSS3 اضافه شده به نام border-radius كه وظيفه اش گرد كردن گوشه هاي div هستش كه دوتا مقدار طولي مي گيره . مقدار اول طول شعاع افقي و مقدار دوم طول شعاع عمودي يه بيضي فرضي در هر چهار گوشه رو كنترل مي كنه . براي اطلاعات بيشتر به اينجا (http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius) مراجعه كنيد .
ايجاد جعبه هاي گوشه گرد با عرض و ارتفاع ثابت
اين ساده ترين راهه ! ما اول تصويري با گوشه هاي گرد و با عرض و ارتفاع ثابت درست مي كنيم . و اونو به عنوان پس زمينه يه div قرار مي ديم . همچنين با CSS ، يه padding 4 پيكسلي هم به div مون مي ديم تا مطمئن بشيم كه متن داخل اون با border هاي عكسمون تداخل نداشته باشه .
روي عكس زير راست كليك كرده و اونو ذخيره كنيد تا استفاده كنيم .
http://www.table2css.com/sites/default/files/rounded_fixed.gif
اين هم كد 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>
اين هم نتيجه :
http://tehranpic.net/images/4s5t7exa9us0r6s5f6.jpg
نكته : اين راه ساده و سريعيه . اين براي وقتايي به كار مي آد كه محتواي div ما ثابت باشه و تغيير نكنه . در غير اين صورت ممكنه متنمون از div مون بزنه بيرون و كار رو خراب كنه .
ايجاد جعبه هاي گوشه گرد با عرض ثابت و ارتفاع متغير
توي اين روش ما از دو تا عكس براي بالا و پايين جعبه مون استفاه مي كنيم . همچنين از يه div كه قراره محتوي متن ما باشه استفاده مي كنيم . براي اين div از خاصيت border براي كشيدن خطوط حاشيه چپ و راست استفاده مي كنيم .
دو تا عكس زير رو ذخيره كنيد .
http://www.table2css.com/sites/default/files/rounded_upper.gif
و
http://www.table2css.com/sites/default/files/rounded_lower.gif
اين هم كد CSS :
<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>
اين هم نتيجه :
http://tehranpic.net/images/94ob6d7e2ulr69tkufld.jpg
دقت كنيد كه عرض و رنگ border مربوط به div وسطي رو همرنگ border عكس هاي بالا و پايين انتخاب كنيد . براي ست شدن !!! اگه شما از عكس هاي ديگه اي براي بالا و پايين استفاده كنيد مجبوريد از كد CSS متفاوتي براي div وسطي استفاده كنيد .
اين روش يه كم از روش قبلي كامل تره . چون ما مي تونيم ازش براي محتواي متغير استفاده كنيم .
ايجاد جعبه هاي گوشه گرد بدون استفاده از تصاوير
الان مي خوام طريقه ايجاد همون div ها رو بدون استفاه از تصاوير و فقط به كمك CSS و HTML توضيح بدم .
ما از چند تا div كمكي براي ايجاد گوشه هاي گرد استفاده خواهيم كرد . تصوير زير موقعيت و كار هر يك از اون ها رو نشون مي ده .
http://www.table2css.com/sites/default/files/round_corners_scheme.png
همونطور كه مي بينين اون قسمت هايي از جعبه مون كه قراره گوشه هاي گرد رو تشكيل بدن به چند خط كه هر خط در واقع يه div با خاصيت هايي از css هست تقسيم شده . (به شش خط بالا و پايين توي شكل نگاه كنيد .)
ما از مقادير متفاوتي براي خصوصيت 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>
شما مي تونيد با افرايش دادن تعداد div ها و كلاس هاي متناظرشون ميزان گرد بودن گوشه ها رو كنترل كنيد . يا مي تونيد با كم كردن تعداد div ها به 5 يا كمتر از حجم كدتون كم كنيد .
البته روش هايي زيادي براي اين كار هست كه دوستان توي اون تاپيك بهش اشاره كردن . يكي از اينها خاصيتي است كه به CSS3 اضافه شده به نام border-radius كه وظيفه اش گرد كردن گوشه هاي div هستش كه دوتا مقدار طولي مي گيره . مقدار اول طول شعاع افقي و مقدار دوم طول شعاع عمودي يه بيضي فرضي در هر چهار گوشه رو كنترل مي كنه . براي اطلاعات بيشتر به اينجا (http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius) مراجعه كنيد .