01 از 04
ایجاد شیب خطی Cross-Browser با CSS3
گرادیانهای خطی
شایع ترین نوع گرادیان که مشاهده می کنید، شیب خطی دو رنگ است. این به این معنی است که گرادینت در یک خط راست حرکت می کند و به تدریج از رنگ اول به دوم در طول آن خط تغییر می کند. تصویر در این صفحه یک شیب چپ ساده راست 999 (خاکستری تیره) به #fff (سفید) نشان می دهد.
شیب خطی ساده ترین تعریف است و بیشترین پشتیبانی را در مرورگرها دارد. شیب خطی CSS3 در Android 2.3+، Chrome 1+، Firefox 3.6+، اپرا 11.1+ و Safari 4+ پشتیبانی می شود. اینترنت اکسپلورر می تواند شیب ها را با استفاده از یک فیلتر اضافه کرده و آنها را به IE 5.5 بازگرداند. این CSS3 نیست، اما یک گزینه برای سازگاری بین مرورگرهاست.
وقتی یک گرادیانت را تعریف میکنید، باید چندین چیز را تعریف کنید:
- نوع شیب آن - خطی یا شعاعی است
- جایی که گرادیان باید شروع شود
- گرادیان باید متوقف شود
- چه رنگی در شیب و جایی که باید شروع و متوقف شود
برای تعریف گرادیانهای خطی با استفاده از CSS3، شما می نویسید:
گرادیان خطی ( زاویه یا گوشه و کنار ، توقف رنگ ، توقف رنگ )
- ابتدا نوع گرادیانت را با نام line- gradient تعریف می کنید.
- سپس، نقاط شروع و توقف شیب را در یکی از دو روش تعریف می کنید: زاویه خط در درجه ای از 0 تا 359، با 0 درجه به راست بالا. یا با عملکرد "جانبی یا گوشه" مانند چپ، راست، پایین و بالا. این در جزئیات بعدی در صفحه بعدی توضیح داده خواهد شد. اگر این را ترک کنید، گرادیان از بالا به پایین عنصر جریان می یابد.
- سپس رنگ متوقف می شود. شما متوقف رنگ با کد رنگ و درصد اختیاری تعریف می کنید. درصد به مرورگر می گوید که در آن خط به شروع یا پایان دادن به آن رنگ است. به طور پیشفرض این است که رنگها را به طور یکنواخت در کنار خط قرار دهید. شما بیشتر در مورد توقف رنگ در صفحه 3 یاد خواهید گرفت.
بنابراین، برای تعریف گرادیان بالا با CSS3، شما می نویسید:
خطی گرادیان (سمت چپ، # 999999 0٪، #ffffff 100٪)؛
و برای تنظیم آن به عنوان پس زمینه DIV شما نوشتن:
div {
پس زمینه: gradient خطی (سمت چپ، # 999999 0٪، #ffffff 100٪؛
}
Extensions مرورگر برای گرادیانهای خطی CSS3
برای گرفتن شیب دلخواه برای کار متقابل مرورگر، شما باید از افزونه های مرورگر برای اکثر مرورگرها و یک فیلتر برای اینترنت اکسپلورر 9 و پایین تر (در واقع 2 فیلتر) استفاده کنید. همه این عناصر را برای تعریف شیفت خود استفاده می کنند (به جز اینکه شما می توانید تنها شیب رنگ 2 را در IE تعریف کنید).
فیلترهای مایکروسافت و افزونه - اینترنت اکسپلورر چالش برانگیزترین پشتیبانی است، زیرا شما برای پشتیبانی از نسخه های مختلف مرورگر نیاز به سه خط مختلف دارید. برای دریافت گرادیان بالا به قهوه ای بالا می توانید بنویسید:
/ * IE 5.5-7 * /
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛
/ * اینترنت اکسپلورر 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)"؛
/ * IE 10 * /
-ms-line-gradient (سمت چپ، # 999999 0٪، #ffffff 100٪)؛
موزیلا Extension -The -moz-extension همانند ویژگی CSS3 فقط با extension -moz کار می کند. برای دریافت گرادیان بالا برای فایرفاکس، نوشتن:
-moz-line-gradient (سمت چپ، # 999999 0٪، #ffffff 100٪)؛
اپرا Extension -The -o افزونه شیب را برای اپرا 11.1+ اضافه می کند. برای دریافت شیب بالا، بنویسید:
-o-line-gradient (سمت چپ، # 999999 0٪، #ffffff 100٪)؛
Webkit Extension -The -webkit- extension کار بسیار شبیه به ویژگی CSS3 است. برای تعریف gradient بالا برای Safari 5.1+ یا Chrome 10+ شما نوشتید:
-webkit-line-gradient (سمت چپ، # 999999 0٪، #ffffff 100٪)؛
نسخه قدیمیتر افزونه Webkit نیز وجود دارد که با Chrome 2+ و Safari 4+ کار میکند. در آن شما نوع شیب را به عنوان یک مقدار تعریف می کنید، نه در نام اموال. برای گرفتن شیب خاکستری با سفید با این پسوند، نوشتن:
-webkit-gradient (خطی، سمت چپ بالا، بالا سمت راست، توقف رنگ (0٪، # 999999)، color-stop (100٪، # ffffff))؛
کامل CSS3 خطی گرادیان CSS کد
برای پشتیبانی کامل مرورگرهای متقابل مرورگر برای گرفتن گرادیان خاکستری به سفید بالاتر باید ابتدا یک رنگ جامد جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند استفاده کنید و آخرین مورد باید سبک CSS3 برای مرورگرهایی باشد که کاملا سازگار باشند. بنابراین، شما می نویسید:
پس زمینه: # 999999؛
background: -moz-linear-gradient (سمت چپ، # 999999 0٪، #ffffff 100٪)؛
پس زمینه: -webkit-gradient (خطی، بالا سمت چپ، بالا سمت راست، توقف رنگ (0٪، # 999999)، color-stop (100٪، # ffffff))؛
پس زمینه: -webkit-line-gradient (سمت چپ، # 999999 0٪، #ffffff 100٪)؛
background: -o-linear-gradient (سمت چپ، # 999999 0٪، #ffffff 100٪)؛
background: -ms-linear-gradient (سمت چپ، # 999999 0٪، #ffffff 100٪)؛
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛
پس زمینه: gradient خطی (سمت چپ، # 999999 0٪، #ffffff 100٪)؛
صفحات بعدی در این آموزش بخش هایی از یک شیب را در جزئیات بیشتر توضیح می دهند و آخرین صفحه به یک ابزار اشاره می کند که یک روش عالی برای ایجاد شیب های CSS3 به صورت خودکار است.
با استفاده از CSS فقط این گرادیان خطی را در عمل مشاهده کنید.
02 از 04
ایجاد گرادیان مورب - زاویه گرادیان
نقطه شروع و توقف، زاویه شیب را تعیین می کند. بیشتر شیب خطی از بالا به پایین یا چپ به راست است. اما ممکن است یک شیب ایجاد کنید که بر روی خط مورب حرکت کند. تصویر در این صفحه یک شیب ساده را نشان می دهد که در زاویه 45 درجه در تصویر از راست به چپ حرکت می کند.
زاویه برای تعریف خط گرادیان
زاویه یک خط در یک دایره خیالی در مرکز عنصر است. 0deg امتیاز، 90deg امتیاز به سمت راست، 180deg امتیاز پایین، و 270deg امتیاز به سمت چپ. شما می توانید هر زاویه ای را از 0 تا 359 درجه تعریف کنید.
شما باید توجه داشته باشید که در یک مربع، زاویه 45 درجه از گوشه بالا سمت چپ به پایین سمت راست حرکت می کند، اما در یک مستطیل، نقاط شروع و پایان کمی در خارج از شکل است، همانطور که در تصویر دیده می شود.
روش شایع تر برای تعریف یک گرادینت مورب، تعریف یک گوشه از قبیل بالا سمت راست است و گرادینت از آن گوشه به گوشه متقابل حرکت می کند. شما می توانید موقعیت شروع با کلمات کلیدی زیر تعریف کنید:
- بالا
- درست
- پایین
- ترک کرد
- مرکز
و می توان آنها را به طور خاص ترکیب کرد، مانند:
- بالا سمت راست
- بالا سمت چپ
- مرکز عالی
- سمت راست پایین
- پایین سمت چپ
- مرکز پایین
- مرکز راست
- مرکز چپ
در اینجا CSS برای یک گرادیان شبیه به تصویری است که از سمت راست بالا به پایین سمت چپ حرکت می کند.
پس زمینه: ## 901A1C؛
background-image: -moz-linear gradient (بالا سمت راست، # 901A1C 0٪، # FFFFFF 100٪)؛
background-image: -webkit-gradient (خطی، راست بالا، پایین سمت چپ، توقف رنگ (0، # 901A1C)، رنگ-توقف (1، #FFFFFF))؛
پس زمینه: -webkit-line-gradient (بالا سمت راست، # 901A1C 0٪، #ffffff 100٪)؛
background: -o-linear gradient (بالا سمت راست، # 901A1C 0٪، #ffffff 100٪)؛
پس زمینه: -ms-خط-گرادیان (بالا سمت راست، # 901A1C 0٪، #ffffff 100٪)؛
پس زمینه: gradient خط (راست بالا، # 901A1C 0٪، #ffffff 100٪)؛
ممکن است متوجه شده باشید که در این مثال فیلترهای اینترنت اکسپلورر وجود ندارد. به همین دلیل IE فقط دو نوع فیلتر را اجازه می دهد: از بالا به پایین (به طور پیش فرض) و چپ به راست (با کلید GradientType = 1).
این شیوه خطی مورب در عمل را با استفاده از CSS فقط ببینید.
03 از 04
رنگ متوقف می شود
با شیب خطی CSS3، می توانید چندین رنگ را به شیب خود اضافه کنید تا جلوه های حتی احساسی را ایجاد کنید. برای اضافه کردن این رنگ ها، رنگ های اضافی را به انتهای اموال خود اضافه می کنید که توسط کاما جدا شده اند. شما باید در کجای خط نیز رنگها را شروع یا پایان دهید.
فیلترهای اینترنت اکسپلورر تنها از دو رنگ متوقف پشتیبانی می کنند، بنابراین هنگام ایجاد این گرادیان، فقط باید رنگ های اول و دوم را که می خواهید نمایش دهید را شامل می شود.
در اینجا CSS برای گرادیان فوق 3 رنگ است:
پس زمینه: #ffffff؛
background: -moz-linear-gradient (left، #ffffff 0٪، # 901A1C 51٪، #ffffff 100٪)؛
پس زمینه: -webkit-gradient (خطی، بالا سمت چپ، بالا سمت راست، توقف رنگ (0٪، # ffffff)، رنگ متوقف (51٪، # 901A1C)، رنگ توقف (100٪، # ffffff))؛
پس زمینه: -webkit-line-gradient (سمت چپ، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
background: -o-linear gradient (left، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
background: -ms-linear-gradient (left، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff'، endColorstr = '# ffffff'، GradientType = 1)؛
background: gradient خط (left، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
با استفاده از CSS فقط این گرادیان خطی را با سه توقف رنگ در عمل مشاهده کنید.
04 از 04
شیب ساختمان را آسانتر کنید
دو سایت وجود دارد که توصیه می کنم برای کمک به شما در ایجاد شیب ها وجود دارد، هر کدام از آنها دارای مزایا و معایبی هستند، من سازنده گرادیان را پیدا نکرده ام که همه چیز را انجام می دهد.
نهایی CSS گرادیانت ژنراتور
این ژنراتور گرادیان بسیار محبوب است زیرا به شیوه مشابه با سازندگان گرادیان در برنامه هایی مانند فتوشاپ عمل می کند. من هم آن را دوست دارم زیرا این تمام پسوند CSS را به شما می دهد، نه تنها Webkit و موزیلا. مشکل این ژنراتور این است که آن را تنها از شیب افقی و عمودی پشتیبانی می کند. اگر می خواهید شیب های مورب را انجام دهید، باید به ژنراتور دیگر توصیه کنید.
ژنراتور گرادیان CSS3
این ژنراتور زمان کمی طول کشید تا از یکی از آن ها درک کند، اما از تغییر جهت به قطر پشتیبانی می کند.
اگر شما از یکی دیگر از ژنراتور CSS Gradient که بهتر از اینها هستید، می دانید ، لطفا به ما اطلاع دهید .