Khi cải thiện hình ảnh, chúng ta có thể chọn thực hiện với Photoshop và sau đó gắn nó lên trang web hoặc chúng ta cũng có thể chọn tùy chọn B: làm điều đó với các kỹ thuật HTML, CSS và Javascript có sẵn.
Sau bước nhảy, có rất nhiều kỹ thuật để cải thiện hình ảnh, hầu như tất cả chúng được thực hiện bằng jQuery làm nền tảng chính hoặc với CSS3 tận dụng các tiêu chuẩn web mới nhất, mặc dù tôi nhắc bạn rằng trong trường hợp đó, chúng tôi sẽ mất khả năng tương thích với một số trình duyệt.
Họ nói bằng tiếng Anh nhưng họ bị bắt ngay, đã hứa :)
Nguồn | 1WD
Hình ảnh được làm tròn CSS3 với jQuery
Tìm hiểu cách quấn thẻ span xung quanh phần tử hình ảnh để đạt được hình ảnh tròn sẽ được hiển thị ngay trong tất cả các trình duyệt hiện đại.
2.
Nhiều hình nền và đường viền với CSS 2.1
Tìm hiểu cách sử dụng phần tử giả CSS 2.1 để cung cấp tối đa 3 phông nền, 2 hình ảnh trình bày kích thước cố định và nhiều đường viền phức tạp cho một phần tử HTML.
3.
Mẹo nhanh: Nhiều đường viền với CSS đơn giản
Screencast nhanh chỉ cho bạn cách đạt được nhiều đường viền với CSS đơn giản, theo cách đó, tạo thêm chiều sâu cho thiết kế của bạn. Phiên bản đơn giản hơn nhiều của hướng dẫn trước.
4.
Nhiều đường viền trên các phần tử có kích thước động với CSS2
Phiên bản thứ ba của Nicholas Gallagher cho bạn biết phải làm gì nếu bạn không có kích thước của phần tử.
5.
Vui vẻ với các đường viền - vát, ép và nhiều hơn nữa!
Tìm hiểu cách đạt được hiệu ứng nhấn bằng CSS và một số thủ thuật tạo kiểu đường viền đơn giản để có được nhiều hiệu ứng khác nhau.
6.
Polaroids với CSS3
Tìm hiểu cách sử dụng một số CSS2 và CSS3 tuyệt vời để biến một danh sách hình ảnh đơn giản khác thành một bộ ảnh Polaroid hoàn chỉnh.
7.
Hình nền toàn trang hoàn hảo
Tìm hiểu cách thêm hình nền bằng CSS để lấp đầy toàn bộ trang bằng hình ảnh, không có khoảng trắng, chia tỷ lệ hình ảnh nếu cần, không gây ra thanh cuộn và hơn thế nữa.
8.
CSS3 Box Shadow và Hiệu ứng Di chuột
Khám phá một cách mới để thêm hiệu ứng đổ bóng chỉ bằng cách chỉnh sửa biểu định kiểu.
9.
Hiệu ứng Di chuột Hình thu nhỏ lạ mắt w / jQuery
Đạt được hiệu ứng kiểu flash gọn gàng với CSS và jQuery.
10.
Cách tạo hiệu ứng cuộn qua hình ảnh CSS đơn giản
Trong hướng dẫn này, bạn sẽ học cách tạo hiệu ứng cuộn qua hình ảnh CSS đơn giản với kiểu HTML và CSS cơ bản.
11.
hướng dẫn
Floatutorial sẽ đưa bạn qua những kiến thức cơ bản về các phần tử nổi như hình ảnh, mũ thả, nút tiếp theo và nút quay lại, thư viện hình ảnh, danh sách nội tuyến và bố cục nhiều cột. Kiểm tra 4 hướng dẫn dành riêng cho hình ảnh nổi.
12.
Hiệu ứng di chuột nhanh sử dụng CSS
Trong hướng dẫn này, bạn sẽ chuyển sang tạo các kỹ thuật di chuột nâng cao linh hoạt bằng cách sử dụng các thuộc tính CSS2.1.
13.
Máy chém nhanh không có
tải trước
Khi sử dụng cuộn qua hình ảnh CSS, phải tải hai, ba hoặc nhiều hình ảnh (và thường được tải trước để có kết quả tốt nhất). Tìm hiểu cách đặt tất cả các trạng thái vào một hình ảnh giúp thay đổi động nhanh hơn và không cần tải trước.
14.
Góc tròn jQuery
Rất nhiều hiệu ứng jQuery cho các góc tròn và nhiều mẫu khác.
15.
Chú giải công cụ và xem trước hình ảnh dễ dàng nhất bằng jQuery
Xem 3 ví dụ về việc sử dụng tập lệnh xem trước cuộn qua jQuery. Tập lệnh đơn giản này có thể được áp dụng cho nhiều mục đích khác nhau.
16.
Supersize - Nền toàn màn hình /
Xem trình diễn
plugin jquery
Superzided là một plugin jQuery thay đổi kích thước hình ảnh để lấp đầy trình duyệt trong khi vẫn duy trì tỷ lệ kích thước hình ảnh và chu kỳ Hình ảnh / nền thông qua trình chiếu có chuyển tiếp và tải trước.
17.
Lớp phủ PNG
Bạn đã bao giờ gặp phải vấn đề khi tạo một trang web với những bức ảnh do khách hàng đưa ra, chỉ để sau khi họ cập nhật ảnh, giao diện ban đầu không được giữ lại? Giải pháp này liên quan đến việc tạo một lớp phủ PNG trong suốt có thể được sử dụng làm mặt nạ / khung xung quanh JPEG hoặc GIF thông thường. Bằng cách này, cài đặt CMS điển hình có thể được định cấu hình để người dùng có thể tải ảnh lên mà không phải lo lắng về việc sử dụng bất kỳ chương trình đồ họa nào để áp dụng bộ lọc.
18.
BeZoom
Cân nặng
JQuery
Trình cắm thu phóng
BeZoom là một giải pháp thay thế đơn giản và nhẹ cho JQZoom. Nó nhẹ hơn và dễ sử dụng hơn.
19.
Sử dụng jQuery cho hoạt ảnh nền
Chơi với jQuery và thay đổi vị trí của hình nền để tạo ra loại hiệu ứng bạn đang tìm kiếm. Có một bài viết mới trả lời câu hỏi "Làm cách nào để xử lý trạng thái đang hoạt động?" - Xử lý trạng thái hoạt động cho nền hoạt hình jQuery.
20.
5 cách để tô điểm hình ảnh của bạn với CSS
Dưới đây là một vài thủ thuật đơn giản để thêm chút hương vị cho những hình ảnh nhạt nhẽo điển hình của bạn. Sử dụng Photoshop để tạo kiểu cho từng hình ảnh có thể tẻ nhạt và khó duy trì lâu dài. Những kỹ thuật CSS sau đây sẽ giúp bạn xoa dịu nỗi đau đó.
21.
Làm thế nào để:
Có thể thay đổi
Hình ảnh nền
Tìm hiểu cách thiết lập hình nền có thể thay đổi kích thước bằng CSS. Bạn có 3 tùy chọn để lựa chọn.
22.
Tạo kiểu cho các liên kết hình ảnh của bạn
Việc cho người dùng biết rằng phần cụ thể của trang web của chúng tôi có nghĩa là để được nhấp vào tốt nhất là đạt được thông qua hiệu ứng di chuột qua. Những phần "có thể nhấp" chắc chắn bao gồm hình ảnh nội dung. Liên kết hình ảnh là một tập lệnh cho phép bạn áp dụng kiểu bổ sung cho các liên kết hình ảnh của mình.
23.
Nhiều hình nền với CSS
Đôi khi, sử dụng hình nền sẽ hợp lý hơn là chèn chúng trực tiếp vào trang. Và trong khi mỗi phần tử - như thẻ body của bạn - chỉ có thể chứa một hình nền, chúng có thể được áp dụng cho một số phần tử.
24.
Viền Hình ảnh bằng CSS
Hướng dẫn thực sự dễ dàng chỉ cho bạn cách thêm đường viền chắc chắn vào hình ảnh bằng CSS.
25.
CSS Sprites mà không sử dụng hình nền
Tìm hiểu cách áp dụng hiệu ứng di chuột mà không cần nhiều kiến thức về CSS sprites.
