صفت 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

نوشتن دیدگاه

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

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

چطور فایل های خراب در ویندوز را درست کنیم

چطور فایل های خراب در ویندوز را درست کنیم

دی 30, 1396
تماس از طریق WiFi calling و در P5df          
s3ght=600,locatio?k2.items.cache.5d7d2a237a4683e5c45b021802a448c4_XLnsp-716.jpg
<55-p 13a href="/آموس اس اg>دی 30, 1396
all چرو ت به ،ق W رزش به نی ک ر در ،ست و چرا شما نیاز به موس Trackball دارید ؟" data-url="#" data-x="640" data-y="480" />-10n><54کردن-اسdb760-4.html" titlebr />all -80" s="jco ب-x="6-x="640وزش بعات-ک ر در a href="/آموردن اس_XLnsp-716.jpg" altbr />all چرو ت به ،ق W رزش به نی ک ر در ،>ردن اس_XLnsp-716.jpg" altbr />all چرو ت به ،ق W رزش به نی ک ر در ر فایل های خر2اینستاگرام پنهان کنیدبg>دی 30, 1396
capti تطو۱ایایl چ
در پ(ز را در7 . 8 . 10)ست و چرا شما نیاز به موس Trackball دارید ؟" data-url="#" data-x="640" data-y="480" />-10n><53-10عابع " data-y=انفه م8c4_Xpti تطو۱زشزشl -8ینترٳوزy="480" />-7-8فون-f="/آم1 اک ق Wiهش اند م">capti تطو۱ایایl چ
در پ(ز را در7 . 8 . 10)>1 اک ق Wiهش اند م">capti تطو۱ایایl چ
در پ(ز را در7 . 8 . 10) فایل های خر4ینستاگرام پنهان کنیمبهمن 2, 1396
-10n><52nted"> -10a href="/آمو-از-ار ده jpg" alا Traitemانigcaptچ>
ز را د،از ؈ چرا شما نیاز به موس Trackball دارید ؟" data-url="#" data-x="640" data-y="480" />0- WiFiربردکاربردی-ویند،رts"ga-y="480" />آموزش/آمn><-وین؁زار-power-data-reco،رts">ز را د، -وین؁زار-power-data-reco،رts">ز را در فایل های ذد2اینستاگرام پنهان کنیدبg>دی 30, 1396
ز 8ee7b.htm Traiد3-Boز ؈ چرا شما نیاز به موس Trackball دارید ؟" data-url="#" dataازیابی-اطایل-
  • 8ee7b.pan>1موزش/آم 8ee7b.ایلiد-3ز 8ee7b.htm Traiد3-B-کلیدهاi]ف>ز 8ee7b.htm Traiد3- فایل های ذد1از به موس Trackball دارید ؟>
  • دی 30, 1396
    ca؆-فارجtion=nod63fا هوBoز ؈ چرا شما نیاز به موس Trackball دارید ؟" data-urوزش/آمaptiر 0" d رزش-ن-" s="jcشزpan48 آزion=nر -جtion=no-" sا هوa href="/آم="#" dataik-اضافهز-tion=nر م="fo">ca؆-فارجtion=nod63fا هوBش-تصویرۧضافهز-tion=nر م="fo">ca؆-فارجtion=nod63fا هو فایل های ذد1اینستاگرام پنهان کنیافزار Power Data R
    Nav"؟" data-u#
    Nav ه-نوی فآخرین
    Nav aginiv> ss="itemRatهمن 51ریما2ریما3رینرٟ" data-u#
    Nav >/694-آموافزار P + s + '" as '" as < /wیمیٱوز ططi' + '" asط/asiddiv>htmlnر مویم"itemRatrc="-91یt" data-u/win/آمو>ز را در7مویم"itemRatrc="-91="gk" data-u/xpآمو>ز را درXPمویم"itemRatrc="-912t" data-u/win8آمو>ز را در8مویم"itemRatrc="-913t" data-u/win10a href=>ز را در1۱ فایم"itemRatrc="-914"؟" data-u/iipt>neta href=> d رزش-ن فایم"itemRatrc="-91ng><" data-u/acebook a href=>اٲ-tml">آمایم"itemRatrc="-916g><" data-u/photoshopآمو>XLرا فایم"itemRatrc="-917g><" data-u/figure"> ="fo mlnر فایم"itemRatrc="-918g><" data-u/مآمو>HTML فایم"itemRatrc="-919g><" data-u/t o حر-ویب فایم"itemRatrc="-92یt" data-u/c" /a href=>>ca؆-olor: -ن؆ فایم"itemRatrc="-92="gk" data-u/coreldrawa href=>CorelDRAW فایم"itemRatrc="-922t" data-u/?trondiv922=> dا د_Xش فایم"itemRatrc="-923t" data-u/59; ca/a href=> dتl"> ر فایم"itemRatrc="-924"؟" data-u/sa/i> a href=>raitا de="ا فایم"itemRatrc="-926g><" data-u/soft>raزی Wiهش طایل">ca؆-ف خر فایم"itemRatrc="-927g><" data-u/sa> a href=>o هaitemا در۱ ر فایم"itemRatrc="-928g><" data-u/mobi> a href=>o-تصوی-تص فbE فایم"itemRatrc="-929g><" data-u/seoa href=>o-تصوی="و فایم"itemRatrc="-93یt" data-u/dreamweavera href=>o563ab>ز ش فایم"itemRatrc="-93="gk" data-u/cm/a href=> d.html">آموزش سایم"itemRatrc="-932t" data-u/menua href=> o حر-raiش سایم"itemRatrc="-933t" data-u/mysqآمو>MYSQL فایم"itemRatrc="-934"؟" data-u/vibera href=>viber فایم"itemRatrc="-93ng><" data-u/postera href=>data- م۱ فاینرمi' + '" asط/pddiv> د.ذاd">ر"> ا نی؅aptی کنیمکi یع-در-che.eزار-power-کن۬-ra کعر-b>در پ.e="f -ف ca؆ -اس_"> <رts">کن۬-ra ک؅ م>در )omlaommeط/asiddiv>
    ' ); w.anettient );pt t_paq =t_paq || []arentNod_paqts[i].["setDomains", ["*.>
    م/asiView']parentNod_paqts[i].['enef,'Link">مure']parentNod'}; pt tu-u//class="gkItempiwik/"arentNode._paqts[i].['set">مerUا u+'piwik.php']parentNode._paqts[i].['setSrc=IAttr'2']parentNode.pt td=dt/javas, g=d'https://se' : 'http://e, s= id: 'anetwork-' + ~~( rentNode.g = var pe clync=t.crepe defer=t.crepe ion>u+'piwik.creat var s = docg,t.getEleme s.parentN< م/or1: a href=ش/آم.د د خ؇ش ر کر ند> mf=> .د د خ؇ش رکر ند> tsricoوز '" a