6 chú thích ảnh thú vị với CSS3
CSS3 thực sự mạnh mẽ. Trước đây, chúng ta cần hình ảnh hoặc một loạt các bộ mã JavaScript để tạo hiệu ứng chuyển tiếp đơn giản. Ngày nay chúng ta có thể làm tương tự chỉ với CSS3.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo chú thích hình ảnh với các hiệu ứng chuyển tiếp khác nhau chỉ bằng cách sử dụng CSS3.
- Bản giới thiệu
- Tải về nguồn
Hỗ trợ trình duyệt
Chú thích này sẽ phụ thuộc nhiều vào các thuộc tính chuyển đổi và chuyển đổi vốn là các tính năng tương đối mới, vì vậy, sẽ là khôn ngoan khi lưu ý hỗ trợ trình duyệt cần thiết để chạy chú thích một cách trơn tru.
Sau đây là các trình duyệt đã hỗ trợ chuyển đổi và chuyển đổi:
- Internet Explorer 10+ (chưa được phát hành)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Bây giờ, hãy bắt đầu hướng dẫn.
Cấu trúc HTML
Chúng tôi có 6 hình ảnh; mỗi hình ảnh với một kiểu chú thích khác nhau.
Chú thích đơn giản
Chú thích đầy đủ
Lorem ipsum dolor ngồi amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Chú thích mờ dần
Lorem ipsum dolor ngồi amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Chú thích slide
Lorem ipsum dolor ngồi amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Đây là chú thích xoay
Lorem ipsum dolor ngồi amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Chú thích kiểu miễn phí
Lorem ipsum dolor ngồi amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
CSS cơ bản
Trước khi tạo kiểu cho bất kỳ phần tử nào, luôn luôn là một khởi đầu tốt để đặt lại tất cả các thuộc tính bằng cách đặt lại CSS này và cung cấp cho chúng các giá trị kiểu mặc định của chúng, vì vậy tất cả các trình duyệt sẽ hiển thị cùng một kết quả (ngoại trừ có thể là IE6).
Các kiểu sẽ được phân tách trong tệp style.css, vì vậy tệp HTML của chúng tôi sẽ trông gọn gàng. Tuy nhiên, đừng quên thêm kiểu liên kết bên trong thẻ head để áp dụng quy tắc tạo kiểu trong tệp.
OK, hãy bắt đầu tạo kiểu cho phần tử, bắt đầu từ thẻ html và id trình bao bọc chính:
html màu nền: #eaeaea; #mainwrapper font: 10pt Arial bình thường, sans-serif; chiều cao: tự động; lề: 80px tự động 0 tự động; văn bản-align: trung tâm; chiều rộng: 660px;
Kiểu hộp hình ảnh
Chúng tôi áp dụng một số phong cách phổ biến trong các hộp chứa hình ảnh. Các hộp sẽ được hiển thị cạnh nhau bằng cách sử dụng float trái. Lưu ý rằng chúng tôi cũng đã thêm tràn: tài sản ẩn; điều này sẽ làm cho tất cả các đối tượng bên trong đi qua div bị ẩn đi.
Chúng tôi cũng khai báo thuộc tính chuyển đổi trên mỗi hình ảnh bên trong hộp, trong trường hợp chúng tôi cần chuyển đổi hình ảnh sau này.
#mainwrapper .box Border: 5px solid #fff; con trỏ: con trỏ; chiều cao: 182px; phao: trái; lề: 5px; vị trí: tương đối; tràn: ẩn; chiều rộng: 200px; -webkit-box-bóng: 1px 1px 1px 1px #ccc; -moz-box-bóng: 1px 1px 1px 1px #ccc; hộp bóng: 1px 1px 1px 1px #ccc; #mainwrapper .box img vị trí: tuyệt đối; trái: 0; -webkit-quá trình chuyển đổi: tất cả 300ms dễ dàng; -moz-quá trình chuyển đổi: tất cả 300ms dễ dàng; -o-trans: tất cả 300ms dễ dàng; -ms-quá trình chuyển đổi: tất cả 300ms dễ dàng; chuyển tiếp: tất cả 300ms dễ dàng ra;
Chú thích Phong cách chung
Chú thích sẽ có một số kiểu phổ biến và thuộc tính chuyển tiếp. Thay vì sử dụng thuộc tính độ mờ, chúng tôi sử dụng chế độ màu RGBA với 0,8 cho kênh alpha để làm cho chú thích trông hơi trong suốt mà không ảnh hưởng đến văn bản bên trong.
#mainwrapper .box .caption màu nền: rgba (0,0,0,0.8); vị trí: tuyệt đối; màu: #fff; chỉ số z: 100; -webkit-quá trình chuyển đổi: tất cả 300ms dễ dàng; -moz-quá trình chuyển đổi: tất cả 300ms dễ dàng; -o-trans: tất cả 300ms dễ dàng; -ms-quá trình chuyển đổi: tất cả 300ms dễ dàng; chuyển tiếp: tất cả 300ms dễ dàng ra; trái: 0;
Chú thích 1
Chú thích đầu tiên sẽ có hiệu ứng chuyển tiếp đơn giản thường được sử dụng cho chú thích. Chú thích sẽ xuất hiện từ phía dưới khi chúng ta di chuột qua hình ảnh. Để giải quyết nó, chú thích sẽ có chiều cao cố định là 30px và chúng tôi áp dụng vị trí dưới cùng của nó -30px để ẩn nó bên dưới hình ảnh.
#mainwrapper .box .simple-caption height: 30px; chiều rộng: 200px; hiển thị: khối; dưới cùng: -30px; chiều cao dòng: 25pt; văn bản-align: trung tâm;
Chú thích 2
Loại thứ hai có chiều rộng và chiều cao đầy đủ của kích thước hình ảnh / hộp (200x200px) và quá trình chuyển đổi sẽ giống như hiệu ứng cửa trượt chỉ có điều nó sẽ trượt từ trên xuống dưới.
#mainwrapper .box .full-caption width: 170px; chiều cao: 170px; đầu trang: -200px; văn bản-align: trái; phần đệm: 15px;
Chú thích 3
Chú thích thứ ba sẽ có hiệu ứng mờ dần. Vì vậy, chúng tôi đã thêm độ mờ: 0 cho trạng thái ban đầu của nó.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; chiều rộng: 170px; chiều cao: 170px; văn bản-align: trái; phần đệm: 15px;
Chú thích 4
Chú thích thứ tư sẽ trượt từ trái sang phải, vì vậy chúng tôi đã cố định 200px sang trái (trái: 200px) làm vị trí ban đầu của nó.
** Chú thích 4: Trượt ** / #mainwrapper .box .slide-caption width: 170px; chiều cao: 170px; văn bản-align: trái; phần đệm: 15px; bên trái: 200px;
Chú thích 5
Chú thích thứ năm sẽ có hiệu ứng xoay vòng. Nó không chỉ là chú thích sẽ xoay, mà còn là hình ảnh. Nó giống như việc thay đổi vị trí bằng cách xoay.
Vì vậy, chúng tôi thêm thuộc tính biến đổi với góc xoay -180, trừ khi bạn thích xoay màn hình để đọc chú thích.
#mainwrapper # hộp-5.box .rotate-chú thích width: 170px; chiều cao: 170px; văn bản-align: trái; phần đệm: 15px; đầu trang: 200px; -moz-biến đổi: xoay (-180deg); -o-Transform: xoay (-180deg); -webkit-Transform: xoay (-180deg); biến đổi: xoay (-180deg); #mainwrapper .box .rotate width: 200px; chiều cao: 400px; -webkit-quá trình chuyển đổi: tất cả 300ms dễ dàng; -moz-quá trình chuyển đổi: tất cả 300ms dễ dàng; -o-trans: tất cả 300ms dễ dàng; -ms-quá trình chuyển đổi: tất cả 300ms dễ dàng; chuyển tiếp: tất cả 300ms dễ dàng ra;
Chú thích 6
Chú thích cuối cùng sẽ có biến đổi tỷ lệ. Tuy nhiên, trong các chú thích trước đó, văn bản bên trong nó sẽ thực sự hiển thị cùng với sự chuyển đổi .caption. Trong phần này, chúng tôi sẽ làm cho nó một chút khác biệt.
Văn bản sẽ xuất hiện sau khi quá trình chuyển đổi được thực hiện. Vì vậy, chúng tôi thêm độ trễ chuyển tiếp trên văn bản, trong trường hợp này là thẻ h3 và p.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p vị trí: tương đối; trái: -200px; chiều rộng: 170px; -webkit-quá trình chuyển đổi: tất cả 300ms dễ dàng; -moz-quá trình chuyển đổi: tất cả 300ms dễ dàng; -o-trans: tất cả 300ms dễ dàng; -ms-quá trình chuyển đổi: tất cả 300ms dễ dàng; chuyển tiếp: tất cả 300ms dễ dàng ra; #mainwrapper .box .scale-caption h3 -webkit-quá trình chuyển đổi-trì hoãn: 300ms; -moz-quá độ-trễ: 300ms; -o-quá độ-trễ: 300ms; -ms-quá độ-trễ: 300ms; độ trễ chuyển tiếp: 300ms; #mainwrapper .box .scale-caption p -webkit-quá trình-trì hoãn: 500ms; -moz-quá độ-trễ: 500ms; -o-quá độ-trễ: 500ms; -ms-chuyển tiếp-trễ: 500ms; độ trễ chuyển tiếp: 500ms;
Hãy làm cho họ di chuyển
Trong phần sau, chúng tôi sẽ xác định hành vi của chú thích khi chúng tôi di chuột qua các hình ảnh hoặc hộp.
Chú thích Hành vi 1: Hiển thị.
Đối với chú thích đầu tiên, chúng tôi muốn nó hiển thị (từ dưới cùng) khi chúng tôi di chuột qua hộp. Để giải quyết động thái này, chúng tôi sử dụng thuộc tính biến đổi và mã CSS bên dưới cho biết chú thích để di chuyển 100% trọng lượng của nó lên trên cùng.
#mainwrapper .box: hover .simple-caption -moz-Transform: translateY (-100%); -o-biến đổi: dịchY (-100%); -webkit-Transform: translateY (-100%); biến đổi: dịchY (-100%);
Nếu bạn không nhận được điểm có giá trị âm cho dịchY, bạn có thể muốn đọc hướng dẫn này trước để hiểu rõ hơn.
Chú thích Hành vi 2: Di chuyển nó xuống.
Ngược lại, chú thích thứ hai sẽ di chuyển xuống từ trên cùng. Vì vậy, chúng tôi sẽ có giá trị tích cực cho dịchY.
#mainwrapper .box: hover .full-caption -moz-Transform: translateY (100%); -o-biến đổi: dịchY (100%); -webkit-Transform: translateY (100%); biến đổi: dịchY (100%);
Chú thích Hành vi 3: Làm mờ dần trong.
Chú thích thứ ba thực sự là dễ nhất. Khi hộp được di chuột, độ mờ của chú thích sẽ chuyển sang 1 làm cho nó hiển thị và vì chúng tôi đã thêm thuộc tính chuyển đổi trong lớp chú thích, quá trình chuyển đổi sẽ diễn ra suôn sẻ.
#mainwrapper .box: hover .fade-caption opacity: 1;
Chú thích Hành vi 4: Trượt nó sang trái.
Như chúng tôi đã đề cập trước đây, chú thích này sẽ trượt ở bên trái, tuy nhiên, hình ảnh cũng sẽ trượt ra bên phải. Vì vậy, ở đây chúng tôi có 2 khai báo CSS.
Mã CSS bên dưới chỉ ra rằng khi chúng ta di chuột qua hộp, chú thích sẽ trượt 100% chiều rộng của nó sang bên trái. Lưu ý rằng bây giờ chúng tôi sử dụng translateX, vì chúng tôi muốn slide di chuyển theo chiều ngang từ phải sang trái.
#mainwrapper .box: hover .slide-caption nền-màu: rgba (0,0,0,1)! quan trọng; -moz-biến đổi: translateX (-100%); -o-biến đổi: translateX (-100%); -webkit-Transform: translateX (-100%); độ mờ đục: 1; biến đổi: translateX (-100%);
Khi chúng ta di chuột qua hộp, hình ảnh sẽ trượt ra bên trái.
#mainwrapper .box: hover img # image-4 -moz-Transform: translateX (-100%); -o-biến đổi: translateX (-100%); -webkit-Transform: translateX (-100%); biến đổi: translateX (-100%);
Chú thích Hành vi 5: Xoay nó.
Chú thích này khác với phần còn lại, vì nó sẽ không di chuyển từ phải hoặc trái, mà sẽ xoay. Khi hộp được di chuột, div chứa hình ảnh và chú thích sẽ xoay -180 theo chiều ngược chiều kim đồng hồ, ẩn hình ảnh và hiển thị chú thích.
/ ** Xoay chú thích: Hành vi di chuột ** / #mainwrapper .box: hover .rotate màu nền: rgba (0,0,0,1)! Quan trọng; -moz-biến đổi: xoay (-180deg); -o-Transform: xoay (-180deg); -webkit-Transform: xoay (-180deg); biến đổi: xoay (-180deg);
Chú thích Hành vi 6: Mở rộng quy mô.
Chú thích này sẽ kết hợp một số hiệu ứng biến đổi. Khi hộp được di chuột, hình ảnh sẽ tăng tỷ lệ 140% (1,4) so với kích thước ban đầu của nó.
#mainwrapper .box: hover # image-6 -moz-Transform: scale (1.4); -o-Transform: scale (1.4); -webkit-Transform: scale (1.4); biến đổi: tỷ lệ (1,4);
Và nếu bạn thấy CSS ở trên Chú thích 6 tiêu đề, chúng tôi đã ẩn văn bản bên trái 200px. Mã CSS dưới đây cho biết văn bản di chuyển đến vị trí ban đầu của chúng. Vì vậy, văn bản sẽ trượt vào từ trái sang phải đồng thời.
#mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-Transform: translateX (200px); -o-Transform: translateX (200px); -webkit-Transform: translateX (200px); biến đổi: translateX (200px);
- Bản giới thiệu
- Tải về nguồn
Tóm lược
Mặc dù các tính năng CSS này rất tuyệt, nhưng nó chưa được áp dụng rộng rãi, do những hạn chế hỗ trợ trình duyệt mà chúng tôi đã đề cập trước đó. Tuy nhiên, hãy tiếp tục thử nghiệm các tính năng mới này, vì đây là cách chúng tôi sẽ định hình một trang web trong tương lai.
Tín dụng
Hình thu nhỏ của hình ảnh trong hướng dẫn được lấy từ các trang web sau (ảnh chụp màn hình):
- Một cuốn sách ngoài
- Archiduchlie
- Vlog
- Hồng Kông
- Trang trại chào mừng
- Đánh dấu Ecko
