Thứ Sáu, ngày 04 tháng 12 năm 2015

CSS3 Hiệu Ứng Mũi Tên Đẹp - Đơn Giản cho Web/Wap

Như chúng ta đã biết điểm thu hút của trang web kể đến đầu tiên đó là các hiệu ứng của CSS. Chưa cần biết nội dung của bạn ra sao nhưng CSS đẹp sẽ chiếm được cảm tình của người xem. Nhưng cũng phải kể đến tốc độ load trang không được quá chậm
Chính vì thế hôm nay mình xin giới thiệu đến các bạn hiệu ứng mũi tên Đẹp và Đơn giản bằng CSS3 cho các bạn tham khảo. Không như các bài trước mình chia sẻ mà hôm nay mình sẽ giới thiệu các trang web cho phép tạo hiệu ứng mũi tên online theo ý thích của các bạn bằng công cụ có sẵn của họ. Những CSS3 này sẽ không tốn bao nhiêu tài nguyên cũng như khả năng load trang không giảm đi nên các bạn yên tâm sử dụng
Các trang web dưới đây giúp các bạn 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.


(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


Bắt đầu thôi

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

Chúc các bạn tạo được những hiệu ứng mũi tên đẹp mắt bằng CSS3 theo ý mình