آموزش ایجاد گوشه های گرد به وسیله تصاویر و css

E-Boy · Jan 29, 2010

سلام خدمت همه دوستان .
یه مدت پیش یکی از دوستان عزیز ( Pouya Saadeghi ) آموزشی در رابطه با گرد کردن گوشه های بلوک ها در صفحات وب در این انجمن قرار دادند .
در اون تاپیک قرار شد که یه روزی هم بنده آموزش گرد کردن گوشه ها رو با استفاده از تصاویر در این انجمن قرار بدم و بالاخره امروز یه وقت آزاد گیر آوردم و تصمیم گرفتم که این آموزش رو براتون بنویسم .

1 - اول از هر چیزی نیازمند به ایجاد چهار تصویر به صورت زیر برای گوشه بلوک ها هستیم :

2 - بهترین روش برای ایجاد این تصاویر تقسیم یک دایره به چهار قسمت مساوی می باشد .
من در زیر این کار را به وسیله نرم افزار فتوشاپ انجام دادم .
شما می توانید از ابزار Slice Tool در فتوشاپ برای انجام این کار استفاده نمایید :

3 - حال باید تصاویر را با نام های زیر در پوشه ای به نام images ذخیره نماییم :

تصویر سمت راست و بالا : top-r
تصویر سمت راست و پایین : bottom-r
تصویر سمت چپ و بالا : top-l
تصویر سمت چپ و پایین : bottom-l

4 - حال پس از مراحل بالا نوبت به ایجاد فایل html می رسد .
فایلی با نام index.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>
</head>
<body>
</body>
</html>

کد های بالا اجزای اصلی هر صفحه وب ایجاد شده با زبان html می باشند و وجود آن ها در صفحه الزامیست .

5 - حال صفحه ای دیگر با نام style.css ایجاد می نماییم که این صفحه محل قرار گیری کد های css ما می باشد .

6 - پس از ایجاد صفحه style.css کد زیر را به صفحه index.html اضافه می نماییم تا صفحه style.css را به آن پیوند داده باشیم .

کد:

<link rel="stylesheet" type="text/css" href="style.css" />

توجه داشته باشید که کد بالا باید بین تگ های <head> و <head/> قرار بگیرد .

7 - حال نوبت به ایجاد بلوک اصلی که قرار است گوشه های آن را گرد نماییم میرسد .
برای این کار دستورات زیر را به میان تگ های <body> و <body/> در صفحه index.html اضافه می نماییم :

کد:

<div id="block">
</div>

8 - حال دو بلوک دیگر در میان بلوک block اضافه می نماییم که یکی در پایین و دیگری در بالای بلوک block قرار می گرید :

کد:

<div id="rnd-top"></div>
<div id="rnd-bottom"></div>

9 - حالا بلوک های block و rnd-top و rnd-bottom را به وسیله css پیکر بندی می کنیم و دستورات css را در فایل style.css اضافه می نماییم .
کد های پیکر بندی را در زیر می توانید مشاهده نمایید :

کد:

#block {
    background: #C6D9EA;
    width: 500px;
    font: 11px Tahoma;
    color: #000033;
}

در کد های بالا توسط دستور background رنگ زمینه بلوک block را تعیین کردیم .
توسط width عرض را تعیین نمودیم .
و با font اندازه و نوع فونتی که می خواهیم در بلوک block نمایش داده شود را اعلام نمودیم .
با color هم رنگ فونت را تعیین مورد نظر را تعیین نمودیم .

کد:

#rnd-top {
    background: url(images/top-r.gif) no-repeat right top;
}

در کد های بالا توسط دستور background آدرس تصویر زمینه بلوک rnt-top را تعیین نمودیم .
همچنین توسط norepeat از تکرار تصویر زمینه جلو گیری کردیم .
و با top و right هم اعلام نمودیم که تصویر باید در بالا و سمت راست بلوک قرار بگیرد .

کد:

#rnd-bottom {
    background: url(images/bottom-r.gif) no-repeat right bottom;
}

در کد های بالا توسط دستور background آدرس تصویر زمینه بلوک rnt-bottom را تعیین نمودیم .
همچنین توسط norepeat از تکرار تصویر زمینه جلو گیری کردیم .
و با bottom و right هم اعلام نمودیم که تصویر باید در پایین و سمت راست بلوک قرار بگیرد .

9 - توسط کد های بالا فقط گوشه های سمت راست بلوک مورد نظر تعیین شدند .
برای تعیین بلوک های سمت راست باید از دستور <img> در خود فایل index.html به صورت زیر استفاده نماییم :

کد:

<div class="rnd-top"><img src="images/top-l.gif" alt="" width="30" height="30" /></div>
<div class="rnd-bottom"><img src="images/bottom-l.gif" alt="" width="30" height="30" /></div>

10 - حالا می توانیم متن یا محتویات مورد نظر خود را توسط یک تگ <p> در میان دو بلوک rnd-top و rnd-bottom
اضافه نماییم .
به علت این که برای بلوک block ارتفاعی تعیین نشده ارتفاع این بلوک با توجه به محتویات درون آن تغییر و خواهد کرد .

11 - در آخر کد های ما باید به صورت زیر در آمده باشد :

کد های صفحه index.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>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="block">
        <div id="rnd-top"><img src="images/top-l.gif" alt="" width="30" height="30" /></div>
        <p style="text-align: center;"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
        <div id="rnd-bottom"><img src="images/bottom-l.gif" alt="" width="30" height="30" /></div>
    </div>
</body>
</html>

کد های فایل style.css

کد:

#block {
    background: #C6D9EA;
    width: 500px;
    font: 11px Tahoma;
    color: #000033;
}
#rnd-top {
    background: url(images/top-r.gif) no-repeat right top;
}
#rnd-bottom {
    background: url(images/bottom-r.gif) no-repeat right bottom;
}

12 - حالا پوشه ای به نام RND-Block ایجاد نمایید و فایل های index.html و style.css و پوشه images را درون آن قرار دهید .

13 - در این مرحله می توانید با اجرای فایل index.html نتیجه کار خود را ببنید .
خروجی باید مانند عکس زیر باشد :

بالاخره تموم شد ، خسته نباشد .
امیدوارم از این آموزش نهایت استفاده را ببرید .
موفق باشید .

Saeed · Jan 29, 2010

سلام

اول از تشکر دوم چرا این همه دردسر !؟؟ :shock:

از کد زیر استفاده کن بسیار راحت تر و کوتاهتر کاره بالا رو انجام میده :wink:

-moz-border-radius:3px;-webkit-border-radius:3px;

موفق باشی

pouya saadeghi · Jan 29, 2010

DrSaeed گفت:
سلام

اول از تشکر دوم چرا این همه دردسر !؟؟ از کد زیر استفاده کن بسیار راحت تر و کوتاهتر کاره بالا رو انجام میده

-moz-border-radius:3px;-webkit-border-radius:3px;

موفق باشی

اين كد فقط براي موتورهاي webkit‏ و gecko‏ كار ميكنه (chrome,firefox,safari)
و جناب اينترنت اكسپلورر فلان فلان شده ازش پشتيباني نميكنه.
ملت ايران هم كه هنوز از‎ IE ‎استفاده ميكنن...

E-Boy · Jan 29, 2010

DrSaeed گفت:
سلام

اول از تشکر دوم چرا این همه دردسر !؟؟ از کد زیر استفاده کن بسیار راحت تر و کوتاهتر کاره بالا رو انجام میده

-moz-border-radius:3px;-webkit-border-radius:3px;

موفق باشی

سلام دوست عزیز .
برای تشکر می تونید از دکمه تشکر پایین هر پست استفاده کنید .
اما درباره کد باید بگم که این کد فقط در مرورگر های نسل موزیلا کار می کنه و در 80 درصد مرورگر های مورد استفاده کاربر ها کار نمی کنه .
اما با این روش که بنده گفتم 100 درصد نگم اما در 95 درصد مرورگر های مورد استفاده کاربر ها کار می کنه .
همیشه برای این که به یه نتیجه دقیق برسید باید زیاد زحمت بکشید ( یک سخن از خودم که همین الآن گفتم :green:

) .
سوالی بود در خدمتم .
موفق باشید .

echessdesign · Feb 2, 2010

آموزش خیلی خوبی بود، دستت درد نکنه.
لطفا سورس رو هم ضمیمه بفرمایید.

E-Boy · Feb 2, 2010

echessdesign گفت:
آموزش خیلی خوبی بود، دستت درد نکنه.
لطفا سورس رو هم ضمیمه بفرمایید.

سلام خدمت آقای سعیدی عزیز .
خواهش می کنم .
فایل سورس رو هم به این پست پیوند کردم .
ولی انگار دوستان خیلی از این آموزش خوشحال نشدن .
76 بازدید ولی فقط 2 تا تشکر . ( :cry:

)
خلاصه از این که به این آموزش نظر دادین خیلی خوشحال شدم و نهایت تشکر رو دارم .
موفق باشید .

pouya saadeghi · Feb 2, 2010

E-Boy گفت:
ولی انگار دوستان خیلی از این آموزش خوشحال نشدن .
76 بازدید ولی فقط 2 تا تشکر . ( )

چقدر عجله دارید خوب! این انجمن نسبت به بقیه انجمن ها زیاد شلوغ نیست. :rose:

بچه ها کم کم تشکر میکنن :green:

(منم دفعه اول با موبایل پست رودیدم که تو قالب موبایل دکمه تشکرنداره)

میر حسن · Feb 27, 2010

واما یه سوال مبتدیانه از محضر بزرگان
نمی شد با معرفی کردن چهار image این کار رو انجام بدیم؟
یا با ساختن چهار div?

به عبارت دیگه، دلیل اینکه اومدیم و دو تا div قرار دادیم و دو تا image چیه؟