parsgreen.com
article

نحوه ساخت باکس گوشه گرد در فتوشاپ و css

web-css-photoshop-rectangle

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

ایجاد یک باکس گوشه گرد در فتوشاپ و انتقال آن به صفحات html


فتوشاپ ابزار بسیار کارآمدی در زمینه طراحی وب است، از طرفی صفحات وب در مقایسه با طرح های دسکتاپی و آفلاین، ویژگی های منحصر به فرد خود را دارند که این ویژگی ها از ترکیب طراحی گرافیکی با کدنویسی html و css به دست می آید، برای مثال در حالت معمولی به فرض اگر بخوهید از تصویری در یک ویدئو به عنوان پس زمینه کارتان استفاده کنید، ممکن است کل آن را وارد پروژه خود کنید، ولی در وب برای افزایش سرعت و انعطاف پذیری و در عین حال سبکی صفحات باید آن تصویر را با حداقل حجم به کمک css و قابلیت های آن در صفحه به طور هنرمندانه ای تکرار نمایید؛ این مقدمه را به یاد داشته باشید چرا که در ادامه به این روش کار خواهیم کرد.
برای ساخت یک باکس گوشه گرد ابتدا یک لایه جدید با اندازه دلخواه (مثلا 400 در 300 پیکسل) ایجاد کنید، سپس از قسمت شکل ها (shape) حالت Rounded Rectangle Tool را انتخاب و یک مستطیل در لایه خود ترسیم کنید.
web-rectangle-step1
آنگاه در قسمت Blending Options با استفاده از گزینه های storke و drop shadow و امکانات دیگر، استایل مناسبی به باکس خود بدهید.
web-rectangle-step2
حال طرح کلی باکس گوشه گردمان آماده است، اما برای به کاربردن آن در قالب های html، نیاز به تجزیه کردن تصویر و استفاده از css داریم، ابتدا اسکلت باکس را به وسیله کدهای css و بلاک های div ایجاد می کنیم.
<div class="rounded-corners-top">
</div>
<div class="rounded-corners-middle">
</div>
<div class="rounded-corners-bottom">
</div>
همان طور که در کد بالا می بینید، ما از سه بلاک div برای باکس خود استفاده می کنیم، بلاک تیتر، بلاک میانی و بلاک فوتر؛ تصویر بلاک میانی با تکرار در محور y ها باعث هم پوشانی آن می شود و از این رو ما تنها به یک تصویر با ارتفاع بسیار کم احتیاج داریم، برای این منظور باکس خود را در فتوشاپ به صورت زیر تجزیه می کنیم.
web-rectangle-step3
هر کدام از قسمتهای بالا را در یک فایل با پهنای پیکسلی یکسان ذخیره می کنیم (در نهایت باید سه تصویر تیتر، قسمت میانی و فوتر داشته باشیم که قسمت میانی با تکرار در محمور y ها توسط کدهای css هم پوشانی می شود).
تصویر بالای بلاک:
web-rectangle-top
تصویر قسمت میانی:
web-rectangle-middle
تصویر پائین بلاک:
web-rectangle-bottom
اکنون حاصل کار را در یک صفحه html که با کدهای css تنظیم شده است ببینید:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | باکس گوشه گرد با فتوشاپ</title>
<!-- http://webgoo.ir -->
<style type="text/css">
.rounded-corners-top{
width:400px;
height:30px;
display:block;
margin-left:auto;
margin-right:auto;
background-image:url(web-rectangle-top.jpg);
background-repeat:no-repeat;
background-position:top;
background-color:#CCC;
}
.rounded-corners-middle{
width:400px;
height:300px;
display:block;
margin-left:auto;
margin-right:auto;
background-image:url(web-rectangle-middle.jpg);
background-repeat:repeat-y;
background-color:#CCC;
}
.rounded-corners-bottom{
width:400px;
height:30px;
display:block;
margin-left:auto;
margin-right:auto;
background-image:url(web-rectangle-bottom.jpg);
background-repeat:no-repeat;
background-position:bottom;
background-color:#CCC;
}
</style>
</head>
<body>
<div class="rounded-corners-top">
</div>
<div class="rounded-corners-middle">
</div>
<div class="rounded-corners-bottom">
</div>
<hr />
باکس بالا از ترکیب سه تصویر کوچک و کدنویسی ایجاد شده است
</body>
</html>
پیش نمایش

ایجاد باکس گوشه گرد بدون استفاده از تصویر


css این قابلیت را دارد که بدون استفاده از تصویر، باکس های گوشه گرد و نرم ایجاد کند، البته این ویژه گی در همه مرورگرها پشتیبانی نمی شود و تنها در آنهایی که از css3 پشتیبانی می کنند قابل استفاده است، به هر صورت جهت اطلاعات بیشتر هم که شده بد نیست نگاهی به آن داشته باشیم.
در css3 از قابلیتی تحت عنوان radius و border برای این منظور استفاده می کنیم که برای سازگاری با مرورگرهای مختلف به چند صورت زیر نوشته می شود.
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
برای سازگاری با مرورگرهای مختلف باید از تمام حالت ها در یک کلاس استفاده کنیم؛ در زیر می توانید پیش نمایشی از کدهای بالا را در ایجاد یک باکس جهت تست مشاهده کنید.
پیش نمایش
علاوه بر این می توانید مقادیر border-radius را برای یک گوشه خاص نیز به کار ببرید، مثال زیر گویا است.
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» آموزش انتقال قالب از فتوشاپ به کد html و css
» طراحی باکس جستجو با فتوشاپ و CSS
» چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
» زیبا سازی فرم های وب با css
commentنظرات (۸ یادداشت برای این مطلب ارسال شده است)
نویسنده: aikman
زمان: ۱۵:۴۵:۲۷ - تاریخ: ۱۳۹۲/۰۳/۰۳
خییییییییییییییییییییییییییلی باحالی
نویسنده: پگاه
زمان: ۱۸:۴۲:۲۰ - تاریخ: ۱۳۹۲/۰۶/۱۹
تشکر از مطلب مفیدتون
زمان: ۱۱:۲۳:۳۸ - تاریخ: ۱۳۹۳/۰۲/۰۱
ممنون واقعا عالی بود
نویسنده: محمد
زمان: ۱۸:۰۰:۵۵ - تاریخ: ۱۳۹۳/۰۲/۱۸
سلام
من میخوام گوشه های یک کادر مستطیلی رو با استفاده از CSS مثلثی در بیارم چجوری امکان پذیره ؟
در ضمن برای رنگ زمینه این مستطیل از توالی رنگ استفاده کردم و فلت نیست یک روش برای در آوردن مثلت استفاده از border با طول و عرض صفر هست ولی به رنگ border نمیشه توالی با css داد
باید چیکار کنم؟
آیا به غیر از دستور border-radius که گوشه ها رو گرد میکنه دستوری هست که گوشه ها رو صاف برش بزنه که وقتی دو گوشه برش خورد به شکل مثلث در بیاد ؟
پاسخ: 
سلام
تا آنجا که اطلاع داریم CSS برای این هدف شما خیلی مناسب نیست! برای اینگونه موارد باید با عناصر گرافیکی + CSS طرحتان را پیاده کنید، با صرف استایل CSS تنها در چارچوب تعریف شده ای امکان ایجاد جلوه های بصری وجود دارد، به طور مثال بحث توالی رنگی برای border امکانپذیر نیست، border-radius نیز برای گرد کردن (شعاع = radius) لبه ها است و برای مثلثی کردن (برش زدن) از روشی که اشاره کردید استفاده می شود.
http://apps.eky.hk/css-triangle-generator
نویسنده: عسل
زمان: ۱۷:۰۲:۰۱ - تاریخ: ۱۳۹۳/۰۳/۱۰
سلام من میخواستم دو تا باکس رو پهلوی هم قرار بدم اما میره زیرش چطوری میتونم دو تا باکس در کنار هم قرار بگیره؟
پاسخ: 
سلام
لطفا نحوه استفاده از خاصیت display-inline و float‌ در CSS را در وب جستجو کنید.
نویسنده: محمد
زمان: ۲۲:۱۲:۱۶ - تاریخ: ۱۳۹۳/۰۸/۰۷
با خاصیت border-radius هم میشه اینکارو کرد دیگه
پاسخ: 
اگر دقت کنید در بخش دوم آموزش خاصیت border-radius مطرح شده، منتها این خاصیت هنوز در برخی از مرورگرهای قدیمی پشتیبانی نمی شود!
نویسنده: فائزه
زمان: ۱۴:۲۷:۱۹ - تاریخ: ۱۳۹۴/۰۵/۲۶
خیلی خوب و اموزنده ..... مرسی
نویسنده: محسن
زمان: ۱۷:۰۰:۳۴ - تاریخ: ۱۳۹۵/۰۳/۲۲
سلام استاد وقت بخیر
میخواستم بدونم اون کدهایی رو که برای css3 مثال زدید بایستی کدوم قسمت استایل و کلاسهای یک صفحه قرار بدیم تا بتونیم مقادیرش رو قرار بدیم اگه میشه یه نمونه کامل هم برای css3 این کدها بزنید همونطور که برا فوتوشاپ مثال زدید
پاسخ: 
اگر به سورس HTML صفحه پیش نمایش توجه کنید، کامل مشخص است، در واقع کافی است استایل ها را در یک کلاس CSS استفاده نمائید.
http://webgoo.ir/example/other/css-rounded-corners.html
لطفا سورس HTML آدرس بالا را بررسی کنید.




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

7 × 7
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...