+1

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


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí