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

Nội dung chính Show

• Parallax Pixel Stars
• Gradient Background Animation
• Frosted Glass Effect
• Shooting Star
• Tri Travelers
• Animated Background Header
• Zero Element: DeLight
• Glowing Particle Animation
• Background Image Scroll Effect
• Multiple Background Image Parallax
• Bokeh Effect
• Calm Breeze Login Screen
• Effect Text Gradient
• 14 CSS tạo hiệu ứng cho Background tuyệt đẹp
• 14 CSS tạo hiệu ứng cho Background tuyệt đẹp
• Chia sẻ trang này

Đã đăng vào thg 9 20, 2019 9:08 SA 1 phút đọc

Với CSS bạn có thể tạo ra các hiệu ứng rất đẹp và thú vị khi kết hợp với HTML và JavaScript, hoặc ngay cả khi chỉ có mình nó, CSS hỗ trợ rất nhiều trong việc thiết kế giao diện. Bạn sẽ ngạc nhiên về những gì các nhà phát triển có thể tạo ra.

Từ các hình ảnh động cuộn đơn giản đến các background phức tạp được xây dựng hoàn toàn bằng CSS, những hiệu ứng này có thể làm trang web của bạn trơ nên lung linh và sáng tạo hơn.

Hôm nay tôi đã thu thập được 14 CSS rất tuyệt vời.

Parallax Pixel Stars

Gradient Background Animation

Frosted Glass Effect

Shooting Star

Tri Travelers

ColorDrops

Animated Background Header

Zero Element: DeLight

Glowing Particle Animation

Background Image Scroll Effect

Multiple Background Image Parallax

Bokeh Effect

Calm Breeze Login Screen

Effect Text Gradient

Cảm ơn các bạn đã đọc ! Hi vọng sẽ giúp bạn trong công việc

Tham khảo: 1stwebdesign

All rights reserved

14 CSS tạo hiệu ứng cho Background tuyệt đẹp

14 CSS tạo hiệu ứng cho Background tuyệt đẹp

1. Với CSS bạn có thể tạo ra các hiệu ứng rất đẹp và thú vị khi kết hợp với HTML và JavaScript, hoặc ngay cả khi chỉ có mình nó, CSS hỗ trợ rất nhiều trong việc thiết kế giao diện. Bạn sẽ ngạc nhiên về những gì các nhà phát triển có thể tạo ra.

   Từ các hình ảnh động cuộn đơn giản đến các background phức tạp được xây dựng hoàn toàn bằng CSS, những hiệu ứng này có thể làm trang web của bạn trơ nên lung linh và sáng tạo hơn.

   Hôm nay chúng tôi đã thu thập được 14 CSS rất tuyệt vời.

   Parallax Pixel Stars

   Gradient Background Animation

   Frosted Glass Effect

   Shooting Star

   Tri Travelers

   ColorDrops

   Animated Background Header

   Zero Element: DeLight

   Glowing Particle Animation

   Background Image Scroll Effect

   Multiple Background Image Parallax

   Bokeh Effect

   Calm Breeze Login Screen

   Effect Text Gradient

   Tham khảo: 1stwebdesign
   ​

Nghề nghiệp: Illustrator, UX Designer

Chia sẻ trang này

Trong bài viết này mình xin giới thiệu các bạn về 2 thuộc tính trong CSS 3 đó là background và transion. Bằng cách kết hợp khéo léo 2 thuộc tính trên chúng ta sẽ tạo ra một hiệu ứng đẹp giúp cho trang web trở nên sinh động hơn. Mọi người có thể xem demo ở đây. Để có thể thấy được hiệu ứng trên các bạn cần sử dụng Chrome (hoặc Firefox, Safari, Opera). Bởi thuộc tính CSS 3 transition chỉ được hỗ trợ trên trình duyệt đó.

Trước hết mình sẽ nói qua ý tưởng của việc tạo hiệu ứng này. Hiệu ứng xảy ra khi người dùng hover vào colum, background của colum sẽ được thay đổi. Thông thường như ở css 2 khi hiệu hover thì lập tức background được thay đổi. Nếu như khoảng thời gian 4-5 năm trước thì khi nhìn thấy điều đó bạn đã cảm thấy khá ấn tượng. Nhưng hiện giờ khi jquery xuất hiện, đã xem rất nhiều hiệu ứng của jquery thì bạn sẽ cảm thấy nó rất thô cứng. Với 2 thuộc tính mới của css 3 đó là background và transition chúng ta có thể làm điều đó đơn giản hơn với việc dùng jquery. Tại sao chúng ta lại sử dụng 2 thuộc tính này?

• Background: Như các bạn thấy trong hiệu ứng này sẽ có 2 bức ảnh từ 2 bên từ từ vào giữa, CSS 3 đã cung cấp cho một Element(đối tượng) có thể có nhiều background.
• Transition(sự chuyển tiếp): chúng ta sử dụng transition khi một element có sự thay đổi về giá trị giữa 2 trạng thái. Trong hiệu ứng này, background-poistion đã có sự thay đổi khi chúng ta hover qua colum.

Ý tưởng là vậy, chúng ta bắt đầu làm nào:

Trước hết là mã HTML:

  

  
    
    
Starting Up
 
    
Vestibulum quis felis ut enim aliquam iaculis. Nullam pharetra tortor at quam viverra volutpat
    More
  

  
    
    
Planning
 
    
Nullam eget felis id metus luctus semper quis vel nulla. Cras diam mauris, molestie eu sodales non,
    More
  
  
  
    
    
Development
 
    
Nulla at tortor quam, eu ultricies nulla. Maecenas viverra, leo vitae mattis iaculis, nisi nunc semp
    More
  

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é!