آگهی
article

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

web-css-photoshop-rectangle

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

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


برنامه فتوشاپ (Adobe Photoshop) ابزار بسیار کارآمدی در زمینه گرافیک و به تبع طراحی وب است، از طرفی صفحات وب در مقایسه با طرح های دسکتاپی و آفلاین ویژگی های منحصر به فرد خود را دارند که این ویژگی ها از ترکیب طراحی گرافیکی با کدنویسی 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
هر کدام از قسمت های بالا را در یک فایل تصویر با فرمت png یا jpg و پهنای پیکسلی یکسان ذخیره می کنیم (در نهایت باید سه تصویر بالا، میانی و پائین داشته باشیم که قسمت میانی با تکرار در محور y ها توسط کدهای استایل CSS همپوشانی می شود).
تصویر بالای بلاک:
web-rectangle-top
تصویر قسمت میانی:
web-rectangle-middle
تصویر پائین بلاک:
web-rectangle-bottom
می توانیم حاصل کار را در یک صفحه HTML که با کدهای CSS تنظیم شده است ببینیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | طراحی و ایجاد باکس گوشه گرد با فتوشاپ و CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    text-align:justify;
    font-size:12px;
    direction:rtl;
}
.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>
- باکس بالا از ترکیب سه تصویر کوچک طراحی شده با فتوشاپ و کدنویسی HTML و CSS ایجاد شده است.<br>
- در بلاک میانی، تصویر پس زمینه در راستای محور y ها تکرار و همپوشانی شده است.<br>
</body>
</html>
پیش نمایش

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


CSS نسخه 3 این قابلیت را دارد که بدون استفاده از تصویر، باکس های گوشه گرد و نرم ایجاد کند، البته این ویژگی در مرورگرهای قدیمی پشتیبانی نمی شود و تنها در مرورگرهایی که از CSS3 پشتیبانی می کنند قابل استفاده است، خوشبختانه در حال حاضر و در تاریخ نگارش این مطلب نسخه های به روز اغلب مرورگرها از این قابلیت برخوردار شده اند و به جهت سازگاری جای نگرانی چندانی نخواهیم داشت.
در CSS3 از دستوری تحت عنوان radius و border برای این منظور استفاده می کنیم که برای سازگاری با مرورگرهای مختلف به چند صورت زیر نوشته می شود.
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
برای سازگاری با مرورگرهای مختلف باید از تمام حالت ها در یک کلاس استفاده کنیم، در زیر می توانیم پیش نمایشی از کدهای بالا را در ایجاد یک بلاک div جهت تست مشاهده کنیم.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | طراحی و ایجاد باکس گوشه گرد با CSS3</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    text-align:justify;
    font-size:12px;
    direction:rtl;
}
.rounded-corners{
    display:block;
    width:400px;
    height:200px;
    border:1px #666 solid;
    margin-left:auto;
    margin-right:auto;
    background-color:#ECF5FF;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;          
}
</style>
</head>
<body>
<div class="rounded-corners">
</div>
<hr>
- قابلیت باکس های گوشه گرد بدون استفاده از تصویر، در نسخه های قدیمی مرورگر اینترنت اکسپلورر به خوبی پشتیبانی نمی شود.<br>
- با توجه به اینکه امروزه اغلب مرورگرها از CSS3 پشتیبانی می کنند استفاده از روش کدنویسی بر تصویر ارجحیت دارد.<br>
</body>
</html>
پیش نمایش
علاوه بر این می توانیم مقادیر border-radius را برای یک گوشه خاص نیز به کار ببریم، برای این منظور به جای عبارت border-radius باید یکی از مقادیر زیر را جایگزین کنیم.
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
مثال زیر گویا است:
border-top-left-radius:  8px;
-moz-border-top-left-radius: 8px;
-webkit-border-top-left-radius: 8px;
-khtml-border-top-left-radius: 8px;
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟
» قابلیت های کاربردی CSS3 در طراحی وب
» طراحی باکس جستجو با فتوشاپ و CSS
» زیبا سازی فرم های وب با CSS
» آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
commentنظرات (۸ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: 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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





9 × 4
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form مهدی
در:
سلام من از کد زیر استفاده کردم ولی وقتی که اعمال میشه کل css های سایتم میپره.. چه باید بکنم
۰۹:۵۵:۵۰ ۱۳۹۹/۰۴/۲۳

form سلماسی
در:
سلام ایا اگر از وبسایت شخصی کسی بازدید کنیم صاحب وبسایت شماره ی ما را می بیند
۲۱:۳۱:۵۳ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد اگه براتون زحمتی نیست یه نگاه دیگه بهش بندازید ، الان ریموو ادیت درست هستن فقط برای نمایش کلیشون که وقتی رفرش میکنیم...
۱۹:۱۳:۱۵ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد عزیز ، میتونید یه نمونه که فقط با جاوا اسکریپت کار شده نه با فریمورکاش بهم معرفی کنید ببینم؟ من هرچی گشتم پیدا...
۱۴:۴۶:۲۴ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد عزیز و گرامی ، یه دفتر چه یادداشت با localstorage میخوام بنویسم ولی مشکل دارم، دو تا سوال دارم ممنون میشم راهنماییم...
۱۲:۰۵:۰۷ ۱۳۹۹/۰۴/۲۲

form اریا
در:
سلام و درود بزرگوار چه دستوری باید بنویسیم تا فقط مقدارهای خاصی از ارایه بتونیم نمایش بدیم. مثلا یک ارایه 6 خونه ای...
۱۶:۴۷:۳۱ ۱۳۹۹/۰۴/۲۰

form کافه کتاب
در:
سپاس خیلی وقت بود دنبالش بودم مرسی از سایت عالیتون
۱۴:۵۱:۴۳ ۱۳۹۹/۰۴/۲۰

form سجاد
در:
دمتون گرم. خیلی زحمت کشیدید
۱۳:۴۳:۱۱ ۱۳۹۹/۰۴/۲۰

form KhashayarPrk
در:
سلام. میخوام الگو تمام کلمات داخل پرانتز رو بدون پرانتز بریزه ارایه با این کد فقط یک پرانتز رو جواب میده.
۱۳:۱۳:۴۷ ۱۳۹۹/۰۴/۲۰

form Oliver
در:
چطوری دستور background رو برای جدلمون عکسش رو تنظیم کنیم و بهش طول و عرض بدیم
۱۶:۰۷:۱۷ ۱۳۹۹/۰۴/۱۸

form محمد
در:
با عرض سلام ببخشید چطوری میتونم واسه اشتراک کاربر انقضا بزارم مثلا یک ماه داخل دیتابیس ردیف تایم رو درست کردم البته تاریخ رو تبدیل...
۱۹:۱۴:۵۹ ۱۳۹۹/۰۴/۱۵

form آیدا
در:
سلام من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه...
۲۲:۴۷:۴۴ ۱۳۹۹/۰۴/۱۴

form علی
در:
سلام اگه میشه یه تکه کدی بفرستید که کاربر نتونه عکس مورد نظر رو دانلود کنه و با نگه داشتن روی عکس فقط لینکو ببینه...
۰۹:۳۰:۴۹ ۱۳۹۹/۰۴/۱۴

form sina2000
در:
با سلام و خسته نباشید طبق کد زیر استفاده میگه متغیر Pdc برای PDO است لطفا نمونه کد برای لایبرری...
۱۵:۰۳:۵۱ ۱۳۹۹/۰۴/۱۳

form محمد امین
در:
سلام ممنون از مطلبتون ببخشید من یه سایتی با شی گرایی کامل زدم الان میخوام آدرسشو بهینه کنم آدرس الان من به این صورته:...
۱۸:۲۸:۲۴ ۱۳۹۹/۰۴/۱۱
form ترنم
در:
سلام وقتتون بخیر ببخشید من کدهای مربوط منو و زیر منو رو نوشتم ولی موقع اجرا منوی اصلی رو میاره ولی زیر منوها رو...
۱۱:۰۶:۲۹ ۱۳۹۹/۰۴/۱۱
form ا
در:
سلام چرا وقتی مطالب مربوط که تو وبلاگم هست رو جستجو میکنم نمیاره ؟؟؟
۲۰:۳۱:۰۸ ۱۳۹۹/۰۴/۰۷
form amir
در:
سلام من اگه بخوام با وارد کردن یه id داخل یک text کل اون ردیف پاک بشن باید چه کنم مثلا یک text دریافت میکنم...
۰۱:۴۸:۰۵ ۱۳۹۹/۰۴/۰۷
form محمدباقر حسیبیان
در:
من این مشکل برام پیش اومده که موقع ورود به پروژه م توی لوکال هاست wamp صفحه سفیده و هیچی رو نشون نمیده و کد...
۱۶:۴۲:۳۸ ۱۳۹۹/۰۴/۰۶
form ...
در:
سلام دو سایت نوشته ای مربوط به من رو چند سال قبل لینک دانلود قرار دادن من ازشون خواستم بردارنش ولی اینکارو نکردن سایت...
۱۷:۲۶:۴۲ ۱۳۹۹/۰۴/۰۵
form مجتبی
در:
سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟
۱۳:۰۴:۲۳ ۱۳۹۹/۰۴/۰۴
form متین
در:
سلام ؛ من تازه شروع به یادگیری کردم ؛ مطلب بسیار کاربردی بود ؛ ممنون از شما دوست عزیز.
۰۱:۵۰:۰۵ ۱۳۹۹/۰۴/۰۴
form mahdi
در:
سلام استاد عزیز و گرامی امیدوارم که حالتون خوب باشه ، اگه براتون ممکنه لطفا یه آموزش خوب در زمینه وردپرس بهم معرفی کنید ،...
۲۱:۴۸:۱۳ ۱۳۹۹/۰۴/۰۳
form امید
در:
در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد
۱۹:۰۶:۵۶ ۱۳۹۹/۰۴/۰۳
form ali
در:
با سلام من یک پروژه طراحی کردم میخوام که وقتی کاربر روی ادامه مطلب کلیک کرد در خود صفحه بقیه مطالب را ببینه...
۱۸:۴۷:۲۲ ۱۳۹۹/۰۴/۰۳
form علی
در:
سلام و تشکر از زحمات ارزشمند شما احتراما بنده امروز از یک شماره تلفن ثابت از طریق یک رایانه و یک موبایل به طور...
۱۸:۰۱:۱۰ ۱۳۹۹/۰۴/۰۳
form oscar
در:
درود. اگر بخوایم در نمایش تاریخ و زمان که به صورت لحظه ای خودش در صفحه رفرش میشه، فقط عبارت " Mon Jun 22 2020...
۱۵:۵۹:۳۲ ۱۳۹۹/۰۴/۰۲
form علی
در:
با سلام چطور میشه فقط یک صفحه مورد نظرمون رفرش بشه نه همه صفحات سایت
۰۰:۰۳:۴۱ ۱۳۹۹/۰۳/۳۱
form Farzad
در:
الان وقتی فایل رو میخواد دانلود بکنه از خودش فایل میسازه ، به این صورت یعنی بعد از پوشه file هر پوشه ای باشه...
۱۸:۵۶:۲۱ ۱۳۹۹/۰۳/۳۰
form Farzad
در:
سلام ، خسته نباشید من فایل هایی که در هاست میزارم به این شکل هست: یعنی مشخص نیست فایل ها تو چه پوشه...
۱۳:۳۳:۴۰ ۱۳۹۹/۰۳/۳۰
form شیما طیبی
در:
سلام خیلی مطلب مفیدی بود . همیشه به وبلاگ نویسی به چشم یه کار خسته کننده نگاه میکردم ولی خب یه مقدار نظرم تغییر کرد....
۲۳:۵۲:۳۲ ۱۳۹۹/۰۳/۲۹
form احسان
در:
سلام من یک کد اسکریپت دارم که به صورت عددی تبدیل شده است. میخواستم بپرسم چطوری میتونم اسکریپت به حالت اولیه نوشته شده برگردانم و...
۲۱:۰۲:۱۳ ۱۳۹۹/۰۳/۲۷
form علی
در:
ممنون از پاسختون اما روش بالا جهت دانلود فایل کاربرد داره . من میخواستم به صورت استریم ویدئو پخش بشه اما آدرس مستقیم ویدئو...
۰۰:۳۷:۴۶ ۱۳۹۹/۰۳/۲۷
form محمد
در:
سلام مجدد ببخشید طبق فرمایش شما من در دیتابیس جدولی ساخته بودم فقط مشکلم اینجاست چطوری میتونم توسط کوکی یا سیشن با تابع دیت انقضا...
۲۲:۳۸:۰۳ ۱۳۹۹/۰۳/۲۵
form محمد
در:
با عرض سلام ببخشید چطوری میشه واسه اشتراک خریدن زمان ۱ ماهه گذاشت که بعد از گذشت ۱ ماه پیام بده دوباره اشتراک تهیه کنید...
۱۳:۱۳:۵۵ ۱۳۹۹/۰۳/۲۵
در انتظار بررسی: ۴