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

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

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

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

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

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

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

Фоново изображение: тип градиент (посока, цвят1, цвят2);

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

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

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

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

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

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

Фоново изображение: линеен градиент (# 00A4CCFF, # F95700FF);

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

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

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

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

Фоново изображение: линеен градиент (отдолу, # 00A4CCFF, # F95700FF);

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

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

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

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

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

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

Фоново изображение: линеен градиент (долу вдясно, # 00A4CCFF, # F95700FF);

Примерът по-горе дава следния изход:

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

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

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

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

Фоново изображение: линеен градиент (вдясно, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

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

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

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

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

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

Фоново изображение: радиален градиент (кръг, # 00A4CCFF, # F95700FF);

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

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

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

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

Фоново изображение: радиален градиент (кръг горе вдясно, # 00A4CCFF, # F95700FF);

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

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

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

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

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

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

Фоново изображение: радиален градиент (кръг, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

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

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

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

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

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

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

Фоново изображение: линеен градиент (вдясно, # 00A4CCFF, # F95700FF 30%);

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

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

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

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

Фоново изображение: линеен градиент (вдясно, # 00A4CCFF 30%, # F95700FF);

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

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

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

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

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

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

27 Примери за стилен CSS градиент на фона

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

Прочетете Напред

За автора

Разгънете, за да прочетете цялата история