3 CSS-Tricks hữu ích cho người mới

1. Tạo hiệu ứng thu hút với keyframes radial-pulse

• Nếu bạn muốn user click vào 1 button nào đó, có nhiều cách khác nhau để đạt được hiệu quả. Và mình muốn chia sẽ 1 trick khá đơn giản nhưng mượt mà.

Ví dụ codepen:

Ưu điểm:

• Không làm thay đổi chiều rộng hoặc cao của element đó => tránh làm vỡ layout
• Dễ dàng custom lại màu sắc, thời lương hay kích thước hiệu ứng Đơn giản nhưng hiệu quả

2. Căn giữa element theo chiều dọc và ngang

• Khá nhiều người sử dụng css lâu năm vẫn mệt mỏi với việc căn giữa element mà không hardcode kiểu margin-top: 15px hay padding-left: 20px.
• Và với display flex trong phiên bản CSS3, rất dễ để căn giữa element với vài dòng code như sau: .parentElement: display:flex + justify-content:center + align-items:center

Ví dụ codepen:

3. Vỡ layout khi add border

• Hẳn nhiều bạn trong 1 số trường hợp khi them border vào 1 div nào đó và khiến layout lỗi tung tóe lên, thằng div bên cạnh đang nằm cạnh thì lại bị nhảy xuống dòng
• Giải pháp: Sử dụng box-sizing: border-box lên element có border, như vậy width của element đó sẽ bao gồm luôn border width. Không dùng border nữa mà sử dụng box-shadow để thay thế, ví dụ minh họa:

Cảm ơn các bạn đã đọc bài viết này của mình, mình hy vọng nó sẽ giúp ích ít nhiều cho các bạn ^^

Nguồn tham khảo: https://itnext.io/4-css-tricks-ive-learnt-the-hard-way-aab1e7e8ff44