Hướng dẫn box-shadow hover bootstrap - box-shadow hover bootstrap

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.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
  • Nội dung cần thực hiện: Phân tích yêu cầu và hướng dẫn
  • Các thuộc tính mới
• Các thuộc tính đã hướng dẫn

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

Hướng dẫn chi tiết

"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

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

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

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

Các thuộc tính đã hướng dẫnbox-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).

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

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

+ 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

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

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

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

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

+ 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 qua bài tập báo mới

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

+ 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.Download

+ font-weight : bold độ đậm nhạt, giống như thẻ comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

+ font-family : kiểu chữLike, Share nếu thấy bài viết thú vị.

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