جلوه گوشه گرد div ها در طراحی صفحه وب

نحوه طراحی وب، استفاده به جا از تصاویر و جلوه های ویژه عامل مهمی در جلب توجه بازدید کننده و حفظ آن است. اگر کاربر وب از جلوه بصری بکار رفته و محتوا راضی باشد حتما باز هم سراغ آن صفحه وب خواهد رفت. با این پستم در رابطه با جلوه گرد کردن گوشه دایو ها همراه باشید.

یکی از نکات مهم در طراحی استفاده از div جداکننده و کد های مرتبط با آن طبق استاندارد w3c می باشد. روش های مختلف و بعضا جالبی برای گرد کردن گوشه های دایو مرسوم است.

۱. اولین روش استفاده از تصویری ثابت با قابلیت افزودن نوشته داخل آن مثل یک جعبه ( این تصویر) است، اولین روش نقص های زیادی دارد، باید حواسمان به طول و عرض تصویر با گوشه گرد بک گراند شده باشد، نباید تعداد کلماتی که اضافه می کنیم از حدی فراتر رود، در ضمن کد های بکار رفته احتمالا در همه مرورگر ها نمایش یکسانی نخواهد داشت. یعنی این کد ها:

<div style= background-image: url('/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>

توضیح اینکه باید آدرس تصویر را مشخص کرد و به تنظیمات طول و عرض هم توجه داشت. بجای some content باید متن یا کد دلخواه رو نوشت.

۲. استفاده از تصویر تنها در بالا و پایین جعبه دایو و افزودن نوشته و یا کد وسط آن و border بندی حاشیه راست و چپ متناظر با تصویر بالا و پایین.
کد ها بصورت زیر هستند:

<div style= width: 248px; >
<div style= background-image: url('/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('/rounded_bottom.gif'); height: 20px; ></div>
</div>

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

۳. سومین روش، طراحی فوق العاده دایو ها و جعبه ها بوسیله css است. ابتدا کد های زیر را با ویرایش دلخواه خودتان در قسمت استایل قالب قرار بدید.

<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>

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

تصویر مطمئنا همه چی را توضیح می دهد. در فایل استایل ما ۵ خط تعریف شده ولی تصویر ۶ خط را نشان می دهد عیبی ندارد بستگی به خودتان دارد می توانید این لاین ها را اضافه یا کم کنید.

لاین ها دارای رنگ می باشند با سلیقه خودتان می تونید پس زمینه و داخل هر لاین را رنگی کنید و پس زمینه داخل جعبه را هم مثل قسمت ۲ از همان روش استفاده کنید.

در نهایت هم کد های زیر را هر جایی که نیاز به دایوی با گوشه گرد داشتید قرار بدید.

<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>Content</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

content موجود در کد محل مورد نظر شماست آنجا کد هایی می بایست قرار گیرد که داخل دایو گوشه گرد نمایش می بیند.اگه نیاز به دیدن مثالی از این روش و چگونگی نمایش آن دارید به وبلاگ سابق من در بلاگفا سر بزنید در صفحه اصلی از این نوع دایو ها با جلوه های ویژه زیادی را خواهید دید.

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

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

آخرین ویرایش ۰۹ جولای ۲۰۱۱