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

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

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

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 Like, Share nếu thấy bài viết thú vị.

Liên hệ