Hướng dẫn hiệu ứng background css

Mã CSS cho phần hiển thị.

.colum{
  float: left;
  width: 313px; 
}
.colum p{
  background: url[../images/block-service-body.png] no-repeat center top;
  padding: 26px 35px 23px;
  text-align: center;
  color: white;
  text-shadow: 0 1px 0 rgba[0, 0, 0, .7];
}
.colum a{
  display: inline-block;
  padding: 8px 20px 7px;
  color: white;
  background: url[../images/bg-more.png] top repeat-x;
  border-radius: 5px;
  text-decoration: none;
  margin-left: 125px;
}
.colum a:hover{
  background: url[../images/bg-more.png] bottom repeat-x #E4AA07;
  text-decoration: none;
}

Giờ bắt đầu với thuộc tính background :

Bình thường:

.colum{
background: url[../images/bg-block-serv.gif] repeat-y right, url[../images/hover-left.png] -160px repeat-y, url[../images/hover-right.png] 320px repeat-y;
}

Khi hover qua:

.colum:hover{
  background: url[../images/bg-block-serv.gif] repeat-y right, url[../images/hover-left.png] left repeat-y, url[../images/hover-right.png] 156px repeat-y;
}

Cũng gần giống như CSS 2, nhưng ở CSS 3 có thêm một điều đó là Chúng ta có thể có nhiều background trong một đối tượng. Bằng với việc kết hợp background-poisiton thì một đối tượng sẽ có một background được ghép từ nhiều miếng nhỏ. Và đó cũng là ý tưởng được dùng cho hiệu ứng này. Trong thẻ colum gồm 3 background:

Các bạn hãy thử thay đổi các giá trị -160px, 320px,left, 156px để xem tác dụng của nó là gì?

Tiếp theo chúng ta sẽ sử dụng transition để hoàn thành hiệu ứng này:

transition: property duration timing-function delay;

• transition-property: thuộc tính css áp dụng transition. Ở đây chúng ta sẽ sử dụng "background-postion"
• transition-duration: khoảng thời gian xảy ra transition. Mặc định 0.Ở đây là 0.4s.
• transition-timing-function: Tốc độ transition xảy ra như thế nào. Mặc định ease.Bạn có thể thử với giá trị khác như: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier[n,n,n,n].
• transition-delay: độ trễ sẽ thực hiện transiton. Defaul 0.

.colum{
  -webkit-transition: background-position .4s ease;//cần thêm tiền tố -webkit- để chạy được trong Chomre, Safari
-moz-transition: background-position .4s ease;//cần thêm tiền tố -webkit- để chạy được trong Firefox
-o-transition:background-position .4s ease;//cần thêm tiền tố -webkit- để chạy được trong Opera.
}

Vậy transition đã làm gì trong hiệu ứng này. Bình thường khi bạn không di chuột qua các colum, thì trong colum chúng ta chỉ nhìn thấy duy nhất background bg-block-serv.gif. Nhưng khi bạn hover qua bạn thấy sự chuyển động của background:

• hover-left: chuyển từ position -160px tới vị trí 0px [Vị trí tương đối so với colum]. Việc dịch chuyển này diễn ra trong vòng 0.4s. Bạn thử đổi giá trị transition-duration về 0 xem nhé!
• hover-right:Chuyển từ position 320px tới position 156px.
• Bạn cũng có thể thêm transition-delay để biết thêm về thuộc tính này.

Chính những điều này do CSS 3 Transition thực hiện.

Như vậy chúng ta đã hoàn thành hiệu ứng với 2 thuộc tính của CSS3.Bạn đã tìm được chỗ để đặt nó trong trang web của mình chưa? Cuối cùng mình muốn có câu hỏi cho mọi người, nếu như các bạn không sử dụng CSS3, hoặc bạn muốn hiệu ứng ấy chạy được trên IE thì sao? Chúng ta phải làm thế nào đây. Bạn nào biết điều này hãy giúp mình cùng với mọi người nhé!