• 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
گرد كردن گو شه هاي div ها به سه روش
#1
اين روز ها ايجاد جعبه ها يا divider (جداكننده ها) يي با گوشه هاي گرد توي طراحي صفحات وب خيلي مرسومه و زيبايي خاصي به صفحه ميده . چندين راه براي اين كار وجود داره .اما من مي خوام راه هاي ساده تري رو هم پيشنهاد كنم . با هم سه روش اين كار رو بررسي مي كنيم :
ايجاد جعبه هاي گوشه گرد با عرض و ارتفاع ثابت
اين ساده ترين راهه ! ما اول تصويري با گوشه هاي گرد و با عرض و ارتفاع ثابت درست مي كنيم . و اونو به عنوان پس زمينه يه div قرار مي ديم . همچنين با CSS ، يه padding 4 پيكسلي هم به div مون مي ديم تا مطمئن بشيم كه متن داخل اون با border هاي عكسمون تداخل نداشته باشه .

روي عكس زير راست كليك كرده و اونو ذخيره كنيد تا استفاده كنيم .
[عکس: 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>
اين هم نتيجه :
[عکس: 4s5t7exa9us0r6s5f6.jpg]
نكته : اين راه ساده و سريعيه . اين براي وقتايي به كار مي آد كه محتواي div ما ثابت باشه و تغيير نكنه . در غير اين صورت ممكنه متنمون از div مون بزنه بيرون و كار رو خراب كنه .

ايجاد جعبه هاي گوشه گرد با عرض ثابت و ارتفاع متغير
توي اين روش ما از دو تا عكس براي بالا و پايين جعبه مون استفاه مي كنيم . همچنين از يه div كه قراره محتوي متن ما باشه استفاده مي كنيم . براي اين div از خاصيت border براي كشيدن خطوط حاشيه چپ و راست استفاده مي كنيم .
دو تا عكس زير رو ذخيره كنيد .
[عکس: rounded_upper.gif]
و
[عکس: 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>
اين هم نتيجه :
[عکس: 94ob6d7e2ulr69tkufld.jpg]
دقت كنيد كه عرض و رنگ border مربوط به div وسطي رو همرنگ border عكس هاي بالا و پايين انتخاب كنيد . براي ست شدن !!! اگه شما از عكس هاي ديگه اي براي بالا و پايين استفاده كنيد مجبوريد از كد CSS متفاوتي براي div وسطي استفاده كنيد .

اين روش يه كم از روش قبلي كامل تره . چون ما مي تونيم ازش براي محتواي متغير استفاده كنيم .

ايجاد جعبه هاي گوشه گرد بدون استفاده از تصاوير
الان مي خوام طريقه ايجاد همون div ها رو بدون استفاه از تصاوير و فقط به كمك CSS و HTML توضيح بدم .
ما از چند تا div كمكي براي ايجاد گوشه هاي گرد استفاده خواهيم كرد . تصوير زير موقعيت و كار هر يك از اون ها رو نشون مي ده .
[عکس: 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 هستش كه دوتا مقدار طولي مي گيره . مقدار اول طول شعاع افقي و مقدار دوم طول شعاع عمودي يه بيضي فرضي در هر چهار گوشه رو كنترل مي كنه . براي اطلاعات بيشتر به اينجا مراجعه كنيد .
  پاسخ
#2
فتبارک الله الحسن الخالقین
علم تاج افتخار دنیا و یادگار پس از مرگ است
  پاسخ
تشکر شده توسط :
#3
خیلی ممنون!
من سایت های زیادی دیدم این گوشه های گرد رو میسازه بهت میده ، ولی شما یک چیز دیگه ای!Wink

بازم ممنون خیلی دنبالش بودم....Big Grin
  پاسخ
تشکر شده توسط :
#4
با جی کوئری با یک خط تمام بوردر ها رو روند یا کورنر میکنه Big Grin
  پاسخ
تشکر شده توسط : molana
#5
این سی اس اس ۳ قرار نیست به عمر ما وصال بده؟ :دی
Two hands working can do more than a thousand clasped in prayer
  پاسخ
تشکر شده توسط :
#6
فکر نمی کنم
  پاسخ
تشکر شده توسط :
#7
(۱۳۸۸ مهر ۲۰, ۰۵:۳۲ ق.ظ)zoghal نوشته: با جی کوئری با یک خط تمام بوردر ها رو روند یا کورنر میکنه Big Grin

چه جوری میشه بگی؟
  پاسخ
تشکر شده توسط :
#8
تو بروزهای دیگه که با سی اس اس به راحتی امکان پذیر هست
اما در ie نمیشه که با این پلاگین در ای یی هم امکان پذیر هست

http://roundcorners.avinoam.info/#Home
  پاسخ
تشکر شده توسط : molana farhad.programmer scooter
#9
(۱۳۸۸ شهریور ۳۰, ۱۱:۲۱ ب.ظ)AHMADBADPEY نوشته: اين روز ها ايجاد جعبه ها يا divider (جداكننده ها) يي با گوشه هاي گرد توي طراحي صفحات وب خيلي مرسومه و زيبايي خاصي به صفحه ميده . چندين راه براي اين كار وجود داره .اما من مي خوام راه هاي ساده تري رو هم پيشنهاد كنم . با هم سه روش اين كار رو بررسي مي كنيم :
ايجاد جعبه هاي گوشه گرد با عرض و ارتفاع ثابت
اين ساده ترين راهه ! ما اول تصويري با گوشه هاي گرد و با عرض و ارتفاع ثابت درست مي كنيم . و اونو به عنوان پس زمينه يه div قرار مي ديم . همچنين با CSS ، يه padding 4 پيكسلي هم به div مون مي ديم تا مطمئن بشيم كه متن داخل اون با border هاي عكسمون تداخل نداشته باشه .

روي عكس زير راست كليك كرده و اونو ذخيره كنيد تا استفاده كنيم .
[عکس: 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>
اين هم نتيجه :
[عکس: 4s5t7exa9us0r6s5f6.jpg]
نكته : اين راه ساده و سريعيه . اين براي وقتايي به كار مي آد كه محتواي div ما ثابت باشه و تغيير نكنه . در غير اين صورت ممكنه متنمون از div مون بزنه بيرون و كار رو خراب كنه .

ايجاد جعبه هاي گوشه گرد با عرض ثابت و ارتفاع متغير
توي اين روش ما از دو تا عكس براي بالا و پايين جعبه مون استفاه مي كنيم . همچنين از يه div كه قراره محتوي متن ما باشه استفاده مي كنيم . براي اين div از خاصيت border براي كشيدن خطوط حاشيه چپ و راست استفاده مي كنيم .
دو تا عكس زير رو ذخيره كنيد .
[عکس: rounded_upper.gif]
و
[عکس: 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>
اين هم نتيجه :
[عکس: 94ob6d7e2ulr69tkufld.jpg]
دقت كنيد كه عرض و رنگ border مربوط به div وسطي رو همرنگ border عكس هاي بالا و پايين انتخاب كنيد . براي ست شدن !!! اگه شما از عكس هاي ديگه اي براي بالا و پايين استفاده كنيد مجبوريد از كد CSS متفاوتي براي div وسطي استفاده كنيد .

اين روش يه كم از روش قبلي كامل تره . چون ما مي تونيم ازش براي محتواي متغير استفاده كنيم .

ايجاد جعبه هاي گوشه گرد بدون استفاده از تصاوير
الان مي خوام طريقه ايجاد همون div ها رو بدون استفاه از تصاوير و فقط به كمك CSS و HTML توضيح بدم .
ما از چند تا div كمكي براي ايجاد گوشه هاي گرد استفاده خواهيم كرد . تصوير زير موقعيت و كار هر يك از اون ها رو نشون مي ده .
[عکس: 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 هستش كه دوتا مقدار طولي مي گيره . مقدار اول طول شعاع افقي و مقدار دوم طول شعاع عمودي يه بيضي فرضي در هر چهار گوشه رو كنترل مي كنه . براي اطلاعات بيشتر به اينجا مراجعه كنيد .
  پاسخ
تشکر شده توسط :
#10
مفید بود ... تشکر
ترس تنها احساسی است که دروغ نمی گوید! Confused http://www.tarsoo.ir ترسناک ترین سایت ایرانی
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان