Giống như cách bạn có thể sử dụng thuộc tính background-color trong CSS để khai báo nền màu đồng nhất, bạn có thể sử dụng thuộc tính background-image không chỉ để khai báo tệp hình ảnh làm nền mà còn cả gradient. Sử dụng CSS gradient tốt hơn cho việc kiểm soát và hiệu suất hơn là sử dụng tệp hình ảnh thực tế (của một tệp gradient).

Bạn đang xem : gradient trong css là gì

Các gradient trong CSS thường là một màu nhạt dần thành một màu khác, nhưng CSS cho phép bạn kiểm soát mọi khía cạnh của cách điều đó xảy ra , từ hướng và hình dạng đến màu sắc và cách chúng chuyển từ cái này sang cái khác. Trên thực tế, có ba loại chuyển sắc: tuyến tính , xuyên tâm conic . Đây là cú pháp cơ bản cho mỗi cú pháp:

  / * Ví dụ về độ dốc CSS tuyến tính cơ bản * /
background-image: linear-gradient (# ff8a00, # e52e71);
background-image: linear-gradient (sang phải, tím, đậm, tím);
background-image: linear-gradient (40deg, rgb (255 0 0) 60%, cam);

/ * Ví dụ về gradient CSS xuyên tâm cơ bản * /
background-image: radial-gradient (# ff8a00, # e52e71);
background-image: radial-gradient (vòng tròn ở trên cùng bên phải, # ff8a00, màu đỏ, # e52e71);

/ * Ví dụ về gradient CSS conic cơ bản * /
background-image: conic-gradient (# ff8a00, # e52e71);
background-image: conic-gradient (đỏ 50deg, vàng 100deg, vôi 200deg, nước, xanh lam, đỏ tươi, đỏ);  

Dự phòng nhúng CodePen

Độ dốc CSS tuyến tính

Có lẽ loại CSS gradient phổ biến nhất mà chúng ta thấy trong thiết kế web là linear-gradient () . Nó được gọi là “tuyến tính” vì màu sắc chảy từ trái sang phải, từ trên xuống dưới hoặc ở bất kỳ góc nào bạn chọn theo một hướng.

Cú pháp

Cú pháp được khai báo trên thuộc tính background (viết tắt) hoặc background-image trong CSS. Nó đọc như thế này bằng tiếng Anh đơn giản:

Tạo hình nền gradient tuyến tính di chuyển [theo hướng này hoặc hướng này angle] và bắt đầu bằng [một màu] và kết thúc bằng [màu khác] .

Cú pháp chính thức trông giống như sau:

  linear-gradient (
  [& lt; góc & gt; | đến & lt; cạnh hoặc-góc & gt; ]? ,
  & lt; color-stop-list & gt;
)
& lt; cạnh hoặc góc & gt; = [sang trái | sang phải] || [lên đầu trang | xuống dưới cùng]  

Cách sử dụng

Hãy bắt đầu với ví dụ cơ bản nhất, gradient CSS hai màu đi từ trên xuống dưới:

  .gradient {
  background-image: linear-gradient (# ff8a00, # e52e71);
}  

Dự phòng nhúng CodePen

Đẹp, phải không? Lưu ý rằng chúng tôi đã không khai báo góc trong ví dụ trên. CSS sẽ giả sử xuống dưới cùng trong trường hợp đó, trong đó # ff8a00 là màu bắt đầu chuyển sang màu tiếp theo, # e52e71 .

Chúng tôi có thể viết cùng một điều theo hai cách khác:

  / * Khai báo hướng * /
background-image: linear-gradient (xuống dưới cùng, # ff8a00, # e52e71);

/ * Khai báo rõ ràng góc, tính bằng độ * /
background-image: linear-gradient (180deg, # ff8a00, # e52e71);  

Thay đổi hướng

Để làm cho gradient CSS đi từ trái sang phải, chúng tôi chuyển một tham số bổ sung vào đầu hàm linear-gradient () , bắt đầu bằng từ đến chỉ hướng. Hãy chia giá trị thuộc tính thành các dòng riêng biệt để dễ dàng biết được điều gì đang xảy ra.

  .gradient {
  hình nền:
    gradient tuyến tính (
      qua phải,
      # ff8a00, # e52e71
    );
}  

Dự phòng nhúng CodePen

Gọn gàng, bây giờ các màu chuyển từ cạnh trái sang cạnh phải của phần tử!

Cú pháp to này cũng hoạt động cho các góc. Ví dụ: nếu bạn muốn trục của gradient bắt đầu ở góc dưới cùng bên trái và chuyển đến góc trên cùng bên phải, bạn có thể nói to top right :

  .gradient {
  hình nền:
    gradient tuyến tính (
      trên cùng bên phải,
      # ff8a00, # e52e71
    );
}  

Dự phòng nhúng CodePen

Nếu hộp đó là một hình vuông hoàn hảo, góc của gradient sẽ là 45deg , nhưng vì nó không phải là hình vuông nên không phải vậy. Nếu bạn muốn chắc chắn rằng nó là 45deg , bạn có thể khai báo góc chính xác, chỉ thả thành theo cú pháp:

  .gradient {
  hình nền:
    gradient tuyến tính (
      45deg,
      # ff8a00, # e52e71
    );
}  

Nhiều màu

Chúng tôi không giới hạn chỉ có hai màu! Trên thực tế, chúng ta có thể có bao nhiêu màu được phân tách bằng dấu phẩy tùy thích. Đây là bốn:

  .gradient {
  hình nền:
    gradient tuyến tính (
      qua phải,
      màu đỏ,
      # f06d06,
      rgb (255, 255, 0),
      màu xanh lá
    );
}  

Dự phòng nhúng CodePen

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một con số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Chrome

Firefox

IE

Cạnh

Safari

10 *

36 < / p>

10

12

15.4

Di động / Máy tính bảng

Android Chrome

Android Firefox

Android

iOS Safari

102

101

4 *

15.4

Độ dốc xuyên tâm của CSS

Một gradient xuyên tâm khác với một gradient tuyến tính ở chỗ nó bắt đầu tại một điểm duy nhất và phát ra bên ngoài. CSS gradient thường được sử dụng để mô phỏng một nguồn sáng, mà chúng tôi biết rằng không phải lúc nào cũng thẳng. Điều đó làm cho quá trình chuyển đổi giữa các màu trong một gradient xuyên tâm có vẻ tự nhiên hơn.

Cú pháp

Ký hiệu radial-gradient () được sử dụng trên background hoặc background-image trong CSS. Điều này hoàn toàn hợp lý khi chúng ta nhớ lại rằng gradient về cơ bản là CSS để tạo hình ảnh mà nếu không chúng ta sẽ thực hiện trong phần mềm chỉnh sửa hình ảnh và đặt trên thuộc tính background .

Cú pháp chính thức như sau:

  radial-gradient (
  [& lt; end-shape & gt; || & lt; kích thước & gt; ]? [tại & lt; vị trí & gt; ]? ,
  & lt; color-stop-list & gt;
);  

Có thể sẽ hữu ích một chút nếu bạn dịch nội dung đó sang tiếng Anh cơ bản:

Này, phần tử! Sơn một gradient xuyên tâm một số hình dạng một số kích thước nằm ở các vị trí này . Ồ và hãy chắc chắn rằng nó bắt đầu bằng màu này và dừng lại ở màu này .

Giá trị

Ký hiệu radial-gradient chấp nhận các giá trị sau:

  • shape : Xác định hình dạng của gradient tiếp theo khi chuyển tiếp ra ngoài, từ màu này sang màu tiếp theo. Vì chúng ta đang nói về độ dốc xuyên tâm, các hình dạng bị giới hạn ở bản chất là hình tròn. Chúng tôi có thể bỏ qua giá trị này và ký hiệu sẽ đo độ dài cạnh của phần tử để xác định xem một giá trị có phù hợp hơn với tình huống hay không. Ví dụ: một phần tử là một hình vuông hoàn hảo sẽ là một kết hợp tuyệt vời cho circle trong khi bất cứ thứ gì hình chữ nhật đều chín muồi cho ellipse .
    • circle < / code>
    • ellipse
  • size : Ảnh hưởng đến hình dạng kết thúc của gradient bằng cách lấy giá trị shape và chỉ dẫn nơi gradient sẽ kết thúc dựa trên tâm của hình dạng. Điều này có thể được thể hiện bằng tên hoặc một số đo chính xác của chiều dài.
    • cạnh gần nhất : Gradient sẽ kết thúc ở phía gần tâm nhất của hình dạng. Nếu hai bên khớp với tiêu chí này thì nó sẽ được phân phối đồng đều.
    • xa nhất (mặc định): Đối lập với cạnh gần nhất , trong đó gradient sẽ kết thúc ở phía xa nhất so với tâm của hình dạng.
    • góc gần nhất : Gradient sẽ kết thúc ở góc phù hợp với góc gần nhất với tâm của hình dạng.
    • far-angle : Ngược lại với góc gần nhất , nơi gradient kết thúc ở góc nằm xa tâm hình nhất.
    • radius : Chúng tôi có thể chỉ định một giá trị số phục vụ như bán kính của vòng tròn. Điều này phải được nêu bằng pixel dương hoặc đơn vị tương đối. Rất tiếc, không được phép sử dụng đơn vị hoặc tỷ lệ phần trăm âm vì một vòng tròn âm sẽ là chân không và tỷ lệ phần trăm có thể liên quan đến bất kỳ số lượng giá trị xung quanh nào.
      • hoặc phần trăm : Giá trị số thứ hai có thể được cung cấp để khai báo kích thước rõ ràng của một hình elip, nhưng không phải là một hình tròn. Một lần nữa, các giá trị âm là điều không nên, nhưng tỷ lệ phần trăm là trò chơi công bằng vì kích thước tương đối với hộp gradient chứ không phải phần tử.
  • < li> position : Tính năng này hoạt động rất giống với cách hoạt động trên background-position . Điều đó có nghĩa là top , right , left center đều hoạt động ở đây, cũng như các kết hợp trong đó hai giá trị được đặt tên (ví dụ: top center ) được cung cấp. Chúng tôi cũng có thể chỉ định một vị trí chính xác bằng cách sử dụng một giá trị số, bao gồm cả tỷ lệ phần trăm, tất cả đều có liên quan đến hộp giới hạn của phần tử. Mặc định là center center .

  • color-stop : Đây là các giá trị màu xác định độ dốc. Mọi giá trị màu đều được chấp nhận ở đây, bao gồm hex, được đặt tên, RGB và HSL.

Cách sử dụng

Đây là cách nhìn có lẽ là cơ bản nhất của nó. Lưu ý rằng chúng tôi không khai báo các giá trị shape , size , position hoặc color-stop , tất cả đều được mặc định là các giá trị đặt gradient ở chính giữa phần tử và chuyển đổi đồng đều giữa các giá trị màu đã khai báo.

  .gradient {
  hình nền:
    radial-gradient (
      # ff8a00,
      # e52e71
    );
}  

Dự phòng nhúng CodePen

Thay đổi hình dạng

Xem cách gradient đó giả định rằng shape ellipse trong các ví dụ trên? Đó là bởi vì bản thân phần tử không phải là một hình vuông hoàn hảo. Trong trường hợp đó, nó sẽ giả sử là một vòng kết nối . Khá thông minh! Đây là điều sẽ xảy ra nếu chúng tôi đã khai báo rõ ràng circle là giá trị shape :

  .gradient {
  hình nền:
    radial-gradient (
      vòng tròn,
      # ff8a00,
      # e52e71
    );
}  

Dự phòng nhúng CodePen

Thay đổi vị trí

Lưu ý rằng gradient trong các bản trình diễn có hình tròn và mờ dần đến màu kết thúc dọc theo cạnh xa nhất. Thay vào đó, chúng tôi có thể khai báo giá trị position một cách rõ ràng để đảm bảo rằng phần mờ kết thúc bằng “cạnh gần nhất” của shape , như sau:

  .gradient {
  hình nền:
    radial-gradient (
      vòng tròn cạnh gần nhất,
      # ff8a00,
      # e52e71
    );
}  

Dự phòng nhúng CodePen

Các giá trị có thể có ở đó là: góc gần nhất , cạnh gần nhất , góc xa nhất góc xa nhất < / mã>. Bạn có thể nghĩ về nó như: “Tôi muốn gradient xuyên tâm này mờ dần từ điểm trung tâm đến [bên nào] ,” và điền vào mọi nơi khác để phù hợp với điều đó.

Một gradient xuyên tâm cũng không phải bắt đầu ở tâm mặc định. Nó có thể chỉ định một điểm nhất định bằng cách sử dụng at như một phần của tham số đầu tiên, như:

  .gradient {
  hình nền:
    radial-gradient (
      vòng tròn ở trên cùng bên phải,
      # ff8a00,
      # e52e71
    );
}  

Dự phòng nhúng CodePen

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một con số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Chrome

Firefox

IE

Cạnh

Safari

10 *

36 < / p>

10

12

15.4

Di động / Máy tính bảng

Android Chrome

Android Firefox

Android

iOS Safari

102

101

4 *

15.4

Độ dốc CSS conic

Một gradient hình nón tương tự như một gradient xuyên tâm. Cả hai đều là hình tròn và sử dụng tâm của phần tử làm điểm nguồn cho các điểm dừng màu. Tuy nhiên, khi màu dừng của một gradient xuyên tâm xuất hiện từ tâm của vòng tròn, thì một gradient hình nón sẽ đặt chúng xung quanh vòng tròn.

Chúng được gọi là "hình nón" vì chúng có xu hướng trông giống như hình dạng của một hình nón đang được nhìn từ trên xuống. Chà, ít nhất là khi có một góc riêng biệt được cung cấp và độ tương phản giữa các giá trị màu đủ lớn để tạo ra sự khác biệt.

Cú pháp

Cú pháp gradient conic dễ hiểu hơn bằng tiếng Anh đơn giản:

Tạo conic-gradient nằm ở [một số điểm] bắt đầu bằng [một màu] một số góc độ và kết thúc bằng [màu khác] [một số góc độ]

Đây là cú pháp chính thức:

  conic-gradient (
  [từ & lt; angle & gt; ]? [tại & lt; vị trí & gt; ] ?,
  & lt; angle-color-stop-list & gt;
)  

Cách sử dụng

Ở cấp độ cơ bản nhất, nó trông giống như sau:

  .gradient {
  hình nền:
    conic-gradient (
      # ff8a00, # e52e71
    );
}  

Dự phòng nhúng CodePen

… trong đó giả định rằng vị trí của gradient bắt đầu ở chính giữa phần tử ( 50% 50% ) và được phân phối đồng đều giữa các giá trị màu giữa hai màu.

Chúng tôi có thể viết điều này theo một số cách khác, tất cả đều hợp lệ:

  .gradient {
  / * Ví dụ ban đầu * /
  background-image: conic-gradient (# ff8a00, # e52e71);
  / * Nêu rõ điểm trung tâm vị trí * /
  background-image: conic-gradient (ở 50% 50%, # ff8a00, # e52e71);
  / * Nêu rõ góc của màu bắt đầu * /
  background-image: conic-gradient (từ 0deg, # ff8a00, # e52e71);
  / * Nêu rõ góc của màu bắt đầu và vị trí điểm trung tâm * /
  background-image: conic-gradient (từ 0deg ở trung tâm, # ff8a00, # e52e71);
  / * Nêu rõ các góc của cả hai màu dưới dạng phần trăm thay vì độ * /
  background-image: conic-gradient (# ff8a00 0%, # ff8a00, # e52e71);
  / * Nêu rõ góc của màu bắt đầu theo độ và màu kết thúc bằng một lượt hoàn toàn của vòng tròn * /
  background-image: conic-gradient (# ff8a00 0deg, # e52e71 1turn);
}  

Nếu chúng tôi không chỉ định góc cho các màu, thì giả sử rằng gradient được chia đều giữa các màu, bắt đầu ở 0deg và kết thúc ở 360deg . Điều đó tạo ra một "điểm dừng" trong đó các màu sắc tương phản với nhau ở 0deg 360deg . Nếu chúng tôi giới thiệu giá trị thứ ba, thì giá trị đó sẽ tạo ra một gradient mượt mà hơn và chúng tôi bắt đầu có được phối cảnh hình nón tuyệt đẹp đó.

  .gradient {
  hình nền:
    conic-gradient (
      # ff8a00,
      # e52e71,
      # ff8a00
    );
}  

Dự phòng nhúng CodePen

Chúng ta có thể giải trí với các gradient hình nón. Ví dụ: chúng tôi có thể sử dụng nó để tạo ra cùng một loại mẫu mà bạn có thể thấy trong công cụ chọn màu hoặc chỉ báo quả bóng bãi biển quay nổi tiếng của Mac:

  .conic-gradient {
  hình nền:
    conic-gradient (
      màu đỏ,
      màu vàng,
      Vôi,
      nước,
      màu xanh da trời,
      đỏ tươi,
      màu đỏ
    );
}  

Dự phòng nhúng CodePen

Hoặc, hãy thử biểu đồ hình tròn đơn giản bằng cách thêm các điểm dừng cố định giữa ba giá trị màu:

  .gradient {
  hình nền:
    conic-gradient (
      vôi 40%,
      màu vàng 0 70%,
      màu đỏ 0
    );
}  

Dự phòng nhúng CodePen

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một con số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Chrome

Firefox

IE

Cạnh

Safari

69

83

Không

79

12.1

Di động / Máy tính bảng

Android Chrome

Android Firefox

Android

iOS Safari

102

101

101

12.2-12.5

Các gradient CSS lặp lại

Lặp lại các gradient là một mẹo mà chúng tôi có thể làm với việc sử dụng quảng cáo color-stop trên linear-gradient () radial-gradient () ký hiệu và cung cấp nó cho chúng tôi. Ý tưởng là chúng tôi có thể tạo các mẫu từ các gradient mà chúng tôi tạo ra và cho phép chúng lặp lại vô hạn.

Cú pháp

Có ba loại chuyển màu lặp lại, cả ba loại này hiện được hỗ trợ trong đặc điểm kỹ thuật chính thức và một loại nằm trong bản nháp đang hoạt động hiện tại. Cú pháp cho mỗi ký hiệu giống như kiểu gradient liên quan của nó. Ví dụ: repeat-linear-gradient () tuân theo cùng một cú pháp với linear-gradient () .

Gradient lặp lại Kí hiệu có liên quan Ví dụ repeat-linear-gradient linear-graadient repeat-linear-gradient ( 45deg, # ff8a00, # ff8a00 10px, # e52e71 10px, # e52e71 20px); repeat-radial-gradient radial-gradient repeat-radial -gradient (# ff8a00 0 8%, # e52e71 8% 16%); repeat-conic-gradient conic-gradient repeat-conic- gradient (từ 0deg, # ff8a00 0deg 30deg, # e52e71 30deg 60deg);

Cách sử dụng

Dưới đây là một gradient tuyến tính lặp lại xen kẽ giữa hai màu cứ sau mỗi 10 pixel ở một góc 45 độ:

  .gradient {
  hình nền:
    lặp lại-tuyến tính-gradient (
      45deg,
      # ff8a00,
      # ff8a00 10px,
      # e52e71 10px,
      # e52e71 20px
    );
}
 

Dự phòng nhúng CodePen

Chúng ta có thể làm điều tương tự, nhưng với một gradient xuyên tâm. Sự khác biệt? Bên cạnh ký hiệu, chúng tôi đang xác định hình dạng và điểm bắt đầu:

  .gradient {
  hình nền:
    lặp lại-radial-gradient (
      vòng tròn ở 0 0,
      # ff8a00,
      # ff8a00 10px,
      # e52e71 10px,
      # e52e71 20px
    );
}  

Dự phòng nhúng CodePen

Độ chuyển màu của conic không khác nhau nhiều! Một lần nữa, sự khác biệt lớn giữa gradient xuyên tâm và conic là các màu conic chuyển đổi xung quanh phần tử, trong đó các màu trong gradient xuyên tâm chuyển từ trung tâm của nguồn gradient.

  .gradient {
  hình nền:
    lặp lại-conic-gradient (
      từ 0deg,
      # ff8a00 0deg 30deg,
      # e52e71 30deg 60deg
  );
}  

Hỗ trợ trình duyệt

Điều này dành riêng cho các gradient lặp lại tuyến tính và xuyên tâm.

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một con số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Chrome

Firefox

IE

Edge

Safari

10 *

3.6 *

10

12

5.1 *

Di động / Máy tính bảng

Android Chrome

Android Firefox

Android

iOS Safari

102

101

4 *

5.0-5.1 *

Hoa văn

Chúng tôi đã thấy cách các gradient có thể tạo ra các mẫu thú vị khi chúng tôi xem xét các gradient lặp lại. Nhưng có rất nhiều mẫu khác mà chúng ta có thể tạo ra! Giống như bàn cờ:

Dự phòng nhúng CodePen

Chúng tôi cũng có thể tạo mẫu chữ v có lặp lại:

Dự phòng nhúng CodePen

Chris có một đoạn mã tạo thành mẫu giấy đồ thị:

Dự phòng nhúng CodePen

Những mẫu này được ghi lại rất nhiều trên web, nhưng hãy xem Thư viện mẫu gradient CSS của Lea Verou để biết một số ví dụ thực sự hấp dẫn.

Gradient đường viền

Chúng tôi có thể tạo đường viền từ các gradient!

Dự phòng nhúng CodePen

Chúng tôi thậm chí có thể sử dụng thủ thuật hoa văn để có hiệu ứng đường viền vui nhộn:

Dự phòng nhúng CodePen

Hoặc, này, chúng tôi có thể đặt các điểm dừng để sử dụng hiệu ứng nội dung chồng chéo:

Dự phòng nhúng CodePen

Chuyển sắc động

Chúng tôi có thể sử dụng background-position tp để làm cho nó xuất hiện như thể sự chuyển đổi giữa các màu trong một gradient đang chuyển động.

Dự phòng nhúng CodePen

Tuy nhiên, như trường hợp của bất kỳ hoạt ảnh nào, hãy lưu ý đến khả năng tiếp cận, đặc biệt là những người nhạy cảm với chuyển động. Hãy xem phần Hỗ trợ tiếp cận để biết thêm.

Hãy xem bản trình diễn này của Marty! Đây là một cách sử dụng siêu thông minh của gradient xuyên tâm để mô phỏng ánh sáng mặt trời dựa trên vị trí của con trỏ chuột.

Dự phòng nhúng CodePen

Khả năng tiếp cận

Các gradient CSS nên xem xét sự tương phản giữa màu nền và màu nền trước, giống như cách bạn làm với background-color . Bí quyết là đảm bảo rằng tất cả các màu được sử dụng trong gradient và quá trình chuyển đổi giữa chúng không ảnh hưởng đến mức độ dễ đọc của bất kỳ nội dung nào nằm trên đó. Đó là lúc việc sử dụng công cụ kiểm tra độ tương phản trở nên hữu ích.

Thứ gì khác để xem? Ảnh động. Chuyển đổi giữa hai màu nền đồng nhất, chẳng hạn như khi di chuột, thường không phải là vấn đề. Nhưng nếu background-position được sử dụng để làm xuất hiện độ dốc đang di chuyển, thì bạn nên xem xét truy vấn phương tiện prefers-Reduce-motion để hoạt ảnh được phân phát cho đúng người dùng.

Đặc điểm


Xem thêm những thông tin liên quan đến chủ đề Gradient trong css là gì

Linear gradient trong css

  • Tác giả: Hữu Long Phùng
  • Ngày đăng: 2020-08-30
  • Đánh giá: 4 ⭐ ( 5161 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: - Sau khi hoàn thành xong các khoá học về HTML CSS rồi thì chúng ta có thể thử nhảy vào làm ngay một cái giao diện xem sao nếu như chúng chưa giống mẫu thì chúng ta cú thể code lại đúng không nào, code đi code lại rồi lại kiểm tra bao giờ cảm thấy chúng giống đến 95% thì các bạn coi như đạt chỉ tiêu của cái giao diện đó rồi nhá.

    - Phần xây dựng giao diện chính là kết quả của việc bạn học HTML CSS có vững hay không chính vì vậy bạn nào cảm thấy mình chưa chắc thì có thể vừa học vừa làm theo nhé.

    Dưới đây là Link các playlist mà mình đã hướng dẫn ở kênh của mình mời các bạn cùng học.

    - HTML: https://www.youtube.com/watchv=rzRB5t...

    - CSS:
    https://www.youtube.com/watch?v=QGf42...

    - JAVASCRIPT:
    https://www.youtube.com/watch?v=CdpDK...

    - JAVASCRIPT NÂNG CAO:
    https://www.youtube.com/watch?v=FeSyN...

    - JQUERY:
    https://www.youtube.com/watch?v=sFnr6...

    - Dựng HTML CSS từ bản thiết kế:
    https://www.youtube.com/watch?v=aoRs9...

    - MONGODB:
    https://www.youtube.com/watch?v=G7ji_...

    - NODEJS:
    https://www.youtube.com/watch?v=frskA...

    - MYSQL:
    https://www.youtube.com/watch?v=9qXCu...

    - PHP BASIC:
    https://www.youtube.com/watch?v=MYO6Q...

    - PHP OOP:
    https://www.youtube.com/watch?v=oL8mq...

    - CÁC BẠN NÀO MUỐN THEO ĐUỔI LẬP TRÌNH WEB MỘT CÁCH BÀI BẢN THÌ KÊNH CỦA MÌNH CHÍNH LÀ LỰA CHỌN ĐÚNG ĐẮN NHẤT MỜI CÁC BẠN CÙNG HỌC TẬP.

    Mọi chi tiết xin liên hệ:

    - Tên: Phùng Hữu Long.

    - Email: phunglongtn@gmail.com.

    - Phone: 0375769686.

    - Zalo: 0375769686.

    - Facebook: https://www.facebook.com/ChuVann

    - Group Facebook: https://www.facebook.com/groups/72682 Dưới đây là Link các playlist mà mình đã hướng dẫn ở kênh của mình mời các bạn cùng học.

    - HTML: https://www.youtube.com/watchv=rzRB5tkrWrc&list=PLosyMXBMlg_86Q6ZXgbNU_k2vPkTwupBL

    - CSS:
    https://www.youtube.com/watch?v=QGf42EVpRlA&list=PLosyMXBMlg___ffnTICZv-ppZxYK_3QUh

    - JAVASCRIPT:
    https://www.youtube.com/watch?v=CdpDK_MMk9I&list=PLosyMXBMlg_8j57maoYcyKS2N6Pu2ZMBb

    - JQUERY:
    https://www.youtube.com/watch?v=sFnr6TcbXis&list=PLosyMXBMlg_8sVFKEKWaW33vwiYdYRkEc

    - Dựng HTML CSS từ bản thiết kế:
    https://www.youtube.com/watch?v=aoRs9TNxYCc&list=PLosyMXBMlg__CKFCIzChI5HTgUhJxPkFV

    - CÁC BẠN NÀO MUỐN THEO ĐUỔI LẬP TRÌNH WEB MỘT CÁCH BÀI BẢN THÌ KÊNH CỦA MÌNH CHÍNH LÀ LỰA CHỌN ĐÚNG ĐẮN NHẤT MỜI CÁC BẠN CÙNG HỌC TẬP.

    Mọi chi tiết xin liên hệ:

    - Tên: Phùng Hữu Long.

    - Email: phunglongtn@gmail.com.

    - Phone: 0375769686.

    - Zalo: 0375769686.

    - Facebook: https://www.facebook.com/ChuVann.

    - Group Facebook: https://www.facebook.com/groups/726821888027699

Background gradient

  • Tác giả: hocwebchuan.com
  • Đánh giá: 5 ⭐ ( 9174 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong CSS3 chúng ta có thể tạo màu sắc cho background theo biên độ giảm dần.

20 Ví Dụ Gradient CSS Cho Thiết Kế Website

  • Tác giả: final-blade.com
  • Đánh giá: 5 ⭐ ( 9679 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Gradient trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 7480 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Gradient trong CSS - Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Gradient Text CSS để dành trang điểm website

  • Tác giả: hocban.vn
  • Đánh giá: 4 ⭐ ( 9724 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây là bài viết nhằm lưu lại một số mẫu Gradient Text CSS để dành trang điểm website thôi chứ không có gì đặc biệt hết các bác ạ :v

Gradient là gì ? trong CSS3

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 4 ⭐ ( 8883 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Gradient là gì ? trong CSS3. Gradient biểu thị sự kết hợp của hai hay nhiều màu

Gradient – màu biến đổi tuyến tính trong CSS

  • Tác giả: nq.com.vn
  • Đánh giá: 4 ⭐ ( 4332 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Kiểm tra xem một chuỗi có chứa ký tự trong Java hay không - java nếu chuỗi chứa

By ads_php