Chào các bạn đến với bài viết hôm nay, mình học web cũng khá lâu và cũng làm kha khá đồ án nhưng gần đây mình mới biết đến thuộc tính CSS Gradient này.
Mình vừa xem đã thấy màu sắc tạo nên đến từ thuộc tính này cực kỳ thu hút mắt mình, nên mình đã bật người dậy viết liền.
CSS Gradient: Gradient (màu chuyển sắc) cho phép hiển thị sự chuyển màu giữa hai hoặc nhiều màu sắc được chỉ định.
Thay vì dùng thuộc tính Color chỉ có một màu đơn giản thì Gradient nổi bật với sự chuyển sắc màu rực rỡ! Với khả năng sáng tạo của bản thân thì sẽ dễ dàng tạo ra một hình ảnh muôn màu muôn vẻ.
Không nói nhiều nữa, mình sẽ giới thiệu với các bạn dạng Gradient đầu tiên đây.
linear-gradient
Thuộc dạng chuyển màu sắc theo đường thẳng, để tạo ra nó chúng ta cần ít nhất hai điểm dừng màu.
Có hai kiểu Linearây là chuyển sắc theo hướng
Ở đây mình cài vị trí là to top, như vậy màu sắc sẽ hướng từ dưới lên trên. Vị trí có thể là: to left, right, bottom,…
Mỗi chỗ dấu phẩy có mã màu lần lượt là các điểm dừng màu sắc, ở trên mình đã set cho nó là ba điểm dừng.
Còn nếu bạn thích chuyển sắc theo góc nghiêng thì phải dùng đến số đo có đơn vị là deg, và góc nghiêng, bạn thích chỉnh sao thì chỉnh.
Mình chỉnh góc nghiêng là 150deg, ai muốn góc nghiêng như mong muốn thì có thể lấy thước đo độ đo thử xem sao ha. :v
Ngoài Linear-gradient ra thì chúng ta còn có thêm loại radial-gradient.
radial-gradient
Thuộc dạng chuyển sắc theo hình tròn hoặc hình ellipse, màu bắt đầu từ tâm của nó, giống như liner-gradient, muốn tạo ra radial-gradient cũng cần ít nhất hai điểm dừng màu.
Màu đầu tiên sẽ mặc định là tâm và mờ dần ra phía bên ngoài.
Có hai loại shape: hình tròn, ellipse
Với dạng chuyển màu theo hình ellipse, có hai size: closest-side và closest-corner
closest-side: gradient kết thúc khi shape chạm tới cạnh gần nhất so với tâm của đường tròn
Vị trí của gradient có đặt dưới dạng %, nhưng cũng có thể dùng left, right, center,…
Mặc dù mình đặt vị trí cho nó nhưng nó vẫn nằm gần nhất so với tâm của đường tròn hoặc cả vertical và horizontal của eclipse.
closest-corner: shape của gradient chạm tới các góc gần nhất kể từ tâm của shape.
Bạn có thể thấy tâm ellipse chạm tới góc gần nhất của chỗ chuyển màu của hồng và xanh.
Nói một cách ngắn gọn, nếu bạn muốn có hình ellipse lớn hơn trong hai thuộc tính thì hãy dùng closest-corner.
Chuyển màu theo hình tròn, có hai loại size farthest-side và farthest-corner
farthest-side: Ngược với closest-side, gradient kết thúc khi shape chạm tới các cạnh xa nhất của nó.
farthest-corner: ngược với closest-corner, gradient kết thúc khi shape của nó chạm tới các góc xa nhất kể từ tâm shape và đây là giá trị mặc định.
Giống với linear-gradient, repeating-linear-gradient cũng chuyển màu theo đường thẳng, khác ở chỗ là nó lặp lại cho đến khi đầy màn hình thì thôi.
repeating-linear-gradient
Hàm này được sử dụng để lặp lại các màu theo đường thẳng, cách sử dụng cũng tương tự linear-gradient vậy á.
Lưu ý phải có % cho sự lặp lại chỗ màu sắc mình mong muốn nha mọi người, nếu không là nó chả khác nào dùng linear-gradient dù lúc này mình đang sử dụng repeating-linear-gradient!
Tới lúc này bạn đã thấy sự thu hút mắt nhìn của gradient chưa? Nếu chưa thì chắc là do mình đặt màu xấu rồi. Mọi người hãy lựa chọn màu sắc ưa thích của bản thân và check thử ngay để chiêm ngưỡng vẻ đẹp 3d của hàm lặp màu này nha.
Ôi, với 120deg thì nhìn thích mắt hơn nhiều, ai đang thử thuộc tính này thì tìm ra góc độ ưa thích nhất cho bản thân luôn đê.
Còn giờ thì mình tiếp tục với gradient đầy sống động đây.
repeating-radial-gradient
So với hàm trên thì hàm dưới này là dạng lặp chuyển sắc theo hình tròn, cách sử dụng tương tự radial-gradient.
Đừng quên chỉ số % đặt sau mã màu nha quý vị.
Hàm này sử dụng trong như một mê cung tròn 3d luôn ý mọi người.
Dùng để làm banner cho trang web cũng khá là đẹp và bắt mắt nè mọi người.
Hoặc tạo làm ảnh bìa để so deep cũng không tệ.
Hi vọng với CSS Gradient sẽ giúp cho trang web nhà bạn trở nên sặc sỡ sống động hơn bao giờ hết, cảm ơn mọi người đã theo dõi đến cuối bài.
Huyền Nguyễn
PLT SOLUTIONS