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.
Nội dung chính
Video – Thuộc tính box-shadow và hover nâng cao
Hướng dẫn chi tiết
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).
+ 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ị.
