Radial-gradient trong CSS

Linear Gradient được sử dụng để sắp xếp hai hoặc nhiều màu trong các định dạng tuyến tính, ví dụ như định dạng từ trên xuống dưới [Top to Bottom]

Từ trên xuống dưới

   
      
   
   
      
   
 

Kết quả là

Trái sang phải

   
      
   
   
      
   
 

Kết quả là

Đường chéo trong CSS

Đường chéo bắt đầu từ góc trái trên cùng và góc phải dưới cùng

   
      
   
   
      
   
 

Kết quả là

Nhiều màu trong CSS

   
      
   
   
      
   
 

Kết quả là

Radial Gradient trong CSS

Radial Gradient xuất hiện tại vị trí trung tâm

   
      
   
   
      
   
 

Kết quả là

Lặp lại Radial Gradient trong CSS

   
      
   
   
      
   
 

Kết quả là

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng. miễn phí. Tải ngay ứng dụng trên Android và iOS

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube

Theo dõi fanpage của nhóm https. //www. Facebook. com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https. //www. Facebook. com/tuyen. vietjack to continue theo dõi hàng loạt bài viết mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile. mới nhất của chúng tôi

Gradient - color change linear variable in CSS - QuanTriMang. com

định lượng. com

Thông báo

  • công nghệ
  • cửa sổ 10
  • điện thoại Iphone
  • Android
  • Làng CN
  • Khoa học
  • Ứng dụng
  • Học CNTT
  • Trò chơi
  • Tải xuống
  • Tiện ích
  • all

Học CNTT CSS và CSS3

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

Quách Tỉnh

Bài trước

lục mục

bài sau

Chuyển màu - biến đổi màu tuyến tính trong CSS cho phép tạo ra các phần tử có màu nền nền là các hiệu ứng chuyển màu giữa hai hoặc nhiều màu sắc được chỉ định

Có 2 loại Gradient được CSS hỗ trợ

  • Độ dốc tuyến tính. Quét màu phát từ 1 phía, có thể theo chiều lên, xuống, trái, phải, đường chéo
  • Độ dốc xuyên tâm. Quét màu phát từ tâm

Độ dốc tuyến tính

Để tạo một Linear Gradient, cần phải xác định ít nhất hai điểm dừng của màu. Điểm dừng màu là các màu bạn muốn hiển thị chuyển tiếp

Bạn có thể xác định thêm các hướng [direction] hoặc góc [góc] bắt đầu hiệu ứng chuyển màu. Some direction format as

  • đứng đầu
  • xuống dưới
  • xuống dưới cùng bên phải
  • bên phải
  • sang trái
  • ...

Cú pháp Linear Gradient

background-image: linear-gradient[direction, color-stop1, color-stop2, ...];

Tham số

  • phương hướng. Hướng để xác định điểm bắt đầu hiệu ứng chuyển màu [to bottom, to top, to right, to left, to bottom right. ]
  • dừng màu1, dừng màu2. Các điểm dừng màu. Một điểm dừng màu bao gồm một giá trị màu và tùy chọn vị trí dừng [theo Tỷ lệ phần trăm từ 0% đến 100% hoặc theo chiều dọc trục gradient]

Ví dụ

1. Linear Gradient - Top to Bottom [Hướng mặc định]

Ví dụ sau đây biểu diễn một Linear Gradient bắt đầu từ phía trên [trên cùng]. Linear Gradient bắt đầu bằng màu tím và chuyển dần sang màu hồng

#grad {
background-image: linear-gradient[purple, pink];
}

________số 8_______

Lưu ý . Internet Explorer 9 và các phiên bản trước đó không hỗ trợ gradient.

2. Gradient tuyến tính - Trái sang phải

Ví dụ sau đây biểu diễn một Linear Gradient bắt đầu từ bên trái. Linear Gradient bắt đầu bằng màu tím và chuyển dần sang màu hồng

#grad {
background-image: linear-gradient[to right, purple, pink];
}





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[to right, purple, pink];
}




Linear Gradient - Left to Right






3. Gradient tuyến tính - Đường chéo [Hướng chéo]

Bạn có thể tạo gradient theo đường chéo bằng cách xác định cả hướng dọc và ngang

Ví dụ sau đây biểu diễn một Linear Gradient bắt đầu từ trên cùng bên trái [và đi xuống dưới cùng bên phải]. Linear Gradient bắt đầu bằng màu tím và chuyển dần sang màu hồng

#grad {
background-image: linear-gradient[to bottom right, purple, pink];
}





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[to bottom right, purple, pink];
}




Linear Gradient - Diagonal






Sử dụng Góc [Angle]

Bạn có thể lựa chọn một cách khác để định dạng kiểu gradient đó là sử dụng góc thay vì xác định hướng [đến dưới, lên trên, sang phải, sang trái, xuống dưới bên phải. ] bằng cách sử dụng cú pháp sau

background-image: linear-gradient[angle, color-stop1, color-stop2];

Tham số

  • Góc. xác định gốc bởi đường ngang và đường Gradient ngược chiều của kim đồng hồ. Hay nói cách khác 0deg sẽ tạo Gradient từ dưới lên trên, 90deg sẽ tạo Gradient từ trái sang phải

Ví dụ. Sử dụng góc trong Linear Gradient

#grad {
background-image: linear-gradient[-90deg, purple, pink];
}





div { font-family: arial; padding-top: 50px; padding-bottom: 50px; }

#grad1 {
background-color: red; /* Dành cho các trình duyệt không hỗ trợ gradient */
background-image: linear-gradient[0deg, purple, pink];
}

#grad2 {
background-color: red; /* Dành cho các trình duyệt không hỗ trợ gradient */
background-image: linear-gradient[90deg, purple, pink];
}

#grad3 {
background-color: red; /* Dành cho các trình duyệt không hỗ trợ gradient */
background-image: linear-gradient[180deg, purple, pink];
}

#grad4 {
background-color: red; /* Dành cho các trình duyệt không hỗ trợ gradient */
background-image: linear-gradient[-90deg, purple, pink];
}




Linear Gradient - Sử dụng Angle



0deg


90deg


180deg


-90deg



Sử dụng nhiều điểm dừng màu

Ví dụ sau đây để thấy một Linear Gradient [từ trên xuống dưới] với nhiều điểm dừng màu

3 point stop color cách đều nhau

#grad {
background-image: linear-gradient[purple, pink];
}
0

7 point stop color cách đều nhau

#grad {
background-image: linear-gradient[purple, pink];
}
1

3 điểm dừng màu không cách đều nhau

#grad {
background-image: linear-gradient[purple, pink];
}
2

Chú thích. Nếu không chỉ định giá trị % theo sau mỗi điểm dừng màu, thì gradient tự động cách đều nhau

Full code

#grad {
background-image: linear-gradient[purple, pink];
}
3

7 point stop color cách đều nhau từ trái sang phải

#grad {
background-image: linear-gradient[purple, pink];
}
4

#grad {
background-image: linear-gradient[purple, pink];
}
5

Sử dụng Transparency

Ngoài những cách sử dụng chuyển màu như trên, bạn có thể sử dụng độ trong suốt - transparent trong CSS để tạo hiệu ứng mờ dần kiểu gradient

Để bổ sung độ trong suốt cho màu, bạn sử dụng Màu RGBA như đã giới thiệu ở bài học chuyên sâu về màu sắc để xác định các điểm dừng màu. Tham số cuối trong RGBA[] quy định độ mờ/độ trong suốt của màu sắc, có giá trị từ 0. 0 - 1. 0, giá trị càng nhỏ thì độ trong suốt càng nhiều

Ví dụ. Một gradient tuyến tính nền bắt đầu với màu trong suốt hoàn toàn và chuyển dần dần về màu tím

#grad {
background-image: linear-gradient[purple, pink];
}
6

#grad {
background-image: linear-gradient[purple, pink];
}
7

lặp lại một Linear Gradient

Hàm repeat-linear-gradient[] được sử dụng để lặp lại các Linear Gradient

#grad {
background-image: linear-gradient[purple, pink];
}
8

#grad {
background-image: linear-gradient[purple, pink];
}
9





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[purple, pink];
}




Linear Gradient - Top to Bottom






0





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[purple, pink];
}




Linear Gradient - Top to Bottom






1

Full code





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[purple, pink];
}




Linear Gradient - Top to Bottom






2

Độ dốc xuyên tâm

Radial Gradient tạo hiệu ứng chuyển màu xuất phát từ tâm của phần tử

Để tạo một Radial Gradient, bạn cũng phải xác định ít nhất hai điểm dừng màu

Cú pháp Radial Gradient





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[purple, pink];
}




Linear Gradient - Top to Bottom






3

Tham số

  • hình dạng. Specify the format of gradient. Các giá trị khả thi
    • ellipse [default]
    • vòng tròn
  • kích cỡ. Specify the size of gradient. Các giá trị khả thi
    • góc xa nhất [default]
    • phía gần nhất
    • góc gần nhất
    • phía xa nhất
  • chức vụ. Specify the position of gradient, default is from tâm
  • màu bắt đầu. màu cuối cùng. Các điểm dừng màu. Một điểm dừng màu bao gồm một giá trị màu và tùy chọn vị trí dừng [theo Tỷ lệ phần trăm từ 0% đến 100% hoặc theo chiều dọc trục gradient]

Ví dụ

1. Các điểm dừng màu cách đều nhau





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[purple, pink];
}




Linear Gradient - Top to Bottom






4





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[purple, pink];
}




Linear Gradient - Top to Bottom






5

2. Các điểm dừng màu không cách đều nhau





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[purple, pink];
}




Linear Gradient - Top to Bottom






6





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[purple, pink];
}




Linear Gradient - Top to Bottom






7

Tham số value value

Tham số hình dạng được sử dụng để xác định hình dạng của gradient, nó có thể là giá trị hình tròn [hình tròn] hoặc hình elip [hình elip]

Ví dụ một gradient xuất phát từ tâm với hình dạng là hình tròn





#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[purple, pink];
}




Linear Gradient - Top to Bottom






8




#grad1 {
height: 200px;
background-color: purple; /* Dành cho các trình duyệt không hỗ trợ gradient*/
background-image: linear-gradient[purple, pink];
}




Linear Gradient - Top to Bottom






9

Tham số value value

Tham số kích thước xác định kích thước của gradient. Các giá trị khả thi

  • góc xa nhất [default]
  • phía gần nhất
  • góc gần nhất
  • phía xa nhất

phía gần nhất

#grad {
background-image: linear-gradient[to right, purple, pink];
}
0

phía xa nhất

#grad {
background-image: linear-gradient[to right, purple, pink];
}
1

góc gần nhất.

#grad {
background-image: linear-gradient[to right, purple, pink];
}
2

góc xa nhất [default]

#grad {
background-image: linear-gradient[to right, purple, pink];
}
3

Mã đầy đủ.

#grad {
background-image: linear-gradient[to right, purple, pink];
}
4

lặp lại một Radial Gradient

Hàm repeat-radial-gradient[] được sử dụng để lặp lại các Radial Gradient

#grad {
background-image: linear-gradient[to right, purple, pink];
}
5

#grad {
background-image: linear-gradient[to right, purple, pink];
}
6

Bài trước. Tìm hiểu sâu về Color trong CSS

Bài tiếp theo. Hiệu ứng Shadow trong CSS

  • Standard color table to setting user, designer
  • Bảng mã màu CSS, mã màu chuẩn trong thiết kế website
  • Chinatown Market ra mắt mẫu giày Converse Chuck 70 đổi màu theo ánh sáng
  • Tìm hiểu sâu về Color trong CSS

Thứ Sáu, 31/05/2019 08. 05

4,713 👨 44. 520

#CSS

0 Bình luận

Sắp xếp theo

Delete Login to Send

Bạn nên đọc

  • Windows 10 Spring Creators kéo dài ngày ra mắt sự cố
  • Thao tác với máy tính nhanh hơn [Phần 2]
  • Hướng dẫn xung đột CPU
  • 6 ứng dụng miễn phí để tạo meme trên iPhone hoặc iPad
  • Tập đoàn Intel sắp giới thiệu mục tiêu đầu tư mới
  • Nokia X7. 10 điều bạn cần biết

CSS và CSS3

  • TOP code CSS xếp hạng sao [Star Rating] đẹp cho website
Xem thêm

CSS và CSS3

  • CSS cơ bản
    • CSS giới thiệu
    • Cú pháp và Selector CSS
    • Vị trí đặt CSS
    • CSS - Màu
    • CSS - Nền
    • CSS - Đường viền
    • CSS - Ký quỹ
    • CSS - Đệm
    • CSS - Chiều rộng và Chiều cao
    • CSS - Mô hình hộp
    • CSS - Phác thảo
    • CSS - Văn bản
    • CSS - Phông chữ
    • CSS - Biểu tượng
    • CSS - Liên kết
    • CSS - Tạo danh sách
    • CSS - Bảng
    • CSS - Hiển thị
    • CSS - Chiều rộng tối đa
    • CSS - Vị trí
    • CSS - tràn
    • CSS - Float và Clear
    • CSS - Khối nội tuyến
    • CSS - Căn chỉnh
    • CSS - Trình kết hợp
    • CSS - Lớp giả
    • CSS - Phần tử giả
    • CSS - Độ mờ
    • CSS - Thanh điều hướng
    • CSS - Trình đơn thả xuống
    • CSS - Thư viện hình ảnh
    • CSS - Sprite hình ảnh
    • CSS - Bộ chọn thuộc tính
    • CSS - Biểu mẫu
    • CSS - Bộ đếm
    • CSS - Bố cục
    • CSS - Đơn vị
    • CSS - Tính đặc hiệu
  • nâng cao CSS
    • CSS - Góc bo tròn
    • CSS - Hình ảnh đường viền
    • CSS - Nhiều nền
    • CSS - Màu
    • CSS - Chuyển màu
    • CSS - Hiệu ứng đổ bóng
    • CSS - Hiệu ứng văn bản
    • CSS - Phông chữ web
    • CSS - Chuyển đổi 2D
    • CSS - Chuyển đổi 3D
    • CSS - Chuyển đổi
    • CSS - Hoạt hình
    • CSS - Chú giải công cụ
    • CSS - Flexbox
    • CSS - Nút
    • CSS- @media
    • Tạo hiệu ứng hover node bằng CSS

  • công nghệ
    • Ứng dụng
    • hệ thống
    • Game - Trò chơi
    • điện thoại Iphone
    • Android
    • Linux
    • Nền web
    • Đồng hồ thông minh
    • Chụp ảnh - Quay phim
    • hệ điều hành Mac
    • Phần cứng
    • SEO thủ thuật
    • base format
    • quả mâm xôi
    • Dịch vụ ngân hàng
    • Lập trình
    • Online service
    • Dịch vụ nhà mạng
    • Nhà thông minh
  • Tải xuống
    • Ứng dụng văn phòng
    • Tải game
    • Hệ thống tiện ích
    • Ảnh, đồ họa
    • Internet
    • Bảo mật, Antivirus
    • Họp, học trực tuyến
    • Video, phim, nhạc
    • Thư
    • Lưu trữ đám mây
    • Giao tiếp, liên lạc, hẹn hò
    • Support for learning
    • Máy ảo
  • Tiện ích
  • Khoa học
    • Khoa học vui
    • Khám phá khoa học
    • Bí ẩn - Chuyện lạ
    • Chăm sóc sức khỏe
    • Khoa học Vũ trụ
    • Khám phá thiên nhiên
  • Điện máy
    • tủ lạnh
    • tivi
    • Điều hòa
    • Máy giặt
  • Cuộc sống
    • Kỹ năng
    • Món ngon mỗi ngày
    • làm đẹp
    • nuôi dạy con
    • Chăm sóc nhà cửa
    • Kinh nghiệm Du lịch
    • Halloween
    • mẹo vặt
    • giáng sinh - noel
    • tết 2023
    • quà tặng
    • Giải trí
    • Là gì?
    • nhà đẹp
    • ĐỨNG ĐẦU
    • phong thủy
  • Băng hình
    • công nghệ
    • Phòng thí nghiệm của Cisco
    • Phòng thí nghiệm của Microsoft
    • Video Khoa học
  • Ô tô, Xe máy
    • Giấy phép lái xe
  • Làng công nghệ
    • Tấn công mạng
    • Công nghệ
    • new technology
    • Trí tuệ nhân tạo [AI]
    • Anh tài công nghệ
    • Bình luận công nghệ
    • Tổng hợp
  • Học CNTT
    • quiz technology
    • Microsoft Word 2016
    • Microsoft Word 2013
    • Word 2007
    • Excel 2019
    • Excel 2016
    • Hàm Excel
    • Microsoft PowerPoint 2019
    • Microsoft PowerPoint 2016
    • Google Trang tính - Trang tính
    • mẫu mã
    • photoshop CS6
    • photoshop CS5
    • HTML
    • CSS và CSS3
    • con trăn
    • Học SQL
    • Lập trình C
    • Lập trình C++
    • Lập trình C#
    • Học HTTP
    • Bootstrap
    • Máy chủ SQL
    • JavaScript
    • Học PHP
    • jQuery
    • Học MongoDB
    • Unix/Linux
    • Học Git
    • NodeJS

Giới thiệu. Điều khoản. bảo mật. Hướng dẫn. Ứng dụng. Liên hệ. Quảng cáo. Facebook. YouTube. DMCA

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản. CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm

Bản quyền © 2003-2023 QuanTriMang. com. Giữ toàn quyền. Không thể sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc về QuanTriMang. com khi chưa được cấp phép

Chủ Đề