В настоящее время эффекты градиента становятся все более распространенными в дизайне страниц. И теперь CSS3 имеет достаточную поддержку градиентов. Хотя мы, возможно, использовали атрибут line-gradient или атрибут radial-gradient в CSS3, функция градиента в CSS3 на самом деле гораздо более мощная, чем мы думали, и ее использование позволит реализовать много интересных и забавных вещей.
В этой статье будут обсуждаться градиенты в CSS3.
Если вы ранее использовали градиенты CSS3:
HTML
Код
<div class="gradiyent_elementa">
</div>
CSS
Код
.gradiyent_elementa {background-image: linear-gradient(gold, #FF837E);height: 84px;width: 100%;}
Результаты следующие:
Это градиентный цветовой блок сверху вниз, от золотого до розового.
Раньше вам приходилось использовать изображения для достижения этих эффектов. Однако используя CSS3-градиенты, вы можете сократить время загрузки и широкополосного использования.
Если вы хотите добиться следующих эффектов градиента.
Это цветной блок, постепенный слева направо, и постепенный процесс происходит только в небольшой части.
Это цветной блок, который постепенно выходящий из центра.
Это div похож на скатерть, где также использует градиент для достижения.
В описании синтаксиса CSS часть, которая заключенная в угловые скобки, представляет тип данных, например angle представляет тип данных image.
Разнообразные методы применения градиента CSS3 обобщены с примерами. Как показано на следующем рисунке, в веб-дизайне иногда требуется использовать эффект градиента. Градиент может создавать эффект визуального шаблона, похожего на радугу. До CSS3 для отображения градиента необходимо специально создать изображение.
Также увеличивает количество запросов, и CSS3 может легко добиться эффекта градиента веб-страницы, используемого для градиентного фона, градиентной навигации и анимации CSS3 для специальных эффектов. В CSS3 градиент делится на линейный и радиальный градиент. Синтаксис цветового линейного градиента CSS немного отличается в разных браузерах, но в итоге это унифицированный стандарт.
