Nền Gradient hoạt hình chỉ với css cho blogspot

Trong giải tích vectơ, gradien của một trường vô hướng là một trường vectơ có chiều hướng về phía mức độ tăng lớn nhất của trường vô hướng, và có độ lớn là mức độ thay đổi lớn nhất.Trong CSS3 chúng ta có thể tạo màu sắc cho background theo các biên độ tăng hoặc giảm dần.

Gradient đóng một vai trò quan trọng trong thiết kế web. Có rất nhiều phương án thiết kế khác nhau cho gradient mà bạn có thể sử dụng, chẳng hạn như thẳng hoặc hướng tâm. Bạn có thể sử dụng các kiểu bóng đổ và màu sắc để tạo thêm sự thú vị và chiều sâu.

Sử dụng Gradient là xu hướng đang lên mà nhiều chuyên gia thiết kế web sử dụng trong vài năm trở lại đây nhờ sự hỗ trợ của CSS3. Công nghệ mới cho phép bất kỳ ai cũng có thể tự tạo những Gradient vừa ý cho website của mình.

Sau đây là hướng dẫn tạo nền Gradient hoạt hình-Gradient Background Animation Css chỉ với css cho blogspot.

Animated Background Gradient 1

Thành phần cần nền Animated Gradient

+ CSS:

.container{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
 background-size: 400% 400%;
 -webkit-animation: Gradient 15s ease infinite;
 -moz-animation: Gradient 15s ease infinite;
 animation: Gradient 15s ease infinite;
        width:100%;height:auto;
}

@-webkit-keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

@-moz-keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

@keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

Có thể thêm padding, color, font.. để định hình khu vực chứa thành phần.

+ HTML:

<div class='container'>
Thành phần cần nền Animated Gradient
</div>

Nếu không dùng thẻ div để bao thì bạn có thể sử dụng trực tiếp trong Layout cho các thẻ như:body, header-wrapper, main-wrapper....

Animated Background Gradient 2

Thành phần cần nền animated gradient

+ CSS:

.box {
  width: 100%;
  height: auto;
  overflow: auto;
  background-image: linear-gradient(to right bottom, #0080ff 0%, #00F2F2 50%, #0080ff 100%);
  animation: hue 5s infinite ease-in-out;
}

@keyframes hue {
  from { 
    -webkit-filter: hue-rotate(0deg);
  } to { 
      -webkit-filter: hue-rotate(720deg);
  }
}

+ HTML:

<div class="box">
Thành phần cần nền animated gradient
</div>