Tạo hiệu ứng ghép ảnh trong trình duyệt với CSS

Sep 12, 2025

Cách

Nếu bạn đã từng ước, bạn có thể sao chép những ảnh hưởng của truyền thống nhà sản xuất cắt dán trong của bạn Bố cục trang web , Đây là hướng dẫn cho bạn.

Hướng dẫn thiết kế web sẽ xem xét ba thuộc tính CSS: Mặt nạ-hình ảnh. Cái gì clip-path. và hình dạng bên ngoài . Ngay cả khi bạn đã sử dụng chúng, đừng lo lắng. Tôi sẽ hiển thị các ví dụ sẽ giúp bạn tạo hiệu ứng bạn có thể đã không thấy trên nhiều trang web.

Tìm kiếm một loại hướng dẫn khác nhau? Xem Cách tạo ảnh ghép trong Photoshop . Và đối với các hướng dẫn tiện dụng, hãy xem hàng đầu của chúng tôi người tạo ra trang web và web hosting dịch vụ.

18 ví dụ hoạt hình CSS hàng đầu

Cảm hứng lớn nhất của tôi về việc sử dụng các thuộc tính được đề cập là ảnh ghép truyền thống. Tôi đã tự hỏi nếu có thể tạo chúng trong trình duyệt web, mà không cần sử dụng bất kỳ trình soạn thảo hoặc phần mềm đồ họa nào. Với sự kỳ diệu của CSS, nó hoàn toàn có thể làm được! Một phần thưởng khác của việc tạo chúng với mã đang có khả năng mở rộng, hoạt hình và tương tác. Trước khi bạn bắt đầu, hãy chắc chắn rằng bạn có những điều sau đây:

Bạn sẽ cần:

Công cụ phát triển và trình duyệt web yêu thích của bạn - Tôi khuyên bạn nên sử dụng Google Chrome vì nó hỗ trợ tất cả các tính năng tôi sử dụng trong hướng dẫn này
Một biên tập viên mã.
Tài sản như hình ảnh hoặc tệp SVG - bạn có thể tải xuống những tệp chúng ta đang sử dụng trong hướng dẫn này đây

Hình ảnh che dấu văn bản chồng chéo

CSS masks example — Mặt nạ CSS cho phép bạn tạo hiệu ứng đặc biệt - giống như cho phép một trang web tiêu đề xuất hiện một cách có chọn lọc và biến mất khi người dùng cuộn lên và xuống trang (tương phản hình ảnh này sang hình trên)

Mặt nạ là tính năng đầu tiên tôi muốn chỉ cho bạn. Nó giúp xây dựng các hình dạng và bố cục sáng tạo hơn trên web bằng cách nói với trình duyệt của bạn có thể nhìn thấy các yếu tố tài sản nào. Mặt nạ có thể được thực hiện theo ba cách khác nhau: Sử dụng hình ảnh raster (có định dạng PNG với các phần trong suốt); Độ dốc CSS; hoặc các yếu tố SVG. Lưu ý rằng không giống như một hình ảnh raster điển hình, SVG có thể được thu nhỏ hoặc biến đổi mà không có sự mất mát đáng kể về chất lượng.

Những gì tôi đặc biệt thích về mặt nạ là khả năng áp dụng các thuộc tính tương tự như đối với lý lịch - Chúng tôi có thể xác định vị trí, kích thước và sự lặp lại của mặt nạ, ví dụ: sử dụng: Lặp lại mặt nạ: Không lặp lại và Kích thước mặt nạ: Che .

Nhờ mặt nạ CSS, chúng ta có thể tạo ra các hiệu ứng phức tạp hơn trên web. Một trong số chúng có thể được tìm thấy trong ví dụ của chúng tôi, nơi các phần của hình ảnh bao gồm một số văn bản; Khi người dùng cuộn lên và xuống trang một số phần của văn bản được hiển thị / ẩn. Điều này mang lại ấn tượng rằng tiêu đề trang nằm phía sau những ngọn núi. Để tạo hiệu ứng này, một số thủ thuật là cần thiết và ứng dụng thông minh của mặt nạ CSS sẽ giúp chúng tôi đạt được điều đó.

Hãy tạo một tiêu đề với hình nền đã chọn và hai tiêu đề bên trong. Một trong số đó sẽ là một trong những chính (cấp độ đầu tiên của tiêu đề).

 & lt; tiêu đề & gt;
        & lt; H3 & GT; Đây là & LT; / H3 & GT;
        & lt; h1 & gt; & lt; span & gt; cuộc phiêu lưu của tôi & lt; / span & gt; & lt; / h1 & gt;
& lt; / tiêu đề & gt;

Văn bản của tiêu đề sẽ được giữ trong & lt; span & gt; nhãn. Đó không phải là một điều phổ biến, nhưng trong trường hợp này, chúng tôi đang áp dụng mặt nạ để hướng đến, không đến thùng chứa.

 Tiêu đề {
    Chiều rộng: 100VW;
    Chiều cao: 80vh;
    Top: 0;
    Trái: Tự động;
    Bối cảnh: URL (../ hình ảnh / phong cảnh.jpg) Trung tâm không lặp lại;
    Kích thước nền: Che;
Không thể
h1 {
    Mặt nạ: URL (../ hình ảnh / Mask.svg # Maskid);
    -webkit-mask: url (../ hình ảnh / phong cảnh-mask.png)
trung tâm hàng đầu không lặp lại;
    Kích thước mặt nạ: bìa;
    -webkit-mask-size: che;
    Chiều rộng: 100VW;
    Chiều cao: 80vh;
    Màu sắc: #fff;
    Kích thước phông chữ: 100px;
    Chức vụ: Người thân;
Không thể
nhịp h1 {
    Vị trí: Đã sửa;
    Hiển thị: Khối nội tuyến;
    Text-Căn chỉnh: Trung tâm;
    Font-Family: 'Libre Baskerville', Serif;
    Chiều rộng: 100VW;
    Top: 80px;
    Phong cách phông chữ: Ý;
Không thể

Cắt hình ảnh bằng CSS Clipping

CSS clipping example — CLipping Paths cho phép bạn cắt hình ảnh thực vật trong ví dụ này

Hãy khám phá một ví dụ khác và tìm hiểu thêm về việc cắt CSS. Nói tóm lại, việc cắt xác định vùng hình ảnh nào sẽ được nhìn thấy. Cắt tương tự như cắt mảnh giấy. Ranh giới của hình dạng được gọi là đường dẫn clip: bất cứ thứ gì bên ngoài đường dẫn sẽ bị ẩn, trong khi bất cứ điều gì bên trong đường dẫn sẽ được nhìn thấy. Với một đường dẫn clip, bạn có thể xóa nền khỏi hình ảnh của mình, thay vì sử dụng các tệp PNG nặng. Đối với điều này, chúng ta cần đã chuẩn bị hình dạng cho việc cắt bỏ.

Mục tiêu trong bài tập này là cắt cây ra khỏi hình ảnh, loại bỏ nền. Chúng ta có thể sao chép mã SVG từ tệp của chúng tôi và dán nó vào tài liệu HTML. Đường dẫn clip phải được đặt trong & lt; defs & gt; & lt; / defs & gt; Tags.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clippath id = "clip-plant" & gt;
     & lt; path d = "m293.2,524.8c0,3,3,0 ... [và nhiều số hơn]" & gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "plant" & gt; & lt; / div & gt;

Sau này chúng ta có thể dễ dàng tham chiếu đường dẫn được xác định trong mã SVG bằng cách thêm một URL. chức năng.

 .Plant {
    Chiều cao: 700px;
    Hình nền: URL (../ hình ảnh / Plant.jpg);
    Kích thước nền: Che;
    Chức vụ: Người thân;
    Lặp lại nền tảng: Không lặp lại;
    -webkit-clip-path: url ("# clip-plant");
    clip-path: url ("# clip-plant");}

Suy nghĩ vượt khuôn khổ

clipping in CSS example — Bạn có thể dùng **hình dạng bên trong** và **hình dạng bên ngoài** để tạo ra tất cả các loại hình dạng

Ai nói rằng các container văn bản luôn cần phải là hình chữ nhật? Nội dung có thể được cắt thành tất cả các loại hình dạng khác nhau bằng cách áp dụng hình dạng bên ngoài và hình dạng bên trong Các thuộc tính cho phép bạn bọc nội dung của mình xung quanh các đường dẫn tùy chỉnh trong CSS.

Vì vậy, làm thế nào nó hoạt động? Đơn giản chỉ cần áp dụng hình dạng bên ngoài đến hình ảnh hoặc container đã cho. Điều quan trọng cần lưu ý là Phao nổi Tài sản và kích thước của phần tử - chiều cao hoặc chiều rộng - phải được xác định nếu không nó không hoạt động. Bạn có thể dùng url () chức năng, cho phép hình dạng bên ngoài thuộc tính để xác định một hình dạng phần tử dựa trên đường dẫn từ tệp SVG.

 .a-Chữ {
    Hình nền: URL ('../ hình ảnh / vàng-bg.jpg');
    Kích thước nền: 1000px;
    -webkit-mask-image: url ('../ hình ảnh / a-letter2.svg');
    -webkit-mask-composite: Source-Out;
    -webkit-Mask-Lặp lại: Không lặp lại;
    -webkit-mask-size: 300px;
    Chiều rộng: 100%;
    Chiều cao: 60vh;
    Chức vụ: Người thân;
    Top: 0px;
    Tệp đính kèm nền: Đã sửa lỗi;
    float: trái;
    Hiển thị: Khối nội tuyến;
    Chiều rộng: 310px;
    Biên độ hình dạng: 23px;
    Hình dạng bên ngoài: URL ('../ hình ảnh / mask.svg');
}

Các hình dạng bên ngoài Tài sản không thay đổi bất cứ điều gì về một yếu tố khác ngoài khu vực phao của nó. Điều này có nghĩa là bất kỳ viền và hình nền nào sẽ không thích ứng với hình dạng được tạo trên phần tử. Đây là lý do tại sao chúng ta cũng cần áp dụng Mặt nạ-hình ảnh. Tài sản - để cắt nền của phần tử để khớp với hình dạng xác định.

Một điều quan trọng cần lưu ý là hình dạng bên ngoài Tính năng chỉ hoạt động với các tệp hỗ trợ CORS. CORS là viết tắt của chia sẻ tài nguyên nguồn gốc chéo.

Trong trường hợp cụ thể này, cách tốt nhất để xem nó là sử dụng localhost, nếu không nó sẽ không hoạt động nếu bạn chỉ cần mở nó trong trình duyệt của mình.

Khi thử nghiệm, xin vui lòng ghi nhớ rằng không phải tất cả các tính năng được đề cập đều được hỗ trợ bởi tất cả các trình duyệt, vì vậy nó đáng để kiểm tra chúng đây . Ví dụ mới nhất không hoạt động trong Firefox, Opera và IE nhưng hy vọng nó sẽ sớm có sẵn cho tất cả các trình duyệt. Và nếu bạn có nhiều tài liệu lưu trữ cho dự án của mình, hãy giữ an toàn cho họ an toàn lưu trữ đám mây .

Đọc thêm:

Bắt đầu với phông chữ biến trong CSS
Hướng dẫn toàn diện về việc sử dụng lưới CSS
Làm thế nào các quy tắc CSS mới để thử ngay bây giờ

Tạo hiệu ứng ghép ảnh trong trình duyệt với CSS

Bạn sẽ cần:

Hình ảnh che dấu văn bản chồng chéo

Cắt hình ảnh bằng CSS Clipping

Suy nghĩ vượt khuôn khổ

Cách - Các bài báo phổ biến nhất

Hướng dẫn Adobe Fresco: Tạo một bức chân dung trong ứng dụng Vẽ tranh

Tạo hiệu ứng Anaglyph cũ

Cách tạo cỏ 3D

Làm thế nào để kết hợp nghệ thuật 3d và truyện tranh trong Zbrush

Hiểu đường ống nhập khẩu tài sản thống nhất

Học hoạt hình cho trẻ em

Tạo cảnh quan tuyệt đẹp ở Houdini

Sức mạnh đáng kinh ngạc của Flexbox

Thể loại