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

0 1.702

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

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

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).

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

+ 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ệ

Bạn cũng có thể thích
Để lại một trả lời

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