Стилизирайте елементите на уебсайта с фонов градиент на CSS

Стилизирайте елементите на уебсайта с фонов градиент на CSS

Ако сте били в интернет повече от няколко минути, има вероятност да сте попаднали на CSS градиент. Свойството на фона на CSS може да се използва за създаване на набор от различни стилове и един от най -интригуващите типове е това, което може да направи със стойността на градиента.





Знанието как да проектирате и създавате различни CSS градиенти е предимство за всеки софтуерен дизайнер или разработчик. От тази статия ще научите всичко, което трябва да знаете, за да започнете да включвате CSS градиенти във вашите проекти.





Какво е CSS градиент?

CSS градиент е по същество комбинацията от два или повече цвята, които плавно преминават от един към друг. Преходното състояние на CSS градиент зависи от вида на използвания градиент. Има два основни типа градиенти, които обикновено се използват в софтуерния дизайн: линейни и радиални.





Има обаче трети тип наклон, който е по -малко популярен и известен като коничен градиент.

Синтаксис на градиентите на CSS

Background-image: gradient-type (direction, color1, color2);

CSS градиентът трябва да бъде присвоен на CSS свойството на фоново изображение. Типът на градиента може да бъде един от няколкото; линеен градиент, радиален градиент или коничен градиент. Типът градиент е последван от отваряне и затваряне на скоби, които съдържат преходната посока на градиента, както и цветовете, които трябва да бъдат включени в градиента.



Свързани: Как да зададете фоново изображение в CSS

Примерът по -горе показва два цвята, но градиентът може да съдържа няколко различни цвята. Единственото изискване е всеки цвят в списъка да е разделен със запетая.





Какво е линеен градиент?

Линейният градиент е най -популярният CSS градиент. Той създава хоризонтален, вертикален или диагонален преходен градиент, използващ два или повече цвята.

Пример за линеен градиент на CSS

Background-image: linear-gradient(#00A4CCFF, #F95700FF);

Горният код ще произведе следния CSS градиент:





Има един основен компонент на синтаксиса на градиента, пропуснат от горния пример. Този компонент е преходната посока на градиента и е пропуснат, тъй като подреждането по подразбиране на линейния градиент е вертикално (отгоре надолу); това е желаният изход в този пример.

Кодът по -горе произвежда същия резултат като следния ред код. Единствената разлика между двете е посоката на кода.

Използване на примера за долен линеен градиент

Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);

Както можете да видите от изхода, горният код създава градиент, който започва със синьо отгоре, след което бавно преминава към оранжево в долната част. Ако искате да обърнете реда на цветовете, можете просто да замените до дъното с догоре и това ще обърне посоката на градиента, като произведе следния изход:

Подобно на вертикалното подравняване, хоризонталното подравняване на градиент може да бъде постигнато с използването на два набора ключови думи за посока: наляво и надясно , което ще произведе съответно следните изходи.

най -добрият начин да направите блок -схема

Диагонален линеен градиент

Възможно е да се постигне диагонален линеен градиентен преход във всяка посока на линеен градиент. Има само четири конкретни списъка с ключови думи, които трябва да знаете, за да направите това възможно.

  • Долу вдясно
  • Долу вляво
  • Горе вдясно
  • Горе вляво

Използване на пример за диагонален линеен градиент

Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);

Горният пример произвежда следния изход:

Както можете да видите от изхода по -горе, линейният градиент прави своя преход в диагонална посока, движеща се от горния ляв до долния десен участък на градиента.

Многоцветен линеен градиент

Линейният градиент може да има два или повече цвята, но как изглеждат повече цветове в градиент? Многоцветната линейна градиентна цветова подредба зависи от нейната посока. При тези, които преминават в хоризонтална посока, всеки нов цвят ще се появява вляво или вдясно от линейния градиент, в зависимост от точната посока на линейния градиент.

Пример за многоцветен линеен градиент

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Редът с код по -горе ще даде следния изход:

Както можете да видите, всеки нов цвят се добавя вдясно от градиента, създавайки това, което в крайна сметка се превръща в дъга. Същият изход може да се постигне във вертикална посока; обаче специфичното цветово подреждане на линейния градиент ще зависи от ключовата дума за вертикална посока (отгоре или надолу).

Какво е радиален градиент?

Радиалният градиент създава спираловиден градиент от два цвята, които по подразбиране започват от центъра. Когато линейният градиент произвежда прав градиент, който тече вертикално или хоризонтално, радиалният градиент произвежда кръгов градиент, който тече от центъра към външните ръбове.

Пример за радиален градиент

Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);

Редът с код по -горе ще даде следния изход:

Промяна на радиалния градиентен център

По подразбиране радиален градиент започва в центъра на градиента; е възможно обаче да се промени точката на произход с въвеждането на няколко ключови думи.

как да използвате airpods с android

Пример за смяна на радиалната градиентна начална позиция

Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);

Редът с код по -горе ще даде следния изход:

Както можете да видите от изхода над градиента, сега започва от горния десен ъгъл вместо от центъра. Тази промяна е възможна поради включването на ключовата дума горе в дясно в кода по -горе. Следният списък с ключови думи може също да се използва за промяна на началната точка на радиалния градиент:

  • Горе вляво
  • Долу вдясно
  • Долу вляво

Многоцветни радиални градиенти

Подобно на линейния градиент, радиалният градиент може също да използва два повече цвята, основната разлика е, че когато линейният градиент добавя към градиента по права линия, радиалният градиент добавя нови цветове по външния ръб.

Пример за многоцветен радиален градиент


Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Редът с код по -горе ще даде следния изход:

Персонализиране на градиентите

Досега сте виждали как да промените посоката и централната точка на наклон, но не сте виждали как да персонализирате наклон. Персонализирането на градиент може да звучи като много работа, но след като разберете основите на създаването на CSS фонов градиент, следващата очевидна стъпка е да научите как да направите вашите CSS градиенти по -уникални.

колко горещо трябва да се загрее моят процесор

По подразбиране цветовете в градиент заемат равномерно разпределено пространство, като всеки цвят плавно преминава в този след него. Така че, ако два цвята се комбинират, за да образуват градиент, всеки цвят ще заема половината от наличното пространство, докато преминава от един в друг. Ако се комбинират три цвята, всеки цвят ще заема една трета от наличното пространство.

С персонализиран градиент можете да определите количеството пространство, което цвят ще заема в градиент, като изрично зададете позиция за спиране на цвета .

Персонализиране на пример за линеен градиент 1

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);

Редът с код по -горе ще даде следния изход:

Изходът по -горе показва втория цвят в линейния градиент, спиращ се в точката от 30% от първия цвят в градиента, вместо обичайното му положение, и тъй като вторият цвят също е крайният цвят в градиента, той естествено се простира до края .

Ако поставите 30% в кода по -горе в края на първия цвят, нещата трябва да станат по -ясни.

Персонализиране на пример за линеен градиент 2

Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );

Кодът по -горе ще даде следния изход.

Изходът по -горе ясно показва първия цвят в градиента, спиращ се в точката от 30% от втория цвят в градиента. Този пример, заедно с горния, би трябвало да ви улесни в разбирането на настройката за спиране на цветовете.

Персонализирането на радиален градиент се извършва по същия начин като линейния градиент. Единственото нещо, което трябва да направите, за да постигнете същите резултати по -горе в радиален градиент, е да промените типа и посоката на градиента.

Създаването на CSS градиенти никога не е било по -лесно

Тази статия с уроци ви предоставя инструментите за идентифициране и създаване на линейни и радиални наклони. Ако сте стигнали до този момент, сте научили как да промените посоката и центъра на наклон. Освен това вече имате умения да персонализирате CSS градиенти и да създавате уникални фонови градиенти.

Ако обаче не искате да отидете направо в създаването на нови и уникални наклони, можете да започнете, като създадете някои страхотно изглеждащи вече съществуващи.

Дял Дял Туит електронна поща 27 Стилни примери за градиент на фона на CSS

Плътните цветове са толкова миналата година. Градиентите са включени! Но как да ги създадете в CSS?

Прочетете Напред
Свързани теми
  • Програмиране
  • Уеб разработка
  • Уеб дизайн
  • CSS
За автора Кадейша Кийн(21 статии са публикувани)

Kadeisha Kean е разработчик на софтуер с пълен набор и технически/технологичен писател. Тя има отличителната способност да опростява някои от най -сложните технологични концепции; производство на материал, който може лесно да бъде разбран от всеки начинаещ в технологиите. Тя е запалена по писането, разработването на интересен софтуер и пътуването по света (чрез документални филми).

Още от Kadeisha Kean

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате