Hiệu ứng Hover bằng CSS3 trong thiết kế Website
Chào các bạn, CSS3 đã và đang được tất cả các nhà thiết kế áp dụng cho dự án của mình. Vậy thì tại sao chúng ta không thử một chút với hiệu ứng Hover.
Hôm nay, iZdesigner mang đến cho các bạn một mẫu thiết kế dành riêng cho menu trong các nhà hàng hay quán ăn, kiểu thiết kế này được làm bằng CSS3 với hiệu ứng hover ảnh.Trong bài viết này iZdesigner chỉ sử dụng thuộc tính box shadow và CSS transition.
Các bạn xem Demo bên dưới và cần chú ý hai điểm dưới đây để thực hiện thành công trong thiết kế web phù hợp với hiện tại.
Để menu có khả năng responsive chúng ta cần chèn đoạn code sau bên trong thẻ head.
Và đoạn Code này cho CSS để hiển thị trên các thiết bị di động:
Tham khảo thêm bài viết: Cách làm cho website hiển thị Responsive
Các bạn xem Demo bên dưới và cần chú ý hai điểm dưới đây để thực hiện thành công trong thiết kế web phù hợp với hiện tại.
Để menu có khả năng responsive chúng ta cần chèn đoạn code sau bên trong thẻ head.
<head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/></head>@media only screen and (max-width: 967px) {.our_menu{ width:660px;margin:0 auto;}}@media only screen and (max-width: 620px) {.our_menu{ width:330px;margin:0 auto;}}Tham khảo thêm bài viết: Cách làm cho website hiển thị Responsive
Trọng Đại - iZdesigner.com
Hiệu ứng Hover bằng CSS3 trong thiết kế Website
Reviewed by Unknown
on
11:05
Rating:
Reviewed by Unknown
on
11:05
Rating:
Không có nhận xét nào: