Hình html

Image Effectsr là các hiệu ứng xử lý đối với hình ảnh, chúng ta có thể sử dụng Hiệu ứng hình ảnh để làm cho các hình ảnh trên trang web trở nên đẹp hơn hoặc đơn giản hơn là để phù hợp hơn với giao diện trang web. Trong bài viết này mình sẽ hướng dẫn các bạn thêm hiệu ứng cho hình ảnh, mời các bạn xem ví dụ dưới đây

Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.

Running process nhé

1. Build interface

Bước đầu tiên là chúng ta sẽ tạo tệp chạy chính index.html, sau đó các bạn tạo các thành phần của ứng dụng với đoạn mã sau

Mã CHẠY

  
Freetuts.net hướng dẫn thêm Image Effects

  Xem hiệu ứng
  

    
 Grayscale
    

  
  

    
 Blur
    

  

Trong ví dụ này mình tạo ra hai hình ảnh giống nhau để ví dụ về hai hiệu ứng khác nhau. Thêm vào đó mình cũng tạo một nút để kích hoạt hiệu ứng hình ảnh

Bài viết này đã được đăng tại [free tuts. bọc lưới]

OK giờ chúng ta sẽ chuyển đến bước tiếp theo

2. Thêm CSS để định dạng các thành phần

Trong bước này chúng ta sử dụng CSS để định dạng cho các thành phần dễ nhìn hơn, các bạn thêm đoạn mã CSS dưới đây vào bên trong kiểu thẻ nhé

Mã CHẠY

.container {
  width: 700px;
  margin: auto;
  text-align: center;
}
div {
  width: 40%;
  height: 300px;
  margin-bottom: 30px;
  display: inline-block;
}
#btn {
  margin: auto;
  width: 100px;
  height: 30px;
  margin-bottom: 10px;
  display: block;
}
.grayscale {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.blur {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Tất cả các thuộc tính ở đây đều rất đơn giản, các bạn chú ý đến bộ lọc thuộc tính. grayscale(100%); và filter: blur(5px); đó chính là thuộc tính quyết định hiệu ứng của hình ảnh

3. Xử lý với Javascript

Cuối cùng, chúng ta sẽ viết đoạn mã để xử lý quá trình khi nhấp vào nút xem hiệu ứng, các bạn thêm đoạn mã dưới đây vào sau thẻ body

Mã CHẠY

Đoạn mã này cũng rất đơn giản, mình chỉ thêm các lớp vào để thêm hiệu ứng đã định dạng trước đó bằng CSS

Vì thế là xong rồi, giờ các bạn chạy file index.html để xem kết quả

4. Lời kết

Qua bài viết này, mình đã hướng dẫn các bạn thêm hiệu ứng cho hình ảnh, hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn khi hiển thị hình ảnh trên website. Nếu có gì thắc mắc các bạn hãy quay lại phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts. bọc lưới

Ví dụ

Sử dụng một

để đánh dấu ảnh trong tài liệu và phần tử để xác định chú thích cho ảnh.
 
 Hình. 1 - Trulli, Puglia, Ý.
Tự mình thử »

Thêm các ví dụ "Tự mình thử" bên dưới

---

Định nghĩa và cách sử dụng

Các

thẻ chỉ định nội dung độc lập, như hình minh họa, sơ đồ, ảnh, danh sách mã, v.v.

Trong khi nội dung của

phần tử có liên quan đến luồng chính, vị trí của nó độc lập với luồng chính và nếu bị xóa, nó sẽ không ảnh hưởng đến luồng tài liệu

Mẹo. Các

phần tử được sử dụng để thêm chú thích cho phần tử

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử

yếu tố8. 09. 04. 05. 111. 0

---

Thuộc tính toàn cầu

Các

thẻ cũng hỗ trợ Thuộc tính toàn cầu trong HTML

---

Thuộc tính sự kiện

Các

thẻ cũng hỗ trợ Thuộc tính sự kiện trong HTML

---

---

Thêm ví dụ

Ví dụ

Sử dụng CSS để tạo kiểu

và

 
 Hình. 1 - Trulli, Puglia, Ý

Try it Yourself »

---

Trang liên quan

Tham chiếu DOM HTML. đối tượng hình

---

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị

phần tử với các giá trị mặc định sau

Ví dụ

hình {
  hiển thị. chặn;
  lề trên. 1em;
  lề dưới. 1em;
  lề trái. 40px;
  lề phải. 40px;
}

Tự mình thử »