[CSS] Thêm hiệu ứng mũi tên đẹp mắt cho thẻ DIV / Block

Những ai làm web thì chắc không còn xa lạ gì với CSS mà thiếu nó thì trang web của chúng ta sẽ thiếu hẳn sức sống và sự hấp dẫn. Với CSS chúng ta có thể làm được rất nhiều điều để cải thiện hình ảnh, trau chuốt thêm cho trang web để nó trở nên bắt mắt, lôi cuốn hơn. Và trong bài viết ngày hôm nay, tôi sẽ giới thiệu đến các bạn một hiệu ứng nhỏ, khá đẹp mắt mà tôi vừa tìm được. Đó là hiệu ứng mũi tên đẹp mắt cho các thẻ DIV hoặc các khối (Block).

(Hình minh họa)

Mà từ đó chúng ta có thể phát triển thành những hình phức tạp như hình dưới đây

Việc thực hiện hiệu ứng này có thể dùng các thuộc tính CSS mà đã được giới thiệu trong rất nhiều tutorials như

Nhưng trong bài viết này tôi sẽ không cung cấp bất kỳ đoạn code CSS nào, thay vào đó tôi sẽ giới thiệu sơ lược vài trang web tạo hiệu ứng mũi tên này một cách tự động, trực quan. Bạn có thể thay đổi tùy chọn và lấy mã CSS, dán vào code của bạn và tùy chỉnh (nếu có). Rất đơn giản và dễ dàng.

1, cssarrowplease

Khi bạn truy cập vào trang web này, bạn sẽ thấy nó rất dễ sử dụng. Bạn chỉ việc thay đổi các tùy chọn như màu sắc, độ rộng, vị trí dấu mũi tên…Mã CSS ở cột bên phải sẽ tự động sinh ra theo những thay đổi của các bạn. Chỉ cần copy/paste vào code của bạn là xong.

Nên nhớ hãy thay đổi tên class “arrow_box” tùy thuộc vào thẻ div/block mà bạn có.

Ngoài ra, nếu bạn muốn tải source code của trang web này thì có thể tải về tại đây.

2, ilikepixels

Đây cũng là một trang web mà tôi đánh giá khá cao vì sự mềm dẻo, dễ sử dụng và thao tác. Bạn không chỉ thêm được hiệu ứng mũi tên mà còn tác động được thẻ div/block một cách linh hoạt.

Sau khi chỉnh sửa hiệu ứng và thẻ div một cách ưng ý nhất, bạn hãy click vào nút CSS ở góc trên cùng bên phải của trang web. Nó sẽ hiện thị mã CSS cho các bạn.

Lưu ý, hãy thay đổi tên class “bubble” phù hợp với thẻ div của bạn.

3, Arrow CSS Generator

Nếu bạn đang tìm kiếm sự đơn giản thì có thể tham khảo thêm trang web này. Với những tùy chọn cơ bản, bạn hoàn toàn có được hiệu ứng mũi tên trên thẻ div/block mình mong muốn.

Mở rộng,

Mặc dù không hoàn toàn liên quan đến bài viết này nhưng tôi vẫn muốn giới thiệu tới các bạn 1 trang web online giúp tạo ra các thẻ div/block có dạng tam giác (gần giống mũi tên) ở các vị trí khác nhau, hỗ trợ trên cả IE6.

http://apps.eky.hk/css-triangle-generator/

Chúc các bạn buổi tối vui vẻ!