Tóm Tắt
I. Giới thiệu
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.
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:
6
rem 1
rem;
margin:
4
rem;
font-
size:
50
px;
}
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:
6
rem 1
rem;
margin:
4
rem;
font-
size:
50
px;
}
Kết quả
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:
400
px;
height:
200
px;
max-
width:
100
%
;
margin:
1
rem auto;
display:
flex;
align-
items:
center;
justify-
content:
center;
font-
size:
2
rem;
}
.
border-
gradient {
border:
10
px solid;
border-
image-
source:
linear-
gradient
(
45
deg,
#1b2a49, #bada55);
border-
image-
slice:
1
;
}
Kết quả border
gradient bạn xem bên dưới nhé:
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:
100
px;
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ả
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:
<
ul>
<
li>
Phần T
ử 1
<
/
li>
<
li>
Phần T
ử 2
<
/
li>
<
li>
Phần T
ử 3
<
/
li>
<
/
ul>
CSS:
ul {
display:
block;
margin-
left:
-
10
px;
}
ul li {
display:
block;
position:
relative;
font-
size:
50
px;
}
ul li:
before {
content:
""
;
position:
absolute;
top:
1.2
em;
left:
-
30
px;
margin-
top:
-
0.9
em;
background:
linear-
gradient
(
to right,
#8360c3, #2ebf91);
height:
25
px;
width:
25
px;
border-
radius:
50
%
;
}
Và kết quả
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"
>
Niềm Vui L
ập Trình<
/
div>
CSS:
body {
background:
#f2f2f2;
text-
align:
center;
font-
size:
50
px;
}
.
noi-
dung {
background-
image:
linear-
gradient
(
to bottom,
rgb
(
0
,
159
,
255
,
0.5
)
,
rgb
(
236
,
47
,
75
,
0.8
)
)
,
url
(
'https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/pexels-paul-ijsendoorn-33041.jpg'
)
;
width:
100
%
;
height:
400
px;
background-
size:
cover;
color:
white;
padding:
20
px;
}
Và kết quả
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:
<
button class
=
"btn"
>
Niềm Vui L
ập Trình<
/
button>
CSS:
.
btn {
background-
image:
linear-
gradient
(
to right,
#B3FFAB 0%, #12FFF7 51%, #B3FFAB 100%)}
.
btn {
margin:
10
px;
padding:
15
px 45
px;
text-
align:
center;
text-
transform:
uppercase;
transition:
0.5
s;
background-
size:
200
%
auto;
color:
white;
box-
shadow:
0
0
20
px #eee;
border-
radius:
10
px;
display:
block;
border:
none;
cursor:
pointer;
}
.
btn:
hover {
background-
position:
right center;
color:
#fff;
text-
decoratio
}
Và kết quả bạn xem bên dưới
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/