Design Banner Web with Gradient Background HTML CSS

Banner website là gì ?

Banner website là một loại quảng cáo trên trang web, thường được đặt ở vị trí nổi bật để thu hút sự chú ý của người xem. Banner website thường có kích thước và định dạng đa dạng, từ nhỏ nhắn đến lớn hình ảnh full-width trên trang web. Banner website thường được sử dụng để quảng bá sản phẩm, dịch vụ hoặc thương hiệu của một công ty hoặc tổ chức. Các banner này thường được tạo bằng hình ảnh hoặc đồ họa và có thể có kèm theo một thông điệp hoặc lời kêu gọi hành động để khuyến khích người xem bấm vào banner để tìm hiểu thêm về sản phẩm hoặc trang web.

Conic-gradient trong CSS là gì ?

Conic-gradient là một hàm trong CSS3 cho phép tạo ra một gradient theo hình tròn, cho phép các màu chuyển tiếp xung quanh trục của hình tròn. Nó cho phép tạo ra các đồ họa động với các hiệu ứng gradient mới lạ và độc đáo.

Cú pháp của conic-gradient như sau:

background: conic-gradient( [ <angle> || <position> ]? , <color-stop> [, <color-stop>]+ );

Với các tham số:
  • <angle>: Góc bắt đầu của gradient.
  • <position>: Vị trí bắt đầu của gradient, có thể là một tọa độ x-y.
  • <color-stop>: Chứa một màu và một vị trí, nơi mà gradient chuyển tiếp từ màu này sang màu khác.
Ví dụ, để tạo một conic-gradient từ màu đỏ đến màu xanh lá cây theo hình tròn, có thể sử dụng mã CSS sau:

background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

Kết quả sẽ là một gradient theo hình tròn với màu đỏ ở trên cùng, màu xanh lá cây ở dưới cùng và các màu khác chuyển tiếp trên đường tròn.

Design Banner Web with Gradient Background HTML CSS


Sau đây hãy dựa vào những kiến thức phía trên để tạo ra một banner với animation Gradient background sử dụng HTML và CSS nhé.

Video hướng dẩn chi tiết



Download full code



Previous Post Next Post