شیب شعاعی css. CSS3 با غوطه وری

امروز می خواهیم در مورد CSS3، یعنی گرادیان ها صحبت کنیم. در مقالات قبلی به شما گفتیم پارامترهای مختلفدر CSS3، به شما امکان می دهد اشکال ساده ایجاد کنید یا افکت ها را اعمال کنید. این بار بیایید در مورد دو نوع گرادیان صحبت کنیم - دایره ای و بیضی.

نحو گرادیان

گرادیان ها در CSS3 با استفاده از پارامتر background-image اعلان می شوند. این به دلیل هدف ارائه سازگاری بهتر است، جایی که ما نیز در یک قانون، نیاز به استفاده از رنگ پس‌زمینه داریم. سپس، برای ایجاد یک گرادیان شعاعی، آن را به سادگی با استفاده از تابع ()radial-gradient فراخوانی می کنیم. 4 مقدار وجود دارد که باید در تابع گنجانده شود تا گرادیان به درستی ایجاد شود.

اولین مقدار موقعیت گرادیان را تعیین می کند. می توانیم از توصیفی استفاده کنیم کلید واژه هامانند بالا، پایین، مرکز و چپ، یا می‌توانیم مقادیر مشخص‌تری مانند 50% 50% برای گرادیان در مرکز یا 0% 0% برای شروع گرادیان از گوشه بالا سمت چپ مشخص کنیم.

مقدار دوم شکل و اندازه گرادیان را تعیین می کند. دو آرگومان برای ایجاد گرادیان وجود دارد، اولی مسئول بیضی (که به طور پیش فرض استفاده می شود) و دومی مسئول بیضی است. گرادیان های دایره ای.

در مورد پارامتر اندازه گرادیان، در اینجا می توانیم از 6 آرگومان زیر استفاده کنیم:

* نزدیکترین ضلع - شکل شیب به سمت طرف بلوک که نزدیکترین نقطه به مرکز شیب (برای شیب دایره ای) یا به سمت اضلاع عمودی و افقی (برای بیضی) است محاسبه می شود.
* نزدیکترین گوشه - شکل گرادیان به سمت نزدیکترین گوشه بلوک از مرکز آن محاسبه می شود.
* farthest-side - آرگومان کمی شبیه به نزدیکترین سمت است، با این تفاوت که شکل گرادیان به سمت دورترین سمت بلوک از مرکز گرادیان (اعم از عمودی یا افقی) هدایت می شود.
* دورترین گوشه - شکل گرادیان به سمت دورترین گوشه بلوک از مرکز گرادیان هدایت می شود.
* حاوی - همان نزدیکترین سمت.
* پوشش - مانند دورترین گوشه.

در نهایت پارامترهای سوم و چهارم ترکیب رنگ را تعیین می کنند. بنابراین بیایید ببینیم که چگونه برای ایجاد شیب های بیضی کدنویسی می کنیم، و این بار از مقدار پوشش در پارامتر اندازه گرادیان استفاده می کنیم تا گرادیان بسیار گسترده شود و ظرف را بپوشاند.

بدن (
پس‌زمینه-تصویر: گرادیان شعاعی (مرکز، پوشش بیضی، #ffeda3، #ffc800)؛
}

برای ایجاد شیب دایره ای می توانیم کارهای زیر را انجام دهیم:

بدن (
پس‌زمینه-تصویر: گرادیان شعاعی (مرکز، پوشش دایره، #ffeda3، #ffc800)؛
}
همانطور که از نام آن پیداست، شکل گرادیان یک دایره تشکیل می دهد.

پشتیبانی از مرورگر

فقط این را در نظر داشته باشید این لحظهتقریباً همه مرورگرها بعید هستند که بتوانند به طور کامل پشتیبانی کنند این پارامتر، بنابراین برای بسیاری از مرورگرها باید پیشوندهایی را مشخص کنید. بنابراین، کد کامل، که در همه مرورگرهای لیست شده کار می کند به این شکل خواهد بود (IE10+، Firefox 3.6+، Chrome 4.0+، Safari 4.0+ و Opera 11+).

بدن (
پس‌زمینه-تصویر: گرادیان شعاعی (پایین مرکز، پوشش بیضی، #ffeda3، #ffc800)؛
پس‌زمینه-تصویر: -o-radial-gradient (پایین مرکز، پوشش بیضی، #ffeda3، #ffc800)؛
پس‌زمینه-تصویر: -ms-radial-gradient (پایین مرکز، پوشش بیضی، #ffeda3، #ffc800)؛
پس‌زمینه-تصویر: -moz-radial-gradient (پایین مرکز، پوشش بیضی، #ffeda3، #ffc800)؛
پس زمینه-تصویر: -webkit-radial-gradient (پایین مرکز، پوشش بیضی، #ffeda3، #ffc800)؛
}
فراموش نکنید که دمو را تماشا کنید و کد منبع را دانلود کنید.

آ! گرادیان ابزاری عالی برای دستکاری رنگ در است CSS3. به جای استفاده از یک تصویر برای ایجاد یک افکت گرادیان در یک صفحه وب، استفاده از آن مفیدتر خواهد بود. گرادیان CSS3و در نتیجه سایت را "سبک" کنید. از آنجایی که کاربر نیازی به هدر دادن زمان و ترافیک برای بارگذاری تصویر پس زمینه نخواهد داشت. دو نوع اصلی گرادیان وجود دارد: شعاعی و خطی. پست امروز در مورد آنها خواهد بود.

گرادیان خطی

همانطور که طبقه بندی می گوید، گرادیان در CSS3تصاویر هستند هیچ خاصیت خاصی برای آنها وجود ندارد. و تبلیغ از ویژگی تصویر پس زمینه استفاده می کند.

که در مورد کلیسینتکس گرادیان (خطی) به شکل زیر است:

1 2 3 4 5 6 7

div( پس‌زمینه-تصویر: -webkit-linear-gradient(بالا، #FF5A00 0٪، #FFAE00 100٪)؛ پس‌زمینه-تصویر: -moz-linear-gradient(بالا، #FF5A00 0٪، #FFAE00 100٪)؛ پس‌زمینه-تصویر: -ms-linear-gradient(بالا، #FF5A00 0٪، #FFAE00 100٪)؛ پس‌زمینه-تصویر: -o-linear-gradient(بالا، #FF5A00 0٪، #FFAE00 100٪)؛ }

بنابراین، بیایید در مورد همه چیز به ترتیب صحبت کنیم.

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

اگر زاویه منفی باشد، موقعیت از گوشه پایین سمت چپ به سمت چپ بالا تغییر می کند.

مقدار دوم تابع است رنگ اولیهو موقعیت توقف آن که به صورت درصد نشان داده شده است. اعلام این موقعیت ضروری نیست، مرورگر به طور پیش فرض برای رنگ اول روی 0% خواهد بود.

آخرین مقدار رنگ دوم و موقعیت توقف آن است. به طور پیش فرض تا 100٪. این مقادیر شدید به این معنی است که رنگ اول بلافاصله شروع به انتقال به رنگ دوم می کند. با این حال، اگر رنگ اول را روی 50٪ تنظیم کنیم، آنگاه از وسط ارتفاع موجود فقط شروع به انتقال به رنگ دوم می کند. این همان چیزی است که کد به نظر می رسد:

نوارهایی با ارتفاع مساوی دریافت می کنیم. با یک حاشیه واضح، هیچ تغییر رنگی وجود نخواهد داشت. برای درک بهتر این که چگونه این کار می کند، مقادیر را آزمایش کنید.

گرادیان شعاعیدرست مانند خطی، به عنوان یک تابع، فقط radial-gradient() اعلام می شود. مقادیر اساسی نیز وجود دارد: این شکل گرادیان شعاعی (دایره - دایره یا بیضی - بیضی)، رنگ اولیه و نهایی است. نحو به شرح زیر است:

div( پس‌زمینه: گرادیان شعاعی (دایره، #F9E497، #FFAE00)؛ }

اگر شکلی را مشخص نکنید، پیش فرض بیضی خواهد بود.

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

ترکیبات دستوری:

• مرکز در بالا - بالا - 50% 0%؛
• در سمت چپ گوشه بالا- بالا سمت چپ - 0% 0%؛
• در گوشه سمت راست بالا - بالا سمت راست — 100% 0%;
• در مرکز - مرکز - 50٪ 50٪؛
• مرکز چپ - مرکز چپ - 0% 50%؛
• مرکز راست - مرکز راست - 100% 50%;
• مرکز پایین - پایین - 50% 100%؛
• در گوشه پایین سمت چپ - پایین سمت چپ - 0% 100%؛
• در گوشه پایین سمت راست - پایین سمت راست - 100% 100%.

در اینجا یک مثال با درصد آورده شده است:

div( پس‌زمینه-تصویر: گرادیان شعاعی (70% 20%، دایره، #F9E497، #FFAE00)؛ }

مقدار محور اول ایکسدوم در U.

همچنین می توانید اندازه گرادیان شعاعی را تنظیم کنید. اندازه با یک فاصله بعد از شکل گرادیان نشان داده می شود. به صورت پیش فرض اعمال شود دورترین گوشه(به گوشه دورتر). محاسبه از نقطه مرکزی گرادیان تا زیر انجام می شود:

برای درک بهتر این موضوع، اجازه دهید به یک مثال نگاه کنیم. شیب بیضی شکل با رنگ شروع سفید و پایان آبی:

div( پس‌زمینه-تصویر: گرادیان شعاعی (230 پیکسل 50 پیکسل، نزدیک‌ترین سمت بیضی، سفید، آبی)؛ }

اندازه از فاصله تا اضلاع نزدیک محاسبه می شود، بدیهی است که قسمت بالایی در امتداد محور نزدیکتر است. Yو در امتداد محور ترک کردند ایکس.

و حالا به طرف های دور:

div( پس‌زمینه-تصویر: گرادیان شعاعی (230 پیکسل 50 پیکسل، دورترین سمت بیضی، سفید، آبی)؛ }

نتیجه همانطور که می گویند واضح است. اندازه از فاصله تا اضلاع دور محاسبه می شود.

در شیب های شعاعی و همچنین خطی، می توان از موقعیت های توقف برای رنگ استفاده کرد. همچنین می خواهم توجه داشته باشم که اگر نیاز به شفافیت رنگ دارید، باید از rgba استفاده کنید.

div( پس‌زمینه-تصویر: خطی-gradient(بالا، rgba (255، 90، 0، 0.2)، rgba (255، 174، 0، 0.2)); }

کانال آلفا، آخرین کانال و برابر با 0.2، نشان می دهد که تنها 20٪ از 100٪ رنگ استفاده شده است.

در هر دو نوع گرادیان CSS3شما می توانید از دو رنگ استفاده نکنید، بلکه از چندین رنگ استفاده کنید.

div( پس زمینه-تصویر: گرادیان خطی (بالا، قرمز، نارنجی، زرد، سبز، آبی، نیلی، بنفش)؛ }

برای هر دو نوع می توان از رنگ های تکرار شونده استفاده کرد. یعنی یک چرخه از این مقادیر تشکیل می شود. توابع گرادیان تکراری، برای خطی ()repeating-linear-gradient و تکرارکننده-radial-gradient() برای شعاعی.

div( تصویر پس‌زمینه: گرادیان شعاعی تکرار شونده (قرمز، آبی ۲۰ پیکسل، قرمز ۴۰ پیکسل)؛ }

0% , #FFAE00 100% ) ; /* برای فایرفاکس */
پس‌زمینه-تصویر: -ms-linear-gradient(بالا، #FF5A00 0٪، #FFAE00 100٪)؛ /* برای IE 10+ */
پس‌زمینه-تصویر: -o-linear-gradient(بالا، #FF5A00 0٪، #FFAE00 100٪)؛ /* برای اپرا */
پس‌زمینه-تصویر: خطی-gradient(بالا، #FF5A00 0٪، #FFAE00 100٪)؛ /* نحو استاندارد */
}

div(
فیلتر : progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 ) ;
}

جایی که 33 درست بعد از هش درصد اشباع رنگ است.

امیدوارم مقاله برای شما مفید بوده باشد و موضوع مورد بحث به طور کامل پوشش داده شده باشد.

برای به روز ماندن با آخرین مقالات و درس ها، مشترک شوید

CSS3 توسط همه کسانی که ممکن است به آن علاقه مند باشند دیده و امتحان شده است. ما می توانیم گوشه های گرد و سایه های در حال سقوط را بدون هیچ تلاش اضافی ایجاد کنیم.

اما این فقط سطح سطح است. من باید قابلیت های جدید مرورگرها را با جزئیات بیشتری درک می کردم تا به سؤالاتی پاسخ دهم: شیب های متقابل مرورگر با انتقال رنگ های متعدد چگونه است، کجا و چگونه می توانید چندین سایه را به طور همزمان روی یک بلوک اعمال کنید، برای کدام مرورگرهای خاص. از پیشوندهای اموال و غیره استفاده می شود.

همچنین، من به پشتیبانی از CSS3 علاقه مند شدم پلتفرم های موبایل، ویژگی های ناشناخته CSS3 و همچنین ژنراتورهایی که کدهای بین مرورگر را ایجاد می کنند. سعی کردم جاهای خالی را پر کنم و کنار هم بگذارم اطلاعات مفیدبرای کسانی که تازه برای غواصی آماده می شوند.

مرورگرهایی که از ویژگی ها پشتیبانی می کنند به عنوان نظرات CSS فهرست می شوند. ژنراتورها و ابزارها اغلب می توانند بیش از یک کار را در یک زمان انجام دهند، بنابراین در این موارد من آنها را فقط در جایی لیست کرده ام که فکر می کنم بهترین کار را انجام می دهند.

گرادیان خطی

در واقع، انواع مختلفی از گرادیان CSS3 وجود دارد. این ساده ترین شیب است.
div(
پس زمینه رنگ: #444444;
background-image: -webkit-gradient (خطی، بالا سمت چپ، پایین سمت چپ، from(#444444)، به(#999999)); /* Safari 4-5، Chrome 1-10، iOS 3.2-4.3، Android 2.1-3.0 */
پس زمینه-تصویر: -webkit-linear-gradient(بالا، #444444، #999999); /* Chrome 10+، Safari 5.1+، iOS 5+، Android 4+ */
پس زمینه-تصویر: -moz-linear-gradient(بالا، #444444، #999999); /* فایرفاکس 3.6+ */
پس زمینه-تصویر: -ms-linear-gradient (بالا، #444444، #999999); /* IE 10+ */
پس زمینه-تصویر: -o-linear-gradient(بالا، #444444، #999999); /* Opera 11.10+ */
پس زمینه-تصویر: خطی-gradient (به پایین، #444444، #999999)؛
}

علاوه بر مشخص کردن رنگ های شروع و پایان، گرادیان به شما امکان می دهد زاویه شیب، موقعیت شروع و پایان انتقال رنگ، تعداد رنگ ها و جهت گرادیان را تغییر دهید.

سافاری قبل از نسخه 5 و کروم قبل از نسخه 10 سینتکس خاص خود را داشتند و IE 10 و Opera پیشوندهای خود را اضافه می کنند و مقدار کد را افزایش می دهند.

تمام قابلیت های گرادینت توسط مرورگرهایی پشتیبانی می شود که می توانند گرادیان های CSS3 را نمایش دهند، حتی اگر برخی از ژنراتورها فقط انتقال بین دو رنگ را به ما ارائه دهند.

تکراری-خطی- گرادیان

به شما امکان می دهد شیب را تکرار کنید، ایجاد الگوهای پس زمینه را ممکن می کند.

دیو (
پس زمینه رنگ: #444444;
تصویر پس زمینه: -webkit-repeating-linear-gradient(بالا، #444444 18%, #999999 25%); /* Chrome 10+، Safari 5.1+، iOS 5+، Android 4+ */
تصویر پس زمینه: -moz-repeating-linear-gradient(بالا، #444444 18%, #999999 25%); /* فایرفاکس 3.6+ */
پس‌زمینه-تصویر: -ms-repeating-linear-gradient (بالا، #444444 18%, #999999 25%)؛ /* IE 10+ */
پس‌زمینه-تصویر: -o-repeating-linear-gradient (بالا، #444444 18%, #999999 25%)؛ /* Opera 11.10+ */
پس‌زمینه-تصویر: تکرار-خطی- گرادیان (بالا، #444444 18%, #999999 25%)؛
}

گرادیان شعاعی

گرادیان دایره ای شما همچنین می توانید چندین تغییر رنگ داشته باشید، می توانید نقطه شروع گرادیان را تعیین کنید (نه لزوما از مرکز دایره).

دیو (
پس زمینه: #444444;
پس زمینه: -webkit-gradient (شعاعی، مرکز مرکزی، 0px، مرکز مرکزی، 100٪، توقف رنگ (0٪، #444444)، توقف رنگ (100٪، #999999)). /* Chrome 1-10، Safari 4+، iOS 3.2-4.3، Android 2.1-3.0 */
پس زمینه: -webkit-radial-gradient (مرکز، پوشش بیضی، #444444 0%,#999999 100%)؛ /* Chrome 10+، Safari 5.1+، iOS 5+، Android 4+ */
پس‌زمینه: -moz-radial-gradient (مرکز، پوشش بیضی، #444444 0%, #999999 100%). /* فایرفاکس 3.6+ */
پس زمینه: -o-radial-gradient (مرکز، پوشش بیضی، #444444 0%,#999999 100%). /* Opera 11.6+ */
پس زمینه: -ms-radial-gradient (مرکز، پوشش بیضی، #444444 0%,#999999 100%)؛ /* IE 10+ */
پس‌زمینه: گرادیان شعاعی (مرکز، پوشش بیضی، #444444 0%,#999999 100%)؛
}

Opera تا نسخه 11.6 از گرادیان های دایره ای پشتیبانی نمی کرد. در غیر این صورت وضعیت مانند یک گرادیان خطی است.

ابزار:

1. gradients.glrzad.com کد متقابل مرورگر را ارائه می دهد، شما می توانید تغییر رنگ های زیادی ایجاد کنید
2. www.colorzilla.com/gradient-editor پیچیده ترین مولد است. می توانید شیب های خطی و دایره ای ایجاد کنید، می توانید فرمت ضبط رنگ را انتخاب کنید و گرادیان های آماده زیادی وجود دارد.
3. گالری lea.verou.me/css3patterns از الگوهای CSS3. می توانید کد هر الگو را ببینید.

پس زمینه های متعدد

این توانایی اختصاص چندین است تصاویر پس زمینهیک عنصر
div(
پس زمینه: url(fallback.png) بدون تکرار 0 0;
زمینه: url(foreground.png) no-repeat 0 0, url (middle-ground.png) no-repeat 0 0, url (background.png) no-repeat 0 0; /* Firefox 3.6+، Safari 1.3+، Chrome 2+، IE 9+، Opera 10.5+، iOS 3.2+، Android 2.1+ */
}

مرورگرهایی را که از پس زمینه های متعدد پشتیبانی نمی کنند فراموش نکنید.

ترتیب پس زمینه ها به این صورت است که از بالا به پایین یعنی پایین ترین پس زمینه در انتها نوشته شود. بجای تصاویر پس زمینههمچنین می توانید گرادیان های CSS3 را اضافه کنید.

شعاع مرزی

گوشه های گرد روی بلوک. اگر به همان شعاع انحنا نیاز دارید، ساده است.

دیو (
-webkit-border-radius: 12px; /* Safari 3-4، iOS 1-3.2، Android ≤1.6 */
-moz-border-radius: 12px; /* فایرفاکس 1-3.6 */
شعاع مرزی: 12 پیکسل. /* Opera 10.5+، IE 9+، Safari 5، Chrome، Firefox 4+، iOS 4+، Android 2.1+ */
}

همه تولیدکنندگان قبلاً پیشوندهای فروشنده را کنار گذاشته‌اند آخرین نسخه هامرورگرها

اما اگر گوشه‌های مختلف باید شعاع‌های متفاوتی داشته باشند، باید شعاع‌های هر گوشه را فهرست کنید.

فایرفاکس یک ویژگی عجیب و غریب دارد که در آن زوایای با استفاده از نحوی متفاوت از استاندارد فهرست می شوند. اما راه حل ممکن است استفاده از یک نحو کوتاه شده باشد که در مرورگرها یکسان است.

div(
-moz-border-radius: 15px 30px 45px 60px;
-webkit-border-radius: 15px 30px 45px 60px.
شعاع حاشیه: 15 پیکسل 30 پیکسل 45 پیکسل 60 پیکسل؛
}

یک ویژگی جالب این است که جفت مقادیر شعاع را برای هر گوشه ارسال کنید. به این ترتیب می توانید به دستاوردهای بیشتری برسید اشکال پیچیدهنه فقط گرد کردن:

دیو (
شعاع حاشیه-بالا-چپ: 5px 30px;
حاشیه-بالا-راست-شعاع: 30px 60px;
شعاع حاشیه-پایین-چپ: 80px 40px;
حاشیه-پایین-راست-شعاع: 40px 100px;
}

اگر همه یکسان هستند:

دیو (
شعاع مرزی: 8 پیکسل / 13 پیکسل؛
}

ابزار:

Upd برای کسانی که می خواهند فرآیند ایجاد پیشوندها را خودکار کنند، نوشته شده است.