Как да добавите CSS чрез линеен градиент във фонов режим

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

синтактични свойства

Така че, просто линеен градиент може да бъде настроен, както следва:

Съответно, нека просто да замени вместо тези думи реални стойности и да видим какво ще стане.

И толкова сладък gradientik формира на моята страница. Разбира се, преди това, аз помолих определен размер блок (ширина и височина). Но същността, мисля, че неразбрани.

Линеен градиент от дъга

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

Сега тя се насочва от горе на долу. Също така, аз имам всички цветове на дъгата. Оказа се:

Резките преходи и kolorstopy

Сега е време да се рови в свойствата на синтаксиса и ще ви покаже как да се направи резки преходи между цветовете. Вижте кода:

И това изглежда така:

Резките преходи са възможни благодарение на факта, че ние поискахме т.нар kolorstopy. Те са дадени в проценти и се определи къде в градиента ще бъде най-натоварената част на цвета. За да се направи скок, трябва да се определят две съседни цветове kolorstop на същото място, което направихме в този пример.

Както можете да записвате цвят?

Цвета, който може да се определи как искате: с помощта на ключова дума, шестнадесетичен код формат в RGB, RGBA, HSL. С една дума, по всеки възможен начин. Така, че е възможно да се направи прозрачни градиенти, например.

Какво друго е възможно това?

Не можете да определите посоката на ключовата дума (надясно, наляво, отгоре и отдолу), и по степени от 0 до 360. По този начин е възможно да се насочи по диагонал, въпреки че това може да бъде направено с помощта на две ключови думи. Ето как: до горе вдясно - в горния десен ъгъл. С всички други ценности, както и.

Можете също така да се интересуват от