حاشیه با گرادینت یا تصویر

726 روز پیش

پويا صادقى , آموزش CSS

گرادیان در Border

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

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

<pre>border: 8px solid #000;
 -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
 -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
 -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
 -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
 padding: 5px 5px 5px 15px;

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

 <span style="color: #888888;">----------------</span>

<strong><span style="color: #888888;">تصویر در Border</span></strong>

<strong></strong> همونجوری که در Word کادر های مختلف برای صفحه تون درست میکنید،
 از این به بعد میتونید تو صفحات وب هم از این کادر ها استفاده کنید:

<span id="more-41"></span> <img class="aligncenter" src="http://ufziwg.bay.livefilestore.com/y1plbWep7pYnicz3YeFr6RyiAss1sYdahe5gz-8LNs4Lag7ydxVPv_nKw11LW_BpC1_qCgbeG7xa6A3Qpjkfv4aFZfSayzVLU01/borderimgbycss3.PNG" border="0" alt="" /> این کد فقط در گوگل کروم ، اپل سافاری و موزیلا فایرفاکس کار میکنه  (خدا عاقبت IE رو بخیر کنه !! )

  کد هایی که میتونید استفاده کنید:  <strong>عکس های بالا ، راست ، پایین و چپ کادر:</strong>

<pre>border-top-image:url(border.png) 27 27 27 27 round round;
border-right-image:url(border.png) 27 27 27 27 round round;
border-bottom-image:url(border.png) 27 27 27 27 round round;
border-left-image:url(border.png) 27 27 27 27 round round;

وبکیت:

<pre>-webkit-border-top-image:url(border.png) 27 27 27 27 round round;
-webkit-border-right-image:url(border.png) 27 27 27 27 round round;
-webkit-border-bottom-image:url(border.png) 27 27 27 27 round round;
-webkit-border-left-image:url(border.png) 27 27 27 27 round round;

موزیلا:

<pre>-moz-border-top-image:url(border.png) 27 27 27 27 round round;
-moz-border-right-image:url(border.png) 27 27 27 27 round round;
-moz-border-bottom-image:url(border.png) 27 27 27 27 round round;
-moz-border-left-image:url(border.png) 27 27 27 27 round round;

کد های گوشه های کادر:

<pre>border-top-left-image:url(border.png) 27 27 27 27 round round;
border-top-right-image:url(border.png) 27 27 27 27 round round;
border-bottom-left-image:url(border.png) 27 27 27 27 round round;
border-bottom-right-image:url(border.png) 27 27 27 27 round round;

وبکیت:

<pre>-webkit-border-top-left-image:url(border.png) 27 27 27 27 round round;
-webkit-border-top-right-image:url(border.png) 27 27 27 27 round round;
-webkit-border-bottom-left-image:url(border.png) 27 27 27 27 round round;
-webkit-border-bottom-right-image:url(border.png) 27 27 27 27 round round;

موزیلا:

<pre>-moz-border-top-left-image:url(border.png) 27 27 27 27 round round;
-moz-border-top-right-image:url(border.png) 27 27 27 27 round round;
-moz-border-bottom-left-image:url(border.png) 27 27 27 27 round round;
-moz-border-bottom-right-image:url(border.png) 27 27 27 27 round round;

حتی میتونید عکس حاشه رو استرچ کنید: حاشیه با گرادینت یا تصویر

<pre>border-image: url(border.png) 27 27 27 27 stretch stretch;
-webkit-border-image: url(border.png) 27 27 27 27 stretch stretch;
-moz-border-image: url(border.png) 27 27 27 27 stretch stretch;

نوشته شده توسط پويا صادقى

سلام! من پویا صادقی هستم؛ طراح وب استاتیک ، CSS/HTML ، دانشجوی نرم افزار. می تونید من رو در توییتر دنبال کنید، گالری من رو در deviantart ببینید، یا با ایمیل info@Pasargad-Graphic.com تماس بگیرید.

CSS3 آموزش CSS فایرفاکس

پاسارگاد گرافیک

حاشیه با گرادینت یا تصویر

آخرین نوشته‌ها

وبگردی