Mẫu html5 và css3. Mẫu HTML5. Trắng - một mẫu một trang tuyệt vời

Rất thường xuyên trên các trang web, bạn có thể gặp các thay đổi hoặc nút khi di chuột. Một pseudo-class:hover đặc biệt trong CSS cho phép bạn thực hiện tác vụ. Hôm nay, chúng ta sẽ xem xét một số kỹ thuật cho phép chúng ta thực hiện thủ thuật này và dưới đây chúng tôi sẽ công bố danh sách những kỹ thuật thú vị nhất trong số đó (với mô tả/giải thích ngắn gọn). Chúng tôi sẽ chia tất cả các lựa chọn thành:

Những nhóm này rất độc đoán, bởi vì nhiều ví dụ trùng lặp và mang tính phổ quát, nghĩa là chúng có thể được tìm thấy khi thiết kế các đối tượng khác nhau.

Hiệu ứng di chuột trong CSS style được thêm vào bên phải phần tử như sau:

a: di chuột ( màu : đỏ ; )

a:di chuột (màu: đỏ; )

Thông thường, cơ chế này được sử dụng riêng cho các liên kết nhằm thay đổi màu sắc của chúng hoặc thêm/xóa phần gạch chân. Tuy nhiên, nó cũng có thể được chỉ định cho các khối, nút, văn bản khác hoặc được sử dụng khi tạo.

nút : di chuột ( nền : rgba (0 , 0 , 0 , 0 ) ; màu : đỏ ; .my-picture : di chuột ( độ mờ : 0,5 ; bộ lọc : alpha(opacity= 50 ) ; )

nút:hover ( nền: rgba(0,0,0,0); màu: đỏ; ) .my-picture:hover ( opacity: 0.5; filter: alpha(opacity=50); )

Các trình duyệt hiện đại nhận biết chính xác hiệu ứng di chuột CSS khi di chuột, mặc dù trong các phiên bản IE 6 cũ hơn trở xuống, hiệu ứng này chỉ hoạt động đối với các liên kết. Ngoài ra, một số nguồn tin cho rằng điều này phải được chỉ định trong mã.

Nhân tiện, khi cài đặt kiểu liên kết, bộ chọn cũng có thể được sử dụng bổ sung: liên kết - cho các trang chưa được truy cập, :visited - đối với những trang bạn đã đến + :active xác định địa chỉ hiện đang hoạt động. Điều quan trọng là đặt hiệu ứng di chuột trong CSS sau :link và :visited nếu chúng tồn tại.

Hãy chuyển từ lý thuyết sang thực hành. Dưới đây là danh sách các tài liệu và đoạn trích hữu ích - hãy nhấp vào các liên kết để xem nguồn.

Hiệu ứng di chuột cho các nút và liên kết

Như chúng tôi đã nói ở trên, đây là danh mục đối tượng phổ biến nhất trên trang web nơi tìm thấy kỹ thuật này. Dưới đây là một số lựa chọn về chủ đề này.

Ví dụ đơn giản về nút

Nút Sullivan

Mẹo nhỏ là khi bạn di chuột qua các nút khác nhau, ngoài việc thay đổi màu nền, một hình ảnh động nhỏ với các biểu tượng (mỗi biểu tượng có biểu tượng riêng) cũng được khởi chạy.

Biểu tượng CSS trên Hover

Một lựa chọn gồm 5 tùy chọn đơn giản để thực hiện nhiệm vụ. Trong mọi trường hợp, các biểu tượng bổ sung sẽ được sử dụng xuất hiện ở bên phải/trái của văn bản hoặc thay thế nó.

Hiệu ứng di chuột qua nút

So với ví dụ trước, 12 hàm kích hoạt này trông thú vị hơn nhiều: cả về mặt hình ảnh lẫn mã. Không phải không có JS.

Di chuột điều hướng

Một số tính năng cho phép bạn làm điều gì đó khác thường hơn với thuộc tính trang trí văn bản cơ bản. Nền của nút cũng có nhiều hiệu ứng hình ảnh khác nhau.

Thông tin về di chuột

Chức năng chú giải công cụ hiện được hỗ trợ trong tất cả các trình duyệt nhưng bạn có thể tùy chỉnh nó cho phù hợp với nhu cầu của mình. Trong ví dụ hiện tại, lớp giả được kích hoạt cho thẻ dfn, trông rất phong cách. Code khá nhỏ gọn HTML + CSS.

Nút năng lượng

Một trong những biến thể nguyên bản nhất của hiệu ứng di chuột theo khối - khi di chuột, nó giống như đổ đầy chất lỏng vào khối. Việc triển khai sử dụng CSS, HTML và SVG. Đối với một số chủ đề trang web nhất định, đoạn trích này chắc chắn sẽ là một ơn trời.

Hiệu ứng di chuột cho hình ảnh

15 kỹ thuật cơ bản

Mặc dù bài viết đã được xuất bản khá lâu nhưng các phương pháp vẫn hoạt động chính xác. Ở đây, có lẽ, tất cả các phép biến đổi tiêu chuẩn có thể có cho đồ họa đều được thu thập: một số loại thu phóng, xoay, làm mờ, đen trắng, độ trong suốt, bộ lọc, độ sáng, v.v.

Hình ảnh hiệu ứng di chuột đẹp mắt

Tuyển chọn 30 hành động thú vị và mượt mà khi di chuột qua một bức ảnh. Do các thao tác trực quan đơn giản dưới dạng thu phóng và thêm đường, một ấn tượng phức tạp tốt sẽ được tạo ra. Ở một số nơi, tiêu đề được phóng to và mô tả ngắn gọn hơn. Lựa chọn tuyệt vời cho một danh mục đầu tư.

Hoạt hình di chuột của Barberpole

Hoạt hình thoạt nhìn không phức tạp, nhưng cuối cùng nó trông rất hay và khác thường.

Hiệu ứng di chuột CSS với tính năng phát hiện hướng

Bạn có thể tìm thấy tuyển tập các đoạn trích và mã tuyệt vời về chủ đề này trong bài viết từ css-tricks.com. Tất cả những ví dụ này được thống nhất bởi thực tế là vị trí và hướng chuyển động của con trỏ được xác định trong quá trình hoạt động. Ngược lại, điều này cho phép bạn tạo các phản ứng khá độc đáo khi di chuột qua các thành phần trang:

Trong nhiều giải pháp phức tạp, Javascript và jQuery cho hiệu ứng di chuột có thể đa dạng hóa và cải thiện kết quả một cách đáng kể.

Hướng Aware Hover Goodness

Ô nhận biết hướng sử dụng CSS thuần đường dẫn clip

Tìm phần còn lại của các thủ thuật trong bài viết gốc.

Hoạt hình

Sự phát triển này bao gồm hơn 100 cách đơn giản để "tạo hoạt ảnh" cho hình ảnh hoặc vật thể khi di chuột. Sử dụng các chức năng này, bạn có thể triển khai các giao diện khác nhau của nút, tiêu đề, văn bản, biểu tượng xã hội, v.v. Có các tùy chọn thay đổi cách hiển thị hình ảnh và lớp phủ nền mờ.

Liên kết chứa 7 hiệu ứng tiêu đề di chuột CSS3 - khi di chuột qua hình ảnh, người dùng sẽ thấy khối thông tin có tiêu đề, mô tả ngắn gọn và liên kết để điều hướng. Điều này không có nghĩa là các ví dụ này rất độc đáo nhưng chúng chắc chắn sẽ giúp đa dạng hóa dự án nội dung tĩnh.

Thư viện di chuột CSS

Di chuột.css

Dự án có tên đơn giản là Hover.css, chứa một tập hợp các hiệu ứng CSS3 cho các liên kết, nút, khối, v.v. Bạn có thể sử dụng mã được tạo sẵn và/hoặc thêm các sửa đổi của riêng bạn vào đó. Có rất nhiều thứ thú vị ở đây: chuyển đổi 2D/3D, làm việc với nền và khung, bóng, biểu tượng. Giải pháp có sẵn ở các định dạng CSS, LESS và Sass.

Imagehover.css

Một thư viện khác đặt hiệu ứng di chuột cho hình ảnh - trong phiên bản miễn phí, bạn sẽ tìm thấy 44 tùy chọn chuyển đổi (bộ cao cấp chứa nhiều hơn 5 lần). LESS và SCSS cũng được hỗ trợ ở đây, file này chỉ nặng 19kb. Trang web có một trang trình bày tất cả các ví dụ hoạt động. Có nhiều tính năng độc đáo chưa được thấy ở trên.

Dự án bao gồm hơn 30 kỹ thuật khác nhau cho các vật thể hình tròn và hình vuông. Tất cả chúng đều khá nguyên bản, thực tế không có hành động “một phần tử” đơn giản nào dưới dạng phóng to/thu nhỏ thông thường. Tác vụ được triển khai bằng cách sử dụng CSS3 + HTML thuần túy (bao gồm cả tệp Scss). Khả năng tương thích tuyệt vời với Bootstrap 3, có sẵn tài liệu.

Tổng cộng. Chúng tôi hy vọng những hiệu ứng di chuột css này khi di chuột qua hình ảnh, khối, liên kết và các thành phần trang khác đã giúp bạn hiểu chủ đề này. Theo ý kiến ​​​​của bạn, bạn có thể triển khai các giải pháp thành công nhất trên trang web của mình - có thể là kết nối một thư viện chính thức hoặc chỉ đơn giản là tích hợp một phiên bản nhỏ của mã.

Nếu bạn biết bất kỳ tính năng và đoạn trích thú vị nào khác, hãy gửi URL cho chúng trong phần nhận xét. Và chúng tôi sẽ bổ sung thêm vào bài viết trong thời gian tới.

Trước khi xem xét các nút, chúng ta hãy xem các cài đặt chung cho tất cả chúng.

HTML

Các nút sẽ sử dụng mã HTML rất đơn giản:

Đặt mua

CSS

Ngoài ra, tất cả các nút sẽ có cài đặt chung cho văn bản chú thích và bỏ chọn liên kết:

ButtonText ( phông chữ: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; text-trang trí: none; )

Thông thường, người dùng mong đợi một hiệu ứng khá nhẹ nhàng khi di chuột qua một liên kết hoặc nút. Và trong trường hợp của chúng tôi, nút thay đổi kích thước - nó tăng lên, hiển thị một thông báo bổ sung.

Mã CSS cơ bản

Để bắt đầu, chúng ta chỉ cần tạo hình dạng và màu sắc cho nút. Xác định chiều cao 28px và chiều rộng 115px, thêm lề và phần đệm, đồng thời tạo cho nút một đường viền nhẹ.

#button1 ( nền: #6292c2; đường viền: 2px Solid #eee; chiều cao: 28px; chiều rộng: 115px; lề: 50px 0 0 50px; phần đệm: 0 0 0 7px; tràn: ẩn; hiển thị: khối; )

Hiệu ứng CSS3

Một số người thích thú khi một nút bấm đơn giản lại đi kèm với khá nhiều mã CSS. Phần này cung cấp các kiểu CSS3 bổ sung cho nút của chúng tôi. Bạn có thể làm mà không cần chúng, nhưng chúng mang lại cho nút một cái nhìn hiện đại hơn.

Làm tròn các góc của khung và thêm độ dốc. Điều này sử dụng một thủ thuật nhỏ với độ dốc tối tương tác với bất kỳ màu nền nào.

/*Các góc được làm tròn*/ -webkit-border-radius: 15px; -moz-biên giới-bán kính: 15px; bán kính đường viền: 15px; /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -moz-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -o-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -ms-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: gradient tuyến tính(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Hoạt ảnh CSS

Bây giờ hãy thiết lập quá trình chuyển đổi CSS. Hoạt ảnh sẽ được sử dụng cho bất kỳ thay đổi thuộc tính nào và sẽ kéo dài nửa giây.

Di chuột lên trên

Tất cả những gì còn lại là thêm kiểu để mở rộng nút khi bạn di chuột qua nó. Nút phải rộng 230px để hiển thị toàn bộ thông báo.

#button1:di chuột ( chiều rộng: 230px; )

Thay đổi tông màu đơn giản

Một hiệu ứng CSS rất đơn giản và phổ biến cho một nút. Khi bạn di con trỏ chuột, tông màu nền sẽ thay đổi mượt mà.

Mã CSS cơ bản

Mã CSS rất giống với ví dụ trước. Màu nền khác được sử dụng và hình dạng có chút thay đổi. Nó cũng căn giữa văn bản và đặt chiều cao dòng cho nút sao cho việc căn giữa theo chiều dọc xảy ra.

#button2 ( nền: #d11717; đường viền: 2px Solid #eee; chiều cao: 38px; chiều rộng: 125px; lề: 50px 0 0 50px; tràn: ẩn; hiển thị: khối; căn chỉnh văn bản: giữa; chiều cao dòng: 38px; )

Hiệu ứng CSS3

Đặt độ tròn của các góc, độ dốc cho nền và bóng bổ sung. Sử dụng rgba chúng ta làm cho bóng có màu đen và trong suốt.

/*Các góc được làm tròn*/ -webkit-border-radius: 10px; -moz-biên giới-bán kính: 10px; bán kính đường viền: 10px; /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -moz-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -o-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -ms-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: gradient tuyến tính(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); bóng hộp: 0px 3px 1px rgba(0, 0, 0, 0.2);

Hoạt ảnh CSS

Hoạt ảnh thực tế không khác gì ví dụ trước.

/*Transition*/ -webkit-transition: Tất cả đều dễ dàng 0,5 giây; -moz-transition: Tất cả 0,5 giây đều dễ dàng; -o-transition: Tất cả 0,5 giây đều dễ dàng; -ms-transition: Tất cả đều dễ dàng 0,5 giây; chuyển tiếp: Tất cả đều dễ dàng 0,5 giây;

Di chuột lên trên

Khi di con trỏ chuột, màu nền khác sẽ được đặt. Hãy thử chọn tùy chọn màu nhạt hơn trong Photoshop để có hiệu ứng tuyệt vời.

#button2:hover ( màu nền: #ff3434; )

Hiệu ứng này có thể khá ấn tượng tùy thuộc vào việc lựa chọn hình nền. Bản demo sử dụng nền không có đặc điểm và hiệu ứng trông không có gì đặc biệt. Hãy thử sử dụng một hình ảnh khác và hiệu ứng có thể rất ấn tượng.

Mã CSS cơ bản

Phần chính của mã giống như các ví dụ trước. Xin lưu ý rằng chúng tôi đang sử dụng hình nền. Vị trí nền ban đầu được đặt thành "0 0". Khi bạn di con trỏ, vị trí sẽ dịch chuyển theo chiều dọc.

#button3 ( nền: #d11717 url("bkg-1.jpg"); vị trí nền: 0 0; bóng văn bản: 0px 2px 0px rgba(0, 0, 0, 0.3); cỡ chữ: 22px; chiều cao : 58px; chiều rộng: 155px; lề: 50px 0 0 50px; tràn: ẩn; hiển thị: khối; căn chỉnh văn bản: giữa; chiều cao dòng: 58px; )

Hiệu ứng CSS3

Không có gì đặc biệt trong ví dụ này - các góc và bóng được làm tròn.

/*Các góc được làm tròn*/ -webkit-border-radius: 5px; -moz-biên giới-bán kính: 5px; bán kính đường viền: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); bóng hộp: 0px 3px 1px rgba(0, 0, 0, 0.2);

Hoạt ảnh CSS

Hoạt ảnh trong trường hợp này kéo dài lâu hơn để tạo hiệu ứng mượt mà và thú vị.

/*Transition*/ -webkit-transition: Tất cả đều dễ dàng trong 0,8 giây; -moz-transition: Tất cả 0,8 giây đều dễ dàng; -o-transition: Tất cả 0,8 giây đều dễ dàng; -ms-transition: Tất cả 0,8 giây đều dễ dàng; chuyển tiếp: Tất cả đều dễ dàng 0,8 giây;

Di chuột lên trên

Bây giờ là lúc di chuyển hình nền. Vị trí bắt đầu là "0 0". Đặt tham số thứ hai thành 150px. Để dịch chuyển theo chiều ngang, bạn cần thay đổi tham số đầu tiên.

#button3:hover ( vị trí nền: 0px 150px; )

Mô phỏng nhấn nút 3D

Ví dụ cuối cùng trong bài học của chúng ta là về phương pháp 3D phổ biến để mô phỏng thao tác nhấn nút khi di con trỏ chuột lên trên nó. Hoạt ảnh trong trường hợp này đơn giản đến mức nó thậm chí không yêu cầu chuyển đổi CSS. Nhưng kết quả cuối cùng khá ấn tượng.

Mã CSS cơ bản

Mã CSS cho nút của chúng tôi.

#button4 ( nền: #5c5c5c; bóng văn bản: 0px 2px 0px rgba(0, 0, 0, 0.3); cỡ chữ: 22px; chiều cao: 58px; chiều rộng: 155px; lề: 50px 0 0 50px; tràn: ẩn ; hiển thị: khối; căn chỉnh văn bản: giữa; chiều cao dòng: 58px; )

Hiệu ứng CSS3

Trong trường hợp này, CSS3 không còn là một lựa chọn tốt nữa. Để đạt được hiệu ứng, cần có bóng và độ dốc. Bóng sắc nét tạo ra hình dáng của một nút 3D.

/*Các góc được làm tròn*/ -webkit-border-radius: 5px; -moz-biên giới-bán kính: 5px; bán kính đường viền: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); bóng hộp: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -moz-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -o-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -ms-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: gradient tuyến tính(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Di chuột lên trên

Trong trường hợp này chúng ta có phần di chuột lớn nhất. Độ dài của bóng được giảm xuống và các lề được sử dụng để tạo ra sự hòa trộn giữa vùng tối. Tất cả cùng nhau tạo ra ảo giác như đang nhấn một nút. Lật gradient sẽ tăng cường hiệu ứng.

#button4:hover ( lề-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); bóng hộp: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); hình nền: -moz-tuyến tính-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); hình nền: -o-tuyến tính-gradient(dưới cùng, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); hình nền: -ms-tuyến tính-gradient( dưới cùng, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); hình nền: gradient-tuyến tính(dưới cùng, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )

Chúc các bạn một ngày tốt lành! Đây là một bài viết khác được viết theo yêu cầu của một trong những độc giả blog của tôi. Hôm nay chúng tôi đang triển khai khả năng hiển thị hình ảnh khi bạn di chuột qua một liên kết. Tại sao điều này có thể cần thiết? Mọi thứ đều rất đơn giản, bằng cách này bạn có thể tiết kiệm dung lượng trên trang web, đồng thời khôi phục các liên kết.

Như bạn đã biết, hãy thực hiện hình ảnh bật lên bạn có thể sử dụng jQuery, CSS và HTML. Trong bài viết hôm nay, tôi sẽ đăng mã hoàn chỉnh cho hiệu ứng này và cũng đưa ra một số ví dụ trực quan. Mỗi tập lệnh khá đơn giản, được tạo bằng CSS+HTML. Tôi sẽ không làm bạn chán nữa và sẽ cung cấp cho bạn các giải pháp làm sẵn!

Hình ảnh bật lên khi di chuột

a.site-ssilka:hover+div

Hãy để tôi giải thích ngắn gọn những điểm chính. Để hiển thị hình ảnh pop-up, bạn cần tham khảo thẻ với thuộc tính src và sau dấu ngoặc kép, hãy viết đường dẫn đến hình ảnh, sau khi tải nó lên thư mục gốc của trang web trước tiên.

Nhãn <а> với tham số bắt buộc href chịu trách nhiệm tạo và hiển thị liên kết (trong ví dụ của tôi đây là văn bản).

Nếu các thành phần của trang web đã di chuyển, bạn có thể đặt chiều rộng và chiều cao của hình ảnh bằng thuộc tính chiều rộng Và chiều cao. Các thông số được chỉ định bằng pixel.

Thuộc tính alt cho phép công cụ tìm kiếm nhận biết chính xác hơn những gì được mô tả trong hình ảnh.

Để rõ ràng hơn, tôi đã đánh dấu phần mã mà bạn có thể muốn thay đổi nhất.

Văn bản bật lên khi di chuột qua một liên kết

a.site-ssilka:hover+div

Hãy dũng cảm lên!!! Hãy trỏ con trỏ của bạn vào tôi!

Như bạn có thể thấy trong ví dụ, khi bạn di chuột qua văn bản, một chú giải công cụ văn bản sẽ bật lên.

Hình ảnh biến mất khi di chuột qua một liên kết

a.site-ssilka:hover+div

Hãy dũng cảm lên!!! Hãy trỏ con trỏ của bạn vào tôi!

Để thêm hiệu ứng cụ thể ở trên, chỉ cần sao chép mã phù hợp với bạn và dán vào trình soạn thảo văn bản. Do đó, liên kết có hình ảnh bật lên/biến mất có thể được thêm vào bất kỳ đâu trong bài viết.

Tâm điểm! Mỗi tập lệnh được trình bày không gây tổn hại đến tính hợp lệ của trang web.

Tôi thấy việc thực hiện tác vụ này không kém phần thuận tiện bằng cách thêm một tập lệnh đặc biệt vào tệp kiểu của mẫu của bạn, thường được gọi là style.css.

CSS hình ảnh bật lên

vị trí: tương đối;

Hình thu nhỏ:di chuột(

Khoảng thu nhỏ( /*CSS cho hình ảnh phóng to*/

vị trí: tuyệt đối;

màu nền: #3d3d3d;

đường viền: 1px màu trắng;

khả năng hiển thị: ẩn;

trang trí văn bản: không có;

bán kính đường viền: 4px 4px 4px 4px;

Bán kính biên giới Moz: 4px 4px 4px 4px;

Bán kính đường viền Webkit: 4px 4px 4px 4px;

Khoảng thu nhỏ img( /*CSS cho hình ảnh phóng to*/

chiều rộng đường viền: 0;

Hình thu nhỏ:khoảng di chuột( /*CSS để phóng to hình ảnh khi di chuột*/

khả năng hiển thị: có thể nhìn thấy;

trái: 60px; /*vị trí nơi hình ảnh được phóng to sẽ lệch theo chiều ngang */

Để hiển thị cửa sổ bật lên khi bạn di chuột qua một liên kết, hãy chèn liên kết sau vào văn bản:

Ngoài ra, bạn có thể chèn liên kết có hình ảnh bật lên vào một phần cụ thể trong mẫu của mình. Để thực hiện việc này, hãy thêm đoạn mã sau vào tệp index.php. Đây là tệp xác định sự sắp xếp trực quan của các thành phần trang web.