April 12th, 2008 CSS
در روزگار نه چندان دور گذشته، پیدا کردن چیزی در وب که دارای گوشه های گرد و خمیده باشد کاری بسیار سخت بود. اما با گذشت زمان و به وجود آمدن تکنیک های جدید، این کار به راحتی قابل اجرا می باشد. کاری که مطابق با اصول فنگ شویی در طراحی وب سایت نیز می باشد. اصولن گوشه های گرد باعث گردش انرژی بیشتر در وب سایت شما می شوند و حس بهتری را به بازدیدکننده القا می کنند!

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

برای انجام چنین کاری روش های بسیار مختلفی وجود دارد. در زبان های مختلف برنامه نویسی شما به راحتی می توانید چنین کاری را انجام دهید. اما در این پست به روش های انجام این کار در HTML و CSS می پردازیم.

یکی از روش های منسوخ این کار استفاده از جداول در HTML هستند. ابتدا شما باید در فتوشاپ یا نرم افزار های مشابه، دو شکل به صورت زیر ایجاد کنید.

سپس با استفاده از HTML یک جدول بسازید که دارای 3 قسمت باشد. برای بک گرند قسمت بالایی عکس شماره ی 1، و برای خانه ی پایینی نیز از عکس شماره 2 استفاده کنید. بک گرند خانه ی میانی را نیز با رنگی مشابه دو قسمت دیگر مقدار دهی کنید. با این تکنیک مزخرف و منسوخ که غیر از خودم کس دیگری را ندیدم از آن استفاده کند! شما می توانید یک محوطه با گوشه های گرد برای خودتان ایجاد کنید. البته واضح است که دستتان کاملن بسته است و به هیچ عنوان نمی توانید با دستکاری سورس، در اندازه ها تغییری ایجاد کنید. در ضمن خطوط سفید موجود در شکل را هم برای درک بیشتر موضوع قرار داده ام.

روش بعدی استفاده از CSS است و روش بسیار ساده ای است که البته فقط در فایرفاکس و سافاری قابل استفاده است. به مثال زیر توجه کنید:

#left_side {
margin-top: 10px;
padding-left:5px;
padding-right:5px;
font-family:tahoma;
float: left;
width: 160px;
-moz-border-radius: 0.8em;
background: #f1F6FE ;
}

شما به راحتی می توانید با اصافه کردن moz-border-radius: Xem- گوشه ی هر عنصری را له کنید! البته برای انجام این کار در سافاری، از دستور -webkit- به جای -moz- باید استفاده کنید. گوشه های ساید بار این وبلاگ نیز با این تکنیک گرد شده است. برای همین در مرورگر IE قابل مشاهده نمیباشد.

روش آخری که در این مقاله توضیح میدهم مجددن با استفاده از CSS است و بسیار حرفه ای تر از موارد بالا است و در همه ی مرورگر ها نیز قابل استفاده است. ابتدا باید در فتوشاپ یا نرم افزار های مشابه 4 گوشه گرد تر و تمیز درست کنید! درست مثل این 4 شکل!

حالا باید کد CSS لازم برای این کار را بنوسید. به کد زیر دقت کنید(بدون شماره های اولشان):

1 #corner_box {
background: #d9e5f8; }
2 #corner_top div {
background: url(pic1 url) no-repeat top left; }
3 #corner_top {
background: url(pic2 url) no-repeat top right; }
4 #corner_bottom div {
background: url(pic3 url) no-repeat bottom left; }
5 #corner_bottom {
background: url(pic4 url) no-repeat bottom right; }
6 #corner_top div, #corner_top, #corner_bottom div, #corner_bottom {
width: 100%;
height: 40px; }
7 #corner_content { margin: 0 30px; font-family: tahoma; text-align: justify; direction: rtl; }

کد کاملن واضح است. در خط 1 رنگ زمینه ی کل باکس را مشخص کرده ایم. در خط 2 تا 5 آن چهار گوشه ای که ساخته بودیم را سر جایشان قرار دادیم! در خط 6 اندازه ها را مشخص کرده ایم و در خط 7 نیز موقعیت و مشخصات متن موجود در جعبه مشخص شده است. البته شما می توانید هر تغییری که مایل هستید در این قسمت های ایجاد کنید.

اکنون باید در صفحه ی اصلی مورد نظرتان، از کد CSS بالا که نوشته اید استفاده کنید:

<div class=”corner_box”>
<div class=”corner_top”><div></div></div>
<div class=”corner_content”>
در این قسمت هر چیزی که مایل باشید می توانید قرار دهید. می توانید از این جعبه با اندازه ی مناسب، حتی به عنوان ساید بار استفاده کنید و تمامی محتوای وبلاگتان را در آن قرار دهید
</div>
<div class=”corner_bottom”><div></div></div>
</div>

در این مثال با هم یک جعبه ی بسیار ساده ساختیم! بدیهیست که می توان از همین تکنیک در هر جایی با مقدار دهی مناسب استفاده کرد. شاید روش های دیگری هم برای انجام این کار وجود داشته باشد اما این چند مورد ذکر شده، روش هایی بودند که بنده با آنها کار کرده ام و از صحت آنها اطمینان کامل دارم!

اگر مایل به یادگیری بیشتر CSS هستید می توانید از پست های مشابه که در قسمت نظرات وجود دارد استفاده کنید.