8 hiệu ứng HTML tuyệt vời mà bất kỳ ai cũng có thể thêm vào trang web của họ

Bạn muốn trang web của mình trông tuyệt vời — nhưng kỹ năng phát triển web của bạn còn thiếu.

Đừng tuyệt vọng! Bạn không cần phải biết CSS hoặc PHP để xây dựng một trang web đẹp mắt với các hiệu ứng tuyệt vời. Một số thẻ HTML đơn giản và biết cách sao chép và dán sẽ làm được.

Để giúp bạn bắt đầu với một số hiệu ứng HTML thú vị, chúng tôi đã biên soạn các mẫu mã miễn phí này để sao chép. Chúng sẽ nâng cao chức năng và trải nghiệm người dùng trên trang web của bạn mà không tốn một xu nào. Mặc dù chúng chủ yếu là HTML, nhưng những mã thú vị này cũng có thể chứa một số CSS và PHP.

1. Hiệu ứng thị sai HTML tuyệt vời

Bạn có thể đã thấy Hiệu ứng thị sai được sử dụng trên các trang web có quảng cáo trực tuyến. Khi bạn cuộn xuống một bài báo, hình nền dường như cuộn theo một tốc độ khác hoặc một quảng cáo xuất hiện.

Ngoài ra, có lẽ hình nền sẽ thay đổi khi bạn truy cập các phần khác nhau của trang web. Đó là một hiệu ứng thú vị giúp tăng thêm chiều sâu hình ảnh cho nội dung và có thể được thêm vào ngay cả khi bạn không hiểu mã HTML cơ bản.

Bạn có thể chơi với hiệu ứng và sao chép mã để có hiệu ứng cuộn Parallax đơn giản từ W3Schools.

Trong phiên bản phức tạp nhất của nó, hiệu ứng này là sự kết hợp của HTML, CSS và JS.

Hãy tiếp tục và tìm nạp các mã cho hiệu ứng Thị sai Đầu trang / Chân trang ở trên từ CodePen.

Đây là một phần tử HTML đơn giản nhưng hữu ích cho phép bạn đóng gói các đoạn văn bản dài thành một định dạng nhỏ gọn. Bằng cách này, nó không chiếm toàn bộ không gian trên trang.

Bạn có thể thử với màu sắc và kích thước của hộp văn bản để làm cho nó phù hợp với nhu cầu của bạn.

Đầu vào:

<div style="width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">

Nếu bạn muốn thứ gì đó lạ mắt hơn một chút, bạn cũng có thể tìm nạp mã cho hộp nhận xét có thể tùy chỉnh từ Quackit.

Ở đó, bạn sẽ tìm thấy một số mẫu, nhưng bạn cũng có thể sử dụng trình chỉnh sửa của chúng để thay đổi và kiểm tra (chạy) mã tùy chỉnh của mình theo cách thủ công.

3. Một thủ thuật HTML thú vị: Văn bản được đánh dấu

Với thẻ đơn giản, bạn có thể thêm rất nhiều hiệu ứng HTML thú vị vào văn bản hoặc hình ảnh của mình. Lưu ý rằng không phải tất cả chúng đều hoạt động trên các trình duyệt. Những cái được đề cập ở đây hoạt động trong Google Chrome, Microsoft Edge và Mozilla Firefox.

Hiệu ứng văn bản HTML này làm nổi bật văn bản giữa các thẻ .

Đầu vào:

<span style="background-color: #FFFF00>Your highlighted text here.</span>

Bản demo đầu ra:

4. Mã HTML để thêm hình nền thú vị vào văn bản

Tương tự như vậy, bạn có thể thay đổi màu của văn bản hoặc thêm hình nền. Cái này sẽ đẹp nếu cỡ chữ của văn bản lớn hơn.

Đầu vào:

<span style="background-image: url(https://www.smartreviewaz.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt">smartreviewaz presents...</span>

Hiệu ứng tương tự cũng đạt được bằng cách thêm các yếu tố kiểu và phông chữ vào văn bản trong thẻ .

Bản demo đầu ra:

Chú giải công cụ tiêu đề xuất hiện khi bạn cuộn chuột qua một đoạn văn bản hoặc hình ảnh “được điều khiển”. Bạn sẽ thấy những thứ này được sử dụng trên các trang web trên hình ảnh, văn bản được liên kết hoặc thậm chí là các mục menu trong các ứng dụng dành cho máy tính để bàn. Sử dụng mã HTML này để thêm chú giải công cụ vào văn bản thuần túy trên trang web của bạn.

Đầu vào:

<span title="See, this is the tooltip. :)">Move your mouse over me!</span>

Bản demo đầu ra:

6. Các thủ thuật HTML thú vị nhất chưa từng có: Cuộn hoặc giảm văn bản

Khi bạn tìm kiếm “marquee html” trên Google, bạn sẽ phát hiện ra một Easter Egg nhỏ. Xem số kết quả tìm kiếm cuộn ở trên cùng? Đó là một hiệu ứng được tạo bởi thẻ marquee hiện đã lỗi thời. Mặc dù hiệu ứng văn bản HTML tuyệt vời này đã không còn được dùng nữa, nhưng hầu hết các trình duyệt vẫn hỗ trợ nó.

Đầu vào:

<marquee>I wanna scroll with it, baby!</marquee>

Bản demo đầu ra:

Bạn có thể thêm các thuộc tính khác để kiểm soát hành vi cuộn, màu nền, hướng, chiều cao, v.v.

Ví dụ: bạn có thể cuộn sang trái bằng:

<marquee 

Chuyển “trái” sang “phải” để cuộn văn bản theo hướng ngược lại.

Ngoài ra, bạn thậm chí có thể cuộn lên hoặc xuống:

<marquee 

Ngoài ra, marquee cũng có hành vi “trượt”, giới hạn khoảng cách mà văn bản có thể cuộn. Hãy cẩn thận, tuy nhiên; những tác dụng này có thể trở nên khá khó chịu nếu lạm dụng quá mức. Để có hiệu ứng chữ rơi xuống thú vị, hãy quay lại Quackit và sao chép mã marquee được tùy chỉnh cao của chúng.

Các thủ thuật HTML thú vị nhất là các hiệu ứng HTML động. Tuy nhiên, chúng thường dựa trên kịch bản. Đây là một hiệu ứng cho các menu mà bạn sẽ đồng ý là trông rất bóng bẩy.

Nó phức tạp hơn một chút so với thẻ HTML thông thường của bạn vì nó hoạt động với biểu định kiểu và các tập lệnh. Ưu điểm là bạn không phải tải lên tệp CSS hoặc tập lệnh để làm cho nó hoạt động. Thay vào đó, chỉ cần dán mã từ Dynamic Drive vào phần trên trang web của bạn.

8. Nhận bảng tính HTML với Tableizer

Nếu bạn muốn hiển thị một bảng tính trên trang web của mình, hãy để Tableizer! chuyển đổi dữ liệu của bạn thành một bảng HTML. Chỉ cần dán dữ liệu thô từ Excel, Google Doc hoặc bất kỳ bảng tính nào khác vào công cụ chuyển đổi tại tableizer.journalistopia.com. Tinh chỉnh tùy chọn bảngsau đó nhấp vào Tableize nó để nhận đầu ra HTML.

Đây có lẽ là một trong những mã HTML thú vị nhất cho trang web của bạn, như Tableize It! làm tất cả các công việc khó khăn.

Nhấp chuột Sao chép HTML vào Clipboard để sao chép mã HTML và thêm nó vào trang web của bạn. Cân nhắc chỉnh sửa thuộc tính màu nền để có hiệu ứng mát mẻ hơn.

Mặc dù đây không thực sự là một hiệu ứng HTML, nhưng nó khá tiện dụng.

Các mã và hiệu ứng HTML thú vị hơn cho trang web của bạn

Sức mạnh của HTML, CSS và JavaScript cung cấp các tùy chọn tiềm năng không giới hạn cho các hiệu ứng tuyệt đẹp trên trang web của bạn. Muốn thêm?

Chúng tôi đã chỉ cho bạn tám mã HTML thú vị mà bạn có thể sao chép để nâng cao trang web của mình. Mặc dù khác nhau, nhưng tất cả chúng đều dễ thực hiện miễn là bạn biết các kỹ thuật mã hóa HTML cơ bản.