CSS cho phần thông báo | Header notification CSS - Phần 2

[@minhnguyenhainhat234]

mn ở đây cho mình hỏi với, ở 18:17 mình dùng .header__navbar-icon:hover thì lúc rê chuột vô chữ thông báo, header__notify lại không hiện ra.

[@Adam_Duy]

mình càng thêm text vào thì li nó càng nở rộng ra, làm cho chiều cao giữa các li không đồng đều, vậy mình giải quyết thế nào vậy ạ?

[@manatngo217]

ngành lập trình này gặp khó không biết làm thì không ai chỉ và sách vở cũng không chỉ thì phải làm sao thầy?

[@NguyenThinh-yn2yv]

Cho mình hỏi chút cho content rỗng có tác dụng j vậy

[@bim1815]

thì bạn thử viết content không rỗng là biết thôi

[@haiangnguyen2976]

anh ơi sao cái phần thông báo của em khi hover vào nó không hover chung cả cái chuông icon nhỉ nhưng mà hover vào chuông thì nó sẽ hover cả chữ thông báo @@

Anh oi cho em hoi voi a. Moi lam em refresh lai trang thi em thay cac tp text cua em bi dật dật nguyên nhân là do đâu ạ? em cảm ơn.

[@Vu205-r3r]

tips cho anh em thay vì lam cái keyframe vì chỉ có mỗi phần thông báo có hiệu ứng vậy .header__notify { opacity: 0; position: absolute; top: 100%; right: 0; border: 1px solid #D3D3D3; width: 400px; background-color: var(--white-colour); cursor: default; transform: scale(0); transform-origin: calc(100% - 20px) top; transition: transform 0.2s ease-in, opacity 0.25s ease-in; pointer-events: none; } .header_navbar-item--pop-up:hover .header__notify { opacity: 1; transform: scale(1); pointer-events: auto; }

[@lephuochung4034]

16:56 tại sao transform-origin: calc(100%-20px) top, cho dù thay đổi cái width thì tâm không thay đổi v a, e kh hiểu chỗ calc(100% - 20px)

[@chinhduongvan8865]

tính từ margin-right sang chỗ cái opacity hiện lên là 20px nhé,100% ở đây nghĩa là 100% độ lớn(width) của element nên dù element có tăng lên bao nhiêu thì điểm opacity hiện lên vẫn ở chỗ đấy.Còn nếu ông dùng số px chuẩn thì lúc -20px nó sẽ hiện lên ở chỗ khác,theo tôi nghĩ vậy

[@justintrs]

Dành cho các bạn cũng bị kẹt phần này thì ở chỗ calc, các bạn phải có khoảng cách cho nó như thế này mới được nhé -------- calc(100% - 20px) -------- ** Phải có khoảng cách 2 bên của dấu trừ ngay giữa

[@HuyPham-zv7el]

giả dụ có 2 hình vuông, hình vuông 1 có width là 100px, hình vuông 2 width là 500px. Nếu bạn để 90% thì hình 1 bị giảm sẽ thành 90px, hình 2 bị giảm 450px. Còn khi bạn dùng 100%-20px thì hình 1 sẽ còn 80px và hình 2 sẽ còn 480px. Nên khi bạn tăng width càng nhiều mà sử dụng cách 90% thì tâm sẽ dễ bị vào giữa hơn :v

[@NamPham-rb7rx]

hay quá a

[@venuspdd]

anh ơi, kết thúc phần này cái notifi khi trỏ vào thì nó hiện ra nhưng người dùng chưa kịp đưa chuột vào phần thông báo thì nó đã biến mất , có cách nào chỉnh phần này không ạ

[@criticsgamer7071]

bạn xem lại phần header qr code có hướng dẫn đó

[@chienvuduy2836]

cho em hỏi sao em transform-origin rồi mà tâm nó không đổi, nó vẫn nở ra từ giữa vậy ?

[@nguyenvanhoa9141]

b làm được chưa mình cũng vậy á

[@chienvuduy2836]

​@@nguyenvanhoa9141lâu rồi mk k nhớ bản thử tìm hiểu lại xem có phải do thuộc tính khác nó đè lên không, bạn thử xoá các thuộc tính khác xem

[@bim1815]

phải có khoảng cách ở phần dấu trừ

[@nova_dayne]

sao em .header__navbar-item--has-notify:hover .header__notify { display: block; } xong mà ra web vẫn hiện anh ơi load web vẫn vây

[@baonguyenviet6863]

.header__notify chắc chưa cho display: none;

[@TranSy-sz2ps]

@@baonguyenviet6863 chính xác rồi bạn :)

[@tdp11a85]

5:00

[@vantai0703]

Có ai bị 2 cái name và description nó k tự xuống dòng không vậy?. Ai bị cho mình hỏi fix kiểu gì với

[@bim1815]

C1: đổi thành thẻ C2: thêm thuộc tính display: block vào

[@thehien.]

không biết bác nào có cảm giác làm animation mà nó chạy không giống anh sơn không

[@huyenthanh5079]

@hi ông

[@hoangv5282]

em nghĩ là cái animation là ease thôi anh ạ

[@F8VNOfficial]

Cảm ơn em nhé. Em làm như nào em thấy hợp lý là được. Không có tiêu chuẩn nào là luôn đúng cả. Tùy người, tùy hoàn cảnh nha em. Chủ yếu anh hướng dẫn các bạn cách làm thôi em

[@hoangv5282]

@@F8VNOfficial chuẩn luôn anh ạ

[@quoctinhle2915]

yeahhh

[@LinhPham-4568]

4:30

[@quangtranang403]

bóc tem =))

[@lamtay9120]

anh ơi @keyframs nó không chạy là do cái j vậy ạ

[@lequochuyfpldn1805]

giống tui

[@manhninhduc3435]

T cũng bị sau khi tắt máy đi đi ngủ sáng sau lại chạy đc chả hiểu kiểu gì ?