css градиент
Градиент - запълване на избраната област с последователност от цветови нюанси с плавни преходи между тях. Градиентът се използва за показване на плавен преход между два или повече определени цветови нюанса. Пример за градиент:
Преди това фоновите изображения бяха използвани за създаване на градиентен ефект. Сега можете да използвате CSS3, за да създадете градиентен фон. Елементите с CSS3 градиенти изглеждат по-добре, когато са увеличени, отколкото техните аналогове на фоново изображение, тъй като градиентът се генерира от браузъра директно под определената област.
Имайте предвид, че CSS градиентът е фоново изображение, генерирано от браузъра, а не фонов цвят, така че се определя като стойността на свойството background-image. Това означава, че градиентът може да бъде определен не само като стойност на свойството background-image, но и навсякъде, където може да бъде вмъкнато фоново изображение, като list-style-image и background.
CSS3 дефинира два типа градиенти:
Линеен градиент - плавен преход от цвят към цвят в права линия.
Радиален градиент - плавен преход от цвят към цвят от една точка във всички посоки.
Линеен градиент се разпространява в права линия, показвайки плавен преход от един цветови нюанс към друг. Линеен градиент се създава с помощта на функцията linear-gradient(). Функцията създава изображение, което е линеен градиент между зададените нюанси на цветовете. Размерът на градиента съответства на размера на елемента, към който се прилага.
Функцията linear-gradient() приема следните аргументи, разделени със запетаи:
Първият аргумент е степента на ъгъла или ключадуми, определящи ъгъла на посоката на градиентната линия. Незадължителен аргумент.
Разделен със запетая списък от два или повече цвята, всеки от които може да бъде последван от стоп позиция.
Най-простият линеен градиент изисква само два аргумента, определящи началния и крайния цвят: