Linear-gradient trong css đẹp

Question

Nội dung chính Show

II. Gradient Là Gì?
III. Cách dùng
1. Linear Gradient
2. Radial Gradient
3. Tạo Border cho phần tử
4. Tạo Text Gradient
5. Tạo Bullet Gradient Cho Danh Sách
6. Kết Hợp Gradient Với Hình Ảnh
7. Cách Tạo Gradient Button
IV. Tổng kết

filiallion

Administrator

Staff member

Administrator

Messages560Points10

06/29/2020

#1

LanguageTiếng Việt

Nếu các bạn muốn tạo hiệu ứng màu nền chuyển sắc kiểu linear gradient bằng CSS3 thì các bạn có thể tham khảo thư viện CSS3 WebGradients tại địa chỉ https://webgradients.com. Hiện tại WebGradients cung cấp rất nhiều mẫu CSS thiết kế linear gradient rất đẹp, các bạn có thể xem qua các demo rồi sao chép mã CSS để sử dụng cho dự án của mình. Ngoài ra, WebGradients còn hỗ trợ các bạn xuất ra tập tin hình ảnh PNG, rất thuận tiện trong trường hợp các bạn muốn sử dụng nhanh bằng cách chèn hình ảnh.

Các bạn có thể tham khảo ví dụ sau:

CSS:

.linear-gradient {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

Hoặc một ví dụ khác:

CSS:

.linear-gradient {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

Trong bài viết hôm nay mình sẽ giới thiệu đến bạn CSS gradient là gì và cách áp dụng chúng vào thiết kế và phát triển cho trang web.

Nội dung chính Show

II. Gradient Là Gì?

Gradient là một phần tử CSS với kiểu dữ liệu hình ảnh, nó được tạo ra bởi sự kết hợp hai hay nhiều màu xác định với hai loại chính là linear và radial. Do là kiểu hình ảnh nên bạn có thể sử dụng các thuộc tính dành cho hình ảnh trong CSS như là background-image, border-image... cho phần tử của website.

III. Cách dùng

1. Linear Gradient

Cú pháp của linear gradient

 background: linear-gradient(hướng, màu thứ nhất, màu thứ hai, ...);

Và để hiểu rõ chúng ta hãy đi vào ví dụ sau nhé:

HTML:

<div class="noi-dung">Từ Trái Sang Phải</div><div class="noi-dung">Từ Trái Sang Phải</div>

CSS:

body {
  text-align: center;
}
.noi-dung {
  background: linear-gradient(to right, #7A7FBA, #11C37C);
  color: white;
  padding: 6rem 1rem;
  margin: 4rem;
  font-size: 50px;
}

Và kết quả

2. Radial Gradient

Cú pháp về radial gradient nhé:

background: radial-gradient(hình dạng at vị trí, màu bắt đầu, ..., màu kết thúc);

Và để hiểu rõ hơn thì bạn xem ví dụ cách sử dụng nó trong thực tế nhé:

HTML:

<div class="noi-dung">Hình dạng hình tròn và vị trí nằm ở chính giữa</div>

CSS:

body {
  text-align: center;
}
.noi-dung {
 background: radial-gradient(circle at center, #F4DD90, #0C1C5F);
  color: white;
  padding: 6rem 1rem;
  margin: 4rem;
  font-size: 50px;
}

Kết quả

Hướng dẫn linear-gradient css là gì

3. Tạo Border cho phần tử

Bây giờ chúng ta sẽ đi vào tìm hiểu cách tạo đường viền cho phần tử bằng cách sử dụng gradient trong CSS nhé!

HTML:

<div class="noi_dung border-gradient">Tạo Đường Viền Gradient</div>

CSS:

.noi_dung {
   width: 400px;
   height: 200px;
   max-width: 100%;
   margin: 1rem auto;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
 }
.border-gradient {
   border: 10px solid;
   border-image-source: linear-gradient(45deg, #1b2a49, #bada55);
   border-image-slice: 1;
 }

Kết quả border gradient bạn xem bên dưới nhé:

Hướng dẫn linear-gradient css là gì

4. Tạo Text Gradient

Trong phần này chúng ta sẽ đi vào tạo text-gradient bằng đoạn mã sau đây

HTML:

<div class="text-gradient">Niềm Vui Lập Trình</div>

CSS:

.text-gradient {
  text-align: center;
  font-size: 100px;
  background: linear-gradient(to right, #bada55 0%, #1b2a49 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color:transparent;
}

Đây là kết quả

Hướng dẫn linear-gradient css là gì

5. Tạo Bullet Gradient Cho Danh Sách

Trong phần này chúng ta sẽ đi vào tạo bullet gradient cho List thông qua đoạn mã sau đây

HTML:

<div class="noi-dung">Từ Trái Sang Phải</div><div class="noi-dung">Từ Trái Sang Phải</div>

0

CSS:

<div class="noi-dung">Từ Trái Sang Phải</div><div class="noi-dung">Từ Trái Sang Phải</div>

1

Và kết quả

Hướng dẫn linear-gradient css là gì

6. Kết Hợp Gradient Với Hình Ảnh

Trong phần tiếp theo này chúng ta sẽ đi vào kết hợp giữa gradient với phần tử hình ảnh

HTML:

<div class="noi-dung">Từ Trái Sang Phải</div><div class="noi-dung">Từ Trái Sang Phải</div>

2

CSS:

<div class="noi-dung">Từ Trái Sang Phải</div><div class="noi-dung">Từ Trái Sang Phải</div>

3

Và kết quả

Hướng dẫn linear-gradient css là gì

7. Cách Tạo Gradient Button

Phần cuối cùng này chúng ta sẽ đi vào tạo gradient button cho trang web

HTML:

<div class="noi-dung">Từ Trái Sang Phải</div><div class="noi-dung">Từ Trái Sang Phải</div>

4

CSS:

<div class="noi-dung">Từ Trái Sang Phải</div><div class="noi-dung">Từ Trái Sang Phải</div>

5

Và kết quả bạn xem bên dưới

Hướng dẫn linear-gradient css là gì

IV. Tổng kết

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo gradient CSS hữu ích dành cho việc phát triển, thiết kế web. Chúc bạn có một ngày vui vẻ! link tham khảo: https://www.niemvuilaptrinh.com/

programming css

Linear-gradient trong css đẹp

filiallion

Administrator

II. Gradient Là Gì?

III. Cách dùng

1. Linear Gradient

2. Radial Gradient

3. Tạo Border cho phần tử

4. Tạo Text Gradient

5. Tạo Bullet Gradient Cho Danh Sách

6. Kết Hợp Gradient Với Hình Ảnh

7. Cách Tạo Gradient Button

IV. Tổng kết

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội