صفت Border در Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

css3-border

یکی از ویژگیهای جدید Css3 بوردر (Border) می باشد . در نسخه قبلی Css3  اگر میخواستیم یک کادر با لبه های گرد در قالب وب سایت ایجاد کنیم باید از تصاویری که در پوسته قالب در نرم افزار فتوشاپ طراحی شده بود استفاده می کردیم که بسیار کار زمان بر و خسته کننده ای بود اما در Css3 این ویژگی اضافه شده و طراحان براحتی می توانند یک کادر با لبه های گرد ایجاد کنند .
3 ویژگی در Css3  برای Border اضافه شده است . اول لبه های گرد ، دوم سایه دار کردن کادر و در پایان استفاده از تصاویر به عنوان لبه های کادر کشیده شده که هر کدام را در ادامه با مثال آموزش میدهم .
قبل از استفاده از ویژگیهای جدید طراحان باید بدانند که آیا تمام مرورگرها از این خاصیت های جدید پشتیبانی می کنند یا خیر ؟
اینترنت اکسپلورر نسخه 9 به بعد ، فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی border- radius پشتیبانی می کنند .
اینترنت اکسپلورر  ، فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی box-shadow پشتیبانی می کنند .
 فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی border-image پشتیبانی می کنند .(اینترنت اکسپلورر از این خاصیت پشتیبانی نمی کند)
نکته مهم :
فایرفاکس برای border-image نیاز به پیشوند -moz دارد.
کروم و سافاری برای استفاده از border-image نیاز به پیشوند -webkit- دارند .
اوپرا برای border-image نیاز به پیشوند -o- دارد.        

 



گرد کردن گوشه ها در Css3 (کادر) - CSS3 Rounded Corners
همانطور که در توضیحات بالا به آن اشاره کردم در نسخه قدیمی Css3 برای گردن کردن لبه های کادر باید از تصاویر استفاده می شد .
خوشبختانه این ویژگی در Css3  بسیار ساده شده است .
روش انجام اینکار به شکل زیر می باشد . به مثال های زیر توجه کنید .
این کد در Css نوشته می شود اما قبل از آن باید یک دیویژن در Html نوشته شود که این ویژگی را به ارث ببرد . به عنوان مثال می خواهیم کادر منوی سمت راست به این شکل در بیاید .

 

div
{
border:2px solid;
border-radius:25px;
}

 

border-radius-1

با کم یا زیاد کردن عدد Border-radius لبه های کادر تغییر می کند .

 

div
{
border:2px solid;
border-radius:12px;
}

 

border-radius-2

کمی گردی لبه ها را بیشتر میکنم

 

div
{
border:2px solid;
border-radius:100px;
}

 

border-radius-3

کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:150px;
border-radius:100px;
}
</style>
</head>
<body>
<div>متن تایپ شده در کادر  </div>
</body>
</html>

 

 سایه دار کردن جعبه - CSS3 Box Shadow
بوسیله خصوصیت box-shadow می توانیم برای کادر یا بهتر بگوئیم جعبه کشیده شده یک سایه ایجاد کنیم . روش و دستور کار به شکل زیر می باشد .
دو عدد اول فاصله از چپ و راست و بالا و پایین می باشد که من به صورت 10px 10px تایپ کرده ام .
عدد سوم که 5px می باشد ضخامت یا مقدار پراکندگی سایه می باشد .
در پایان هم که درصد رنگ سایه تایپ شده است . 

 


div
{
box-shadow: 10px 10px 5px #888888;
}

 

 

box-shadow-1

اعداد را تغییر میدهم تا بهتر متوجه تنظیمات این دستور شوید


div
{
box-shadow:1px 1px 15px #02D1FC;
}

 

 

box-shadow-2

در این قسمت رنگ سایه با درصد پراکندگی را کم میکنم 


div
{
box-shadow:1px 1px 15px #02D1FC;
}

 

box-shadow-3

کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید) 

 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 1px #FE0107;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 

استفاده از تصویر به عنوان کادر - CSS3 Border Image
با استفاده از ویژگی border-image می توانیم یک تصویر را به عنوان لبه های کادر در Css3 استفاده کنیم . 
روش کار به شکل زیر می باشد . این ویژگی در اینترنت اکسپلورر پشتیبانی نمی شود


div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

 



border-image

کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
#stretch
{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id='round'></div>
<br>
<div id='stretch'></div>
<p>با استفاده از تصویر زیر کادرها ایجاد شده است</p>
<img src='http://www.learning.asarayan.com/border.png'>
</body>
</html>

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 23:11

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا