Hình ảnh hover bóng CSS

Trong số tất cả các hiệu ứng, hover sway là một trong những phân đoạn được sử dụng nhiều nhất trong thiết kế web. Chúng rất cần thiết để tạo ra sự tương tác giữa khách hàng và thiết kế. Vì vậy, không cần phải quảng cáo thêm, bây giờ chúng ta hãy tìm hiểu kỹ hơn về hiệu ứng Di chuột hình ảnh có bóng này bằng cách sử dụng HTML và CSS

Trong trường hợp bạn vẫn đang tìm kiếm một hiệu ứng di chuột tuyệt vời cho trang web của mình, chúng tôi nghĩ về mô hình này thì sao. Được thực hiện bởi Yaroslav Fedyna, thiết kế đi kèm những điểm nhấn ấn tượng

Nói về thiết kế, trên nền sạch và đơn giản, bạn có thể thấy bốn yếu tố trong thiết kế. Nhà thiết kế đã sử dụng điện thoại di động như những yếu tố này. Chúng được đặt ở chế độ xem đẳng cự tạo ra ảnh hưởng 3D. Tại thời điểm khi khách hàng di chuột qua bất kỳ điểm nào trong số đó, nó sẽ di chuyển lên trên một chút như thể nó đang lơ lửng trong không trung. Tương tự như vậy, hiệu ứng đổ bóng lộng lẫy giúp phân biệt chúng với nền dễ dàng hơn

CSS Image Shadow Hover Effects Live Preview

Xem Bút FL-06 Group_project-1 của Yaroslav Fedyna (@yarko9) trên CodePen

Tại thời điểm khi con trỏ được di chuyển ra xa, nó sẽ chuyển sang trạng thái ban đầu trong ví dụ gần. Thiết kế này hoàn toàn phi thường và người ta cũng có thể sử dụng thiết kế này vì nhiều lý do. Phần còn lại của ba yếu tố cũng theo cùng một khái niệm

Bộ chọn di chuột làm nổi bật phần tử cụ thể khi di chuột. Nhà thiết kế cũng đã sử dụng các thuộc tính CSS Transform khác nhau để chuyển đổi các phần tử

Thiết kế chủ yếu xoay quanh nhận thức 3D với mục đích mang lại những trải nghiệm phi thường cho khách truy cập của bạn. Với hiệu ứng di chuột tuyệt vời này, rõ ràng bạn có thể làm kinh ngạc người xem của mình. Bạn có thể sử dụng khái niệm này nếu bạn muốn tiết lộ thông điệp hoặc nội dung quan trọng trước người xem bằng hoạt ảnh hấp dẫn

Ngoài ra, bạn có muốn biết thêm về Hiệu ứng bóng ảnh CSS này không?

Tôi đã viết bài này một thời gian trước. Nội dung vẫn có thể liên quan nhưng thông tin tôi đã liên kết có thể không có sẵn

Thuộc tính bóng hộp CSS3 là 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. Không cần sử dụng Photoshop. Chỉ cần mở biểu định kiểu của bạn trong trình soạn thảo văn bản và bạn sẽ bắt đầu. Chà, nó gần như đơn giản như vậy nhưng không hoàn toàn. Có một báo trước và đó là hỗ trợ trình duyệt. Thuộc tính box-shadow được Firefox và Safari (và Google Chrome) hỗ trợ, sử dụng tiền tố -moz- và -webkit- độc quyền nhưng không được Internet Explorer (hoặc các trình duyệt khác) hỗ trợ. Vì lý do này, tôi nghĩ rằng thuộc tính box-shadow là lý tưởng để thêm các hiệu ứng di chuột vào liên kết hình ảnh trong đó bóng không thực sự cần thiết nhưng nó cung cấp một cải tiến phong cách đẹp (làm phong phú) cho các trình duyệt hiện đại

Khái niệm cơ bản về bóng hộp

Đầu tiên, giới thiệu nhanh và giải thích. Thuộc tính box-shadow nhận một số thuộc tính/giá trị, giống như bất kỳ thuộc tính CSS nào khác và các thuộc tính/giá trị này được chỉ định theo thứ tự như sau.

• Độ lệch ngang của bóng. một giá trị dương cho bóng ở bên phải hộp và giá trị âm cho bóng ở bên trái hộp
• Bù đắp theo chiều dọc. tương tự, giá trị âm có nghĩa là bóng sẽ ở trên cùng, giá trị dương có nghĩa là bóng sẽ ở dưới hộp
• Bán kính mờ. giá trị 0 làm cho bóng sắc nét, số càng cao thì càng mờ
• Màu. không cần phải giải thích cái này ;-)

Để giải thích, đây là quy tắc biểu định kiểu sẽ cung cấp đường viền 1px và bóng đổ màu xám 5px ở bên phải và dưới cùng của một phần tử. Bóng không bị mờ trong trường hợp này

.dropshadowclass {
        border: solid 1px #CCC;
    -moz-box-shadow: 5px 5px 0px #999;
    -webkit-box-shadow: 5px 5px 0px #999;
        box-shadow: 5px 5px 0px #999;
        }

Tôi sử dụng tiền tố -moz- và -webkit- cho Firefox và Safari và thuộc tính box-shadow chính thức cho các trình duyệt hỗ trợ điều này trong tương lai. Đây là giao diện của nó

Đoạn này có dropshadowclass. Đối với các trình duyệt hỗ trợ box-shadow, bạn sẽ thấy bóng đổ xung quanh nó. Bạn sẽ không thấy điều này nếu bạn đang sử dụng Internet Explorer 8 trở xuống, xin lỗi các bạn

Hiệu ứng di chuột liên kết hình ảnh

Một cách thú vị để áp dụng thuộc tính box-shadow là sử dụng nó cho các hiệu ứng di chuột/di chuột qua liên kết hình ảnh. Tất nhiên đó không phải là cách sử dụng duy nhất nhưng tôi nghĩ đó là một cách tốt. Trong trường hợp này, các trình duyệt nâng cao hơn sẽ thấy bóng đổ được áp dụng nhưng các trình duyệt khác sẽ thấy hiệu ứng trang trí ít hơn một chút. Đây là những gì tôi muốn nói. Sử dụng các khai báo này trong biểu định kiểu của tôi, tôi có thể áp dụng bóng đổ cho liên kết hình ảnh

.imagedropshadow {
    padding: 5px;
    border: solid 1px #EFEFEF;
}
a:hover img.imagedropshadow {
    border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
}

Khi di chuột/di chuột, hình ảnh được liên kết hiển thị bóng đổ với Firefox, Safari và Chrome nhưng tôi cũng đã thay đổi màu đường viền khi di chuột. Điều này là để Internet Explorer 6/7/8 (và các trình duyệt khác không hỗ trợ bóng hộp) nhìn thấy sự thay đổi màu đường viền. Do đó, tất cả các trình duyệt đều thấy hiệu ứng di chuột nhưng các trình duyệt nâng cao hơn sẽ có bóng đổ. vâng

Tôi nghĩ rằng đây là một cách sử dụng tốt cho bóng hộp. Tôi muốn xem các cách sử dụng CSS3 box-shadow khác trên các trang web trực tiếp… vì vậy nếu bạn biết bất kỳ điều gì, hãy cho tôi biết

Làm cách nào để sử dụng hover trong CSS trên hình ảnh?

Làm cách nào để thêm bóng vào hình ảnh PNG trong CSS?

Làm cách nào để sử dụng bóng đổ trong CSS?