Циркулярни и елиптични градиенти на CSS3 [CSS3 Съвети]
Днес ще продължим нашата дискусия CSS3 градиенти. В предишния пост ви показахме как да създавате Линейни градиенти. Този път ще покрием техните роднини, Кръгови и елиптични градиенти.
Синтаксис на градиента
Градиентът в CSS3 се декларира с помощта на фон изображение Имот. Това е за по-добра съвместимост, когато също трябва да добавим Цвят на фона в един набор от правила, така че да не се сблъскват един с друг. След това, за да създадем радиалния градиент, ние просто го наричаме с това радиално-градиент () функция. Има четири стойности, които трябва да бъдат включени във функцията, за да настроите градиента правилно.
Първата стойност определя градиентна позиция. Можем да използваме описателна ключова дума като отгоре, отдолу, в средата и вляво, или да бъдем по-конкретни, 50% 50% за да зададете градиента в центъра или 0% 0% , за да настроите градиента да започва от горе вляво.
Втората стойност определя форма и размер на наклона, има два аргумента за оформяне на градиентите, първо елипса което е по подразбиране, а второто е кръг.
И за размер на градиента, можем да изберем един от следните шест аргумента.
| Стойности | описание |
|---|---|
близкото крило | Формата на наклона се среща от страната на кутията най-близо до центъра й (за кръгове) или отговаря както на вертикалните, така и на хоризонталните страни, най-близо до центъра (за елипси). |
Най-близкото-ъгъл | Формата на наклона е оразмерена, така че точно отговаря на най-близкия ъгъл на кутията от центъра му. |
отдалечената страна на | Подобно на най-близката страна, с изключение на това, че формата е оразмерена така, че да отговаря на страната на кутията, която е най-отдалечена от центъра (или вертикални и хоризонтални страни). |
Най-далечният ъгъл | Формата на наклона е оразмерена така, че точно да отговаря на най-далечния ъгъл на кутията от центъра му. |
съдържа | Синоним на |
Покрийте | Синоним на |
Източник на таблица: Мрежа на разработчиците на Mozilla.
Накрая, третият и четвъртият определят цветова комбинация. Ето как пишем синтаксиса за създаване на елиптичен градиенти и този път ще използваме Покрийте за размера на градиента, така че ще се разпространи широко, покривайки контейнера;
body background-image: радиален градиент (център център, елипсово покритие, # ffeda3, # ffc800);
За да създадете кръгъл градиент можем просто да го направим по следния начин:
body background-image: радиален градиент (център център, покритие на кръг, # ffeda3, # ffc800);
Както подсказва името, формата на градиента ще бъде кръг.
Поддръжка на браузър
Просто вземете под внимание, но всички браузъри все още са в процес на предоставяне на пълна поддръжка за тази функция, така че те все още се нуждаят от префикс на доставчика. По този начин целият пълен синтаксис, който ще работи във всички съвременни браузъри - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ и Opera 11+ - ще изглежда нещо подобно;
body background-image: радиално-градиентно (централно дъно, елипсово покритие, # ffeda3, # ffc800); background-image: -о-радиален градиент (централно дъно, елипсово покритие, # ffeda3, # ffc800); background-image: -ms-радиален градиент (централно дъно, елипсово покритие, # ffeda3, # ffc800); background-image: -moz-radial-gradient (централно дъно, елипсово покритие, # ffeda3, # ffc800); background-image: -webkit-radial-gradient (централно дъно, елипсово покритие, # ffeda3, # ffc800);
Вижте демото или изтеглете източника, за да играете с градиенти.
- Демонстрация
- Изтеглете Източник
Заключителни думи
Създаването на радиален градиент на CSS3 не е толкова трудно, колкото смятате, и особено когато получавате помощ от тези инструменти за генериране на код:
- Colorzilla Gradients
- Gradientoo
Радиалният градиент е само един тип на CSS3 gadients, ние ще продължим нашата дискусия по темата в бъдещите публикации, така че останете на вълната на Hongkiat.com
