Bài 14: Thuộc tính box-shadow và hover nâng cao

0

Trong bài 14 này, chúng ta sẽ tìm hiểu về thuộc tính box-shadow và hover nâng cao qua bài tập làm trang baomoi.com. Đồng thời ôn lại một số thuộc tính cũ thường dùng.

Video – Thuộc tính box-shadow và hover nâng cao

Hướng dẫn chi tiết

Mẫu demo

Demo thuộc tính box-shadow và hover nâng cao
Demo thuộc tính box-shadow và hover nâng cao

Nội dung cần thực hiện: Phân tích yêu cầu và hướng dẫn

+ Khối tin tức: gồm 1 hình, 1 tiêu đề, 1 khối chữ. Như vậy sẽ gồm 1 thẻ img, 1 thẻ a, 1 thẻ p. Bao xung quanh là thẻ div.

+ Tạo hiệu ứng đổ bóng cho hình. Dùng thuộc tính box-shadow: 2px 2px 7px; (lần lượt là, đổ bóng về bên phải 2px, bên dưới 2 px và gaussian blur  tạo bóng mờ 7px).

+ Tạo hover cho toàn khối khi trỏ chuột vào một trong các phần tử bất tử bằng cách

.class-cha:hover phần tử con (hoặc class-con){

nội dung hiệu ứng hover

}

Kết quả đạt được

Kết quả đạt được Thuộc tính box-shadow và hover nâng cao
Kết quả đạt được Thuộc tính box-shadow và hover nâng cao qua bài tập báo mới

Các thuộc tính mới

+ box-shadow: 2px 2px 7px;

Các thuộc tính đã hướng dẫn

+ transition: 0.4s;

+ position: relative

top: 15px;

lelf: 20px;

+ float: left (right) dồn các khối

+ overflow: hidden

+ display: block

+ display: inline

+ margin và padding

+ border : viền, 1px (độ dày) black (màu) solid (loại nét)

+ text-align : canh lề

+ font-size : kích thước.

+ font-weight : bold độ đậm nhạt, giống như thẻ <b></b>

+ font-family : kiểu chữ

+ font-style: italic : tạo chữ in nghiêng

+ float : left, dồn sang một bên

+ text-decoration: none, underline.

+ line-height: 20px: độ giãn dòng.

+ color: (màu chữ) dùng green, red hay mã màu

+ background-color: (màu nền)black

+ background-image: url(imgage source).

Code mẫu: Download

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.