Gradient radial. Radial-gradient(): gradient radial Gradient liniar - de la stânga la dreapta
Orez. 1. Gradient radial și liniar
Un gradient radial este creat folosind proprietatea fundal sau imagine de fundal.
Sintaxă
imagine de fundal: gradient radial([ cerc ||<радиус>] [ la<позиция>]? , | [elipsa || [<радиус> | <проценты>](2)] [ la<позиция>]? , | [[ cerc | elipsa ] ||<размер>] [ la<позиция>]? , | la<позиция> , <цвет> [ , <цвет> ]*)
Denumiri
| Descriere | Exemplu | |
|---|---|---|
| <тип> | Indică tipul valorii. | <размер> |
| A && B | Valorile trebuie să fie afișate în ordinea specificată. | <размер> && <цвет> |
| A | B | Indică faptul că trebuie să selectați o singură valoare dintre cele propuse (A sau B). | normal | litere mici |
| A || B | Fiecare valoare poate fi folosită independent sau împreună cu altele în orice ordine. | lățime || numara |
| Grupează valori. | [ recolta || cruce ] | |
| * | Repetați de zero sau de mai multe ori. | [,<время>]* |
| + | Repetați una sau mai multe ori. | <число>+ |
| ? | Tipul, cuvântul sau grupul specificat este opțional. | medalion? |
| (A, B) | Repetați cel puțin A, dar nu mai mult de B ori. | <радиус>{1,4} |
| # | Repetați o dată sau de mai multe ori, separate prin virgule. | <время># |
Valori
cerc Un gradient radial cu formă circulară. elipse Creează un gradient eliptic. Acest formular este instalat implicit.<радиус>Raza gradientului în unități care pot fi citite de CSS. O valoare indică raza cercului, două valori indică raza elipsei de-a lungul axei x și raza acesteia de-a lungul axei y. Dacă raza nu este specificată în mod explicit, gradientul va umple întregul fundal al elementului.<позиция>
Setează punctul de pornire de unde provine gradientul. Poziția unui punct este scrisă în mod similar cu valorile proprietății fundal-position, folosind cuvinte cheie sau unități de măsură disponibile, cum ar fi pixeli sau procente; Mai jos sunt posibile combinații.
- stânga sus = stânga sus = 0% 0% (în colțul din stânga sus);
- sus = sus centru = centru sus = 50% 0% (sus centru);
- dreapta sus = dreapta sus = 100% 0% (în colțul din dreapta sus);
- stânga = stânga centru = centru stânga = 0% 50% (stânga și centru);
- centru = centru centru = 50% 50% (centru) este implicit;
- dreapta = dreapta centru = centru dreapta = 100% 50% (dreapta si centru);
- stânga jos = stânga jos = 0% 100% (în colțul din stânga jos);
- jos = jos centru = centru jos = 50% 100% (jos centru);
- dreapta jos = dreapta jos = 100% 100% (în colțul din dreapta jos).
| Sens | Cod | Descriere | Vedere |
|---|---|---|---|
| partea cea mai apropiată | fundal: radial-gradient (cerc cu partea apropiată la 30px 20px, #fff, #000); fundal: gradient radial (partea cea mai apropiată la 30px 20px, #fff, #000); | Gradientul coincide cu latura blocului cea mai apropiată de acesta (pentru un cerc) sau coincide simultan cu cele mai apropiate laturi orizontale și verticale (pentru o elipsă). |  |
fundal: radial-gradient (cercul cel mai apropiat colț la 30px 20px , #fff, #000); fundal: radial-gradient (cel mai apropiat colț la 30px 20px , #fff, #000); | Forma gradientului este calculată pe baza informațiilor despre distanța până la cel mai apropiat colț al blocului. |  |
|
fundal: gradient radial (cercul latura cea mai îndepărtată la 30px 20px , #fff, #000); fundal: gradient radial (partea cea mai îndepărtată la 30px 20px, #fff, #000); | Efect similar cu cea mai apropiată latură , dar gradientul se extinde până în partea îndepărtată a blocului. |  |
|
| cel mai îndepărtat-colț | fundal: radial-gradient(cercul cel mai îndepărtat-colț la 30px 20px , #fff, #000); fundal: gradient radial (cel mai îndepărtat colț la 30px 20px , #fff, #000); | Forma gradientului este calculată pe baza informațiilor despre distanța până la colțul îndepărtat al blocului, |  |
Exemplu
Rezultatul acestui exemplu este prezentat mai jos.
Notă
Chrome înainte de versiunea 26, Safari înainte de versiunea 6.1 și Android înainte de versiunea 4.4 acceptă -webkit-radial-gradient() .
Opera până la versiunea 12.10 acceptă -o-radial-gradient() .
Firefox până la versiunea 16 acceptă -moz-radial-gradient() .
Toate proprietățile prefixate nu folosesc cuvântul cheie at atunci când setați poziția punctului de pornire al gradientului.
Specificație
Fiecare specificație trece prin mai multe etape de aprobare.
- Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
- Recomandarea candidatului ( Recomandare posibilă) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru implementarea standardului.
- Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
- Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
- Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
- Ciornă ( Proiect de specificație) - prima versiune a standardului.
Fundal cu degrade
Gradienții CSS vă permit să afișați tranziții netede între două sau mai multe culori specificate.
CSS definește două tipuri de gradienți:
- Gradienți liniari (în jos/sus/stânga/dreapta/diagonală)
- Gradienți radiali (definiți de centrul lor)
Gradienți liniari CSS
Pentru a crea un gradient liniar, trebuie să definiți cel puțin două opriri de culoare. Opririle de culoare sunt culorile între care doriți să aveți tranziții line. De asemenea, puteți specifica un punct de pornire și o direcție (sau unghi) împreună cu un efect de gradient.
Sintaxă
fundal: gradient liniar( direcţie, culoare-stop1, color-stop2,...);
Gradient liniar - de sus în jos (implicit)
Următorul exemplu arată un gradient liniar care începe din partea de sus. Începe roșu, trecând la galben:
Exemplu
#grad (
fundal: liniar-gradient (rosu, galben);
}
Gradient liniar - de la stânga la dreapta
Următorul exemplu arată un gradient liniar pornind de la stânga. Începe roșu, trecând la galben:
Exemplu
#grad (
fundal: liniar-gradient (la dreapta, rosu, galben);
}
Gradient liniar-Diagonală
Puteți realiza un gradient diagonal specificând pozițiile de pornire orizontale și verticale.
Următorul exemplu arată un gradient liniar care începe în stânga sus (și merge în dreapta jos). Începe roșu, trecând la galben:
Exemplu
#grad (
fundal: liniar-gradient (în dreapta jos, roșu, galben);
}
Utilizarea unghiurilor
Dacă doriți mai mult control asupra direcției gradientului, puteți defini un unghi mai degrabă decât direcții predefinite (jos, sus, dreapta, stânga, jos dreapta etc.).
Sintaxă
fundal: gradient liniar( unghi, culoare-stop1, culoare-stop2);
Unghiul este specificat ca unghiul dintre linia orizontală și linia de gradient.
Următorul exemplu arată cum să utilizați unghiurile pe gradienți liniari:
Exemplu
#grad (
fundal: liniar-gradient(-90deg, rosu, galben);
}
Folosind mai multe opriri de culoare
Următorul exemplu arată un gradient liniar (de sus în jos) cu mai multe opriri de culoare:
Exemplu
#grad (
fundal: liniar-gradient (rosu, galben, verde);
}
Următorul exemplu arată cum să creați un gradient liniar (de la stânga la dreapta) cu o culoare curcubeu și ceva text:
Fundal cu degrade
Exemplu
#grad (
fundal: gradient liniar (la dreapta, rosu, portocaliu, galben, verde, albastru, indigo, violet);
}
Notă: Internet Explorer 9 și versiunile anterioare nu acceptă gradienți.
„/> Vezi demonstrația în editorFolosind transparența
Gradienții CSS acceptă și transparența, care poate fi folosită pentru a crea efecte de estompare.
Pentru a adăuga transparență, folosim funcția RGBA() pentru a defini opririle de culoare. Ultimul parametru din funcția RGBA() poate fi o valoare între 0 și 1 și determină transparența culorii: 0 indică transparență completă, 1 indică culoare completă (fără transparență).
Următorul exemplu arată un gradient liniar pornind de la stânga. Începe complet transparent, trecând la o culoare roșie completă:
Exemplu
#grad (
fundal: gradient-liniar(la dreapta, rgba(255,0,0,0), rgba(255,0,0,1));
}
Repetați gradientul liniar
Funcția repeat-linear-gradient() este utilizată pentru a repeta gradienții liniari:
Exemplu
Gradient liniar care se repetă:
#grad (
fundal: repetare-liniar-gradient (roșu, galben 10%, verde 20%);
}
Gradienți radiali CSS
Gradientul radial este definit de centrul său.
Pentru a crea un gradient radial, trebuie să definiți și cel puțin două opriri de culoare.
Sintaxă
fundal: gradient radial( dimensiunea formei la poziție, culoarea de început, ..., culoarea finală);
În mod implicit, forma este o elipsă, dimensiunea este colțul cel mai îndepărtat, iar poziția este centrul.
Gradient radial - Spațiere uniformă între opriri de culori (implicit)
Următorul exemplu arată un gradient radial cu opriri de culoare răspândite uniform.
Gradient radial- gradient pentru crearea de efecte atunci când o culoare trece la alta. Spre deosebire de un gradient liniar, acesta folosește fie o tranziție circulară, fie o elipsă. Direcția de schimbare a culorii merge în direcții diferite de la centru. Un gradient radial mai este numit și „gradient circular”.
Gradientul radial este setat folosind proprietatea radial-gradient împreună cu fundalul . Are destul de mulți parametri, pe care îi vom lua în considerare secvenţial.
Sintaxă CSS cu gradient radial
fundal: gradient radial ( culoare1, culoare2,...);
- poziție - coordonatele inițiale X și Y (cel mai adesea specificate ca procent). Există constante:
- sus - sus centru (50% 0%)
- stânga sus - colțul din stânga sus (0% 0%)
- dreapta sus - colțul din dreapta sus (100% 0%)
- centru (implicit) - centrul zonei (50% 50%)
- centru stânga - centru stânga (0% 50%)
- dreapta centru - dreapta centru (100% 50%)
- jos - jos în centru (50% 100%)
- stânga jos - jos stânga (0% 100%)
- dreapta jos - jos dreapta (100% 100%)
- form - specificarea formei gradientului. Există două opțiuni:
- cerc - cerc
- elipse - elipse
- dimensiune - cum se va întinde gradientul. Poate lua următoarele valori
- partea apropiată - gradientul merge la marginea cea mai apropiată a elementului.
- cel mai apropiat colț - gradientul tinde spre cel mai apropiat colț.
- latura cea mai îndepărtată (implicit) - Gradientul se extinde până la marginea îndepărtată a elementului.
- cel mai apropiat colț - gradientul se extinde până la cel mai îndepărtat colț al elementului.
- culoare1 - culoarea inițială
- culoare2 - culoare finală
Culoarea poate fi specificată în format RGB, o anumită culoare sau în format rgba (vezi codurile de culoare html pentru site).
Nota 1Puteți specifica trecerea mai multor culori separate prin virgule.
În cea mai simplă versiune, puteți specifica doar două culori. De exemplu
fundal: gradient radial (#ADFF2F, #006400)Nota 2
Pentru browsere, trebuie să setați această proprietate cu prefixe de furnizor: -moz-, -webkit-, -ms-, -o-:
fundal: -moz-radial-gradient fundal: -webkit-radial-gradient fundal: -ms-radial-gradient fundal: -o-radial-gradientNota 3
Proprietatea radial-gradient poate fi făcută și repetând: repetare-radial-gradient
fundal : gradient-radial-repetat ( cerc, #8FBC8F, #8FBC8F .5em, transparent .5em, transparent 1.5em);
Exemple cu gradienți radiali
Exemplul 1. Poziție de pornire diferită
Folosind cuvântul cheie at, puteți specifica poziția centrului gradientului radial.
Пример 2. Размер градиента
Ниже представлен пример, который показывает работу границы
На странице преобразуется в следующее
CSS-градиент представляет собой переходы от одного цвета к другому.
Градиенты создаются с помощью функций linear-gradient() и radial-gradient() .
Градиентный фон можно устанавливать в свойствах background , background-image , border-image и list-style-image .
Как сделать градиент в CSS
Поддержка браузерами
IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
1. Линейный градиент linear-gradient()
Рис. 1. Линия градиента, начальная и конечная точки и угол градиента
Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента .
Если направление не указано, используется значение по умолчанию — сверху-вниз .
Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.
Background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);
Направление
градиента может быть задано двумя способами:
с помощью угла наклона
в градусах deg , значение которого определяет угол наклона линии внутри элемента.
Div { height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); }
с помощью ключевых слов to top , to right , to bottom , to left , которые соответствуют углу градиента, равному 0deg , 90deg , 180deg и 270deg соответственно.
Div { height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); }
Если направление задано парой ключевых слов, например, to top left , то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.
Div { height: 200px; background: linear-gradient(to top left, powderblue, pink); }
Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops . Точки остановки задаются в % , где 0% — начальная точка, 100% — конечная точка, например:
Div { height: 200px; background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); }
Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:
Div { height: 200px; background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); }
2. Радиальный градиент radial-gradient()
Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
Background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);
Форма градиента определяется ключевыми словами circle или ellipse . Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.
Div { height: 200px; background: radial-gradient(white, #FFA9A1); }
Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position , с добавлением приставки at . Если позиция центра не задана, используется значение по умолчанию at center .
Div { height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); }
С помощью пары значений, указанных в единицах длины % , em или px , можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.
Div { height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); }
Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).
div { height: 200px; background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B); }С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки.
Мяч
div { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 65% 15%, aqua, darkblue); }Кнопка
Почтовая марка
Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.
Jpg">
