Đã bao giờ bạn nghĩ đến việc chỉ sử dụng 1 tấm hình có màu bất kỳ để biến nó thành màu trắng hoặc đen chỉ bằng CSS chưa? . Với sự hỗ trợ của CSS đã giúp các nhà phát triển giảm tải được lượng công việc
1. Vấn đề
Nếu như trước đây, từ ban đầu logo ban đầu nếu bạn muốn sử dụng nó với màu trắng hoặc đen trên 1 nền để làm nổi bật chúng, bạn cần phải sử dụng photoshop để chuyển đổi thành màu sắc của logo đó. Nghĩa là chúng ta cần phải có 2 hình ảnh riêng biệt
2. Đổi màu cấu hình bằng CSS
Hôm nay mình xin chia sẻ với các bạn đang học wordpress cũng như Css căn bản một cách đổi hình ảnh sang màu trắng hoặc màu đen hết sức đơn giản chỉ bằng 1 dòng css thông qua thuộc tính filter
Trước tiên bạn cần phải có một HTML chứa hình ảnh trước đó, ví dụ như sau
<div id="my-out-img"><img src="//wpshare247.com/wp-content/uploads/2021/05/logo.png" /></div>2. 1 Đổi cấu hình sang màu đen bằng CSS
Constructor as after
#my-out-img img{ filter: brightness(0); -webkit-filter: brightness(0); }2. 2 Đổi cấu hình sang trắng bằng CSS
Constructor as after
#my-out-img img{ filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); }2. 3 Đổi cấu hình sang xám bằng CSS
#my-out-img img{ filter: grayscale(0); -webkit-filter: grayscale(0); }Như vậy bằng cách sử dụng thuộc tính bộ lọc với các giá trị độ sáng, đảo ngược, thang độ xám, chúng ta có thể đổi màu ảnh một cách dễ dàng không đúng. Hi vọng bài viết này giúp các bạn mới bắt đầu học thiết kế website biết thêm chút kiến thức bổ ích nhé
Trong bài viết hôm nay mình sẽ giới thiệu đến các bạn những kiến thức cơ bản hay được sử dụng trong CSS mà chúng ta nên ôm ấp trong quá trình phát triển và thiết kế website
CSS Thủ thuật
1) Cách Tạo Gradient Text Trong CSS
Để tạo chữ với gradient màu cho trang web, chúng ta cần nắm bắt các kiến thức cơ bản sau
- Sử dụng <div class="content"></div>1 để tạo nền gradient
- Sử dụng <div class="content"></div>2 để tạo màu trong suốt cho văn bản
- Use <div class="content"></div>3 to setting color gradient for text
HTML
<p class="gradient-text">Niem vui lap trinh</p>CSS
________số 8_______Và kết quả bạn xem bên dưới nha
See the Pen Untitled by haycuoilennao19 (@haycuoilennao19) on CodePen
Nếu bạn muốn tham khảo thêm về gradient thì có thể truy cập các đường dẫn bên dưới nha
Cách Sử Dụng Gradient CSS Cho Thiết Kế Trang Web
2) Cách Thay Đổi Màu Cho Chọn Văn Bản
Chúng ta sẽ sử dụng <div class="content"></div>4 nhẹ nhàng thiết lập màu sắc cho văn bản và nền khi người dùng lựa chọn văn bản trong trang web thông qua đoạn mã sau nha
HTML
<p class="content">Niem vui lap trinh</p>CSS
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
Và kết quả các bạn xem dưới đây nha
Xem Màu bút chọn chữ của haycuoilennao19 (@haycuoilennao19) trên CodePen
3) Cách Tạo Hình Tròn Bằng CSS
Trong phần này mình sẽ hướng dẫn bạn cách tạo hình tròn bằng CSS thông qua việc thiết lập giá trị cho thuộc tính <div class="content"></div>5. Ngoài ra mình còn có một lưu ý quan trọng là bạn phải thiết lập chiều cao (chiều cao) và chiều rộng (độ rộng) của các phần tử phải bằng nhau nha. Để hiểu rõ hơn bạn xem đoạn mã sau nha
HTML
<div class="content"></div>CSS
.content {border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
Và kết quả các bạn xem dưới đây nha
Xem Bút tạo vòng tròn css của haycuoilennao19 (@haycuoilennao19) trên CodePen
Nếu bạn muốn tham khảo thêm về cách tạo các chữ nhật, hình thang. thì có truy cập đường dẫn bên dưới nha
Xây dựng CSS Shape Hiệu quả Trong Thiết kế Web
4) Cắt ngắn văn bản
Khi chúng ta có một đoạn văn bản quá dài và cần rút gọn thì bạn nên sử dụng tính năng cắt bớt văn bản bằng cách kết hợp các thuộc tính CSS như đoạn mã sau
HTML
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
CSS
.content {overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 250px;
}
Và kết quả các bạn xem dưới đây nha
Xem css văn bản Pen Truncate của haycuoilennao19 (@haycuoilennao19) trên CodePen
5) Cách Tạo Hiệu Ứng Zoom Out Animation
Trong phần này mình sẽ hướng dẫn bạn cách tạo hiệu ứng chuyển động phóng to và thu nhỏ cho các đối tượng trong trang HTML thông qua đoạn mã sau nha
HTML
<div class="content"></div>CSS
.content {margin: 24px;
width: 80px;
height: 80px;
background: #1E90FF;
animation: animation 1s ease infinite;
}
@keyframes animation {
0% {
transform: scale(0.8, 0.8);
}
50% {
transform: scale(1.6, 1.6);
}
100% {
transform: scale(0.8, 0.8);
}
}
Và kết quả các bạn xem dưới đây nha
Xem hoạt hình Bút phóng to thu nhỏ bởi haycuoilennao19 (@haycuoilennao19) trên CodePen
Nếu bạn muốn tham khảo thêm về các hiệu ứng phóng to và thu nhỏ cho trang web, hãy truy cập đường dẫn bên dưới nha
20 Zoom Effect CSS Javascript Cho Website
6) Cách tạo Loader bằng CSS
Trong phần này mình sẽ hướng dẫn bạn cách tạo loader đơn giản trong CSS bằng các thuộc tính <div class="content"></div>6 và <div class="content"></div>7 thông qua đoạn mã bên dưới nha.
HTML
<div class="content"></div>CSS
.gradient-text {background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 48px;
}
1
Và kết quả các bạn xem dưới đây nha
Xem Pen Tạo Lodaer CSS của haycuoilennao19 (@haycuoilennao19) trên CodePen
Nếu bạn muốn tham khảo thêm về các hiệu ứng loader và spinner cho trang web, hãy truy cập đường dẫn bên dưới nha
35 Hiệu Ứng Loader CSS Javascript Cho Website
7) Cách Tạo Drop cap
Thông thường khi bạn đọc một bài báo thì sẽ thường thấy các ký tự đầu tiên của chữ cái đầu tiên trong văn bản sẽ có kích thước lớn hơn và màu sắc sẽ khác với các chữ cái còn lại trong nội dung. Trong phần này, mình sẽ hướng dẫn bạn làm hiệu ứng trên thông qua bộ chọn <div class="content"></div>8 và <div class="content"></div>9. Để hiểu rõ hơn bạn hãy xem đoạn mã dưới đây
HTML
.gradient-text {background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 48px;
}
2
CSS
.gradient-text {background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 48px;
}
3
Và kết quả các bạn xem dưới đây nha
Xem Pen cach tao drop cap của haycuoilennao19 (@haycuoilennao19) trên CodePen
8) Cách Custom Scrollbar
Trong phần này, mình sẽ hướng dẫn bạn cách thiết lập lại màu sắc cho thanh cuộn thông qua thuộc tính bộ chọn .content {
border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
0. Để hiểu rõ hơn bạn xem đoạn mã sau nha
CSS
.gradient-text {background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 48px;
}
4
Kết quả bạn xem bên dưới nha
Xem Pen Ví Dụ Scrollbar sử dụng thu vien Overlay Scrollbars của haycuoilennao19 (@haycuoilennao19) trên CodePen
Nếu bạn muốn tìm hiểu thêm về setting style cho scrollbar thì truy cập đường dẫn bên dưới nha
Cách Tạo Scrollbar Chợ Trang Web
9) Sử dụng Counter CSS
Mình sẽ hướng dẫn các bạn cách tạo bộ đếm cho thẻ danh sách HTML thông qua thuộc tính .content {
border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
1 CSS bằng đoạn mã dưới đây nha
HTML
.gradient-text {background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 48px;
}
5
CSS
.gradient-text {background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 48px;
}
6
Và kết quả các bạn xem dưới đây nha
Xem Pen tạo counter css của haycuoilennao19 (@haycuoilennao19) trên CodePen
10) Cách Tạo Knockout Text
Nếu bạn muốn làm nổi bật nội dung của mình thì có thể sử dụng thuộc tính .content {
border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
2 trong CSS để kết hợp một phần tử với nền của phần tử chứa nó. Để dễ hình dung hơn bạn xem ví dụ dưới đây nhé
HTML
.gradient-text {background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 48px;
}
7
CSS
.gradient-text {background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 48px;
}
8
Và kết quả các bạn xem dưới đây nha
Xem Pen cach tao Knockout Text của haycuoilennao19 (@haycuoilennao19) trên CodePen
Nếu bạn muốn tham khảo thêm về các ví dụ gõ văn bản kahcs thì truy cập đường dẫn bên dưới nha
Cách Tạo Knockout Text
11) Phần tử trung tâm trong CSS
Trong phần này mình sẽ hướng dẫn bạn cách trung tâm phần tử trong CSS thông qua đoạn mã sau
HTML
.gradient-text {background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 48px;
}
9
CSS
<p class="content">Niem vui lap trinh</p>0Và kết quả các bạn xem dưới đây nha
Xem trung tâm Bút cách phan tu của haycuoilennao19 (@haycuoilennao19) trên CodePen
Nếu bạn muốn tìm hiểu thêm về cách canh giữa các phần tử trong CSS như sử dụng flexxbox, grid. thì có thể truy cập đường dẫn bên dưới nha
Những Cách Trung Tâm CSS Mà Bạn Nên Biết
12) Nút Menu Cách Tạo Di động
Trong phần này mình sẽ hướng dẫn các bạn cách thiết lập nút hambuger cho website thông qua đoạn mã sau nha
HTML
<p class="content">Niem vui lap trinh</p>1CSS
<p class="content">Niem vui lap trinh</p>2Và kết quả các bạn xem dưới đây nha
Xem nút menu Pen tao mobile của haycuoilennao19 (@haycuoilennao19) trên CodePen
Nếu bạn muốn tham khảo thêm về menu di động thì truy cập đường dẫn bên dưới nha
25 Menu Responsive Cho Mobile Trọng Phát Triển Web
13) Cách Tạo Image Responsive CSS
Để hiển thị hình ảnh trên nhiều màn hình thiết bị khác nhau, bạn có thể sử dụng thuộc tính CSS sau đây cho thẻ .content {
border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
3
CSS
<p class="content">Niem vui lap trinh</p>3Và kết quả các bạn xem dưới đây nha
Xem Pen Hiển thị hình ảnh phản hồi của haycuoilennao19 (@haycuoilennao19) trên CodePen
14) Cách Tạo Chữ Xung Quanh Hình Ảnh
Đôi khi bạn cần hình ảnh minh họa trong đoạn văn của mình và thật tuyệt vời khi chúng ta có thể làm cho nó giống như trong Word là để hiển thị xung quanh hình ảnh. Để hiểu rõ hơn bạn xem đoạn mã sau nha
HTML
<p class="content">Niem vui lap trinh</p>4CSS
<p class="content">Niem vui lap trinh</p>5Và kết quả các bạn xem dưới đây nha
See the Pen text around image by haycuoilennao19 (@haycuoilennao19) trên CodePen
15) Lọc CSS
Trong CSS cho phép chúng ta tạo các hiệu ứng trực tiếp cho hình ảnh mà không cần sử dụng đến Photoshop và thường được sử dụng với thẻ .content {
border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
4 Sau đây là một số thuộc tính thông tin ứng dụng, bạn tham khảo ở bên dưới nhé
CSS
<p class="content">Niem vui lap trinh</p>6Và kết quả các bạn xem dưới đây nha
Xem Bút hiệu ứng hình anh CSS của haycuoilennao19 (@haycuoilennao19) trên CodePen
16) Vị Trí Văn Trong Hình
Trong phần này mình sẽ hướng dẫn bạn cách thiết lập ví trí nội dung trong hình nền thông qua đoạn mã sau nha
HTML
<p class="content">Niem vui lap trinh</p>7CSS
<p class="content">Niem vui lap trinh</p>8Và kết quả các bạn xem dưới đây nha
Xem Bút Hình Ảnh Với Nội Dung của haycuoilennao19 (@haycuoilennao19) trên CodePen
Nếu bạn muốn tham khảo thêm về việc kết hợp nội dung với hình ảnh trong CSS thì truy cập đường dẫn bên dưới nha
Design Design Text Image CSS Cho Website
17) Xác Định Vị Trí Giữ Chỗ Trong Ô Đầu Vào
Chúng ta có thể sử dụng thuộc tính quen thuộc là .content {
border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
5 để căn chỉnh vị trí .content {
border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
6 trong ô đầu vào. Và để hiểu rõ hơn bạn xem đoạn mã sau nha
HTML
<p class="content">Niem vui lap trinh</p>9CSS
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
0
Và kết quả các bạn xem dưới đây nha
Xem placeholder Căn chỉnh vị trí của haycuoilennao19 (@haycuoilennao19) trên CodePen
18) Cách Vô hiệu hóa lựa chọn văn bản
Vì một lý do nào đó mà bạn không muốn người dùng có thể sao chép nội dung văn bản trên trang web của mình, thì họ có thể sử dụng thuộc tính .content {
border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
7 trong CSS. Và để hiểu rõ hơn bạn xem đoạn mã sau đây nhé
HTML
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
1
CSS
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
2
Và kết quả các bạn xem dưới đây nha
Xem Bút không cho phep text-select của haycuoilennao19 (@haycuoilennao19) trên CodePen
19) Cách Ẩn Đối Tượng Trong Trang Web
Trong phần này chúng ta sẽ đi vào phần tìm hiểu sử dụng thuộc tính .content {
border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
8 để ẩn các đối tượng trong trang HTML thông qua đoạn mã sau nha
HTML
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
3
CSS
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
4
Và kết quả các bạn xem dưới đây nha
Xem Trưng Bày Bút Sư Dung. Không Trong CSS bởi haycuoilennao19 (@haycuoilennao19) trên CodePen
Nếu bạn muốn tham khảo thêm cách ẩn đối tượng cho đối tượng trong website thì truy cập đường dẫn bên dưới nha
Những Cách Ẩn Đối Tượng Trong Trang Web Bằng CSS
20) Cách Tạo Hiệu Ứng Glass Effect
Bây giờ mình sẽ giới thiệu cho các bạn cách tạo hiệu ứng kính dành cho các phần tử trong HTML thông qua đoạn code sau nha
HTML
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
5
CSS
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
6
Và kết quả các bạn xem dưới đây nha
Xem HTML CSS hiệu ứng Pen Frosted Glass của haycuoilennao19 (@haycuoilennao19) trên CodePen
Nếu bạn muốn tham khảo các hiệu ứng kính khác nhau, hãy truy cập đường dẫn bên dưới nha
Cách Tạo Hiệu Ứng Kính
21) Hiệu Ứng Đánh Chữ CSS
Phần tiếp theo chúng ta sẽ đi vào tìm hiểu ví dụ cách tạo hiệu ứng viết kiểu chữ bằng các thuộc tính CSS thông qua đoạn mã sau nha
HTML
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
7
CSS
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
8
Và kết quả các bạn xem dưới đây nha
Xem Pen Hieu ung danh chu html css by haycuoilennao19 (@haycuoilennao19) trên CodePen
22) Cách Tạo Ảnh Nền CSS Toàn Màn Hình
Trong phần này, mình sẽ sử dụng hình ảnh làm nền hiển thị toàn màn hình thông qua các thuộc tính là .content {
border-radius: 50%;
width: 48px;
height: 48px;
background: #1E90FF;
}
9 và <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>0. Ngoài ra, bạn cũng nên tham khảo thêm một cách mới để thiết lập đối tượng với vị trí chính giữa thông qua thuộc tính <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>1. To known more than you view đoạn code after nhé
HTML
body{font-size: 48px;
}
::selection {
background: #1E90FF;
color: #fff;
}
.content::selection {
background: #1E90FF;
color: #fff;
}
9
CSS
<div class="content"></div>0Và kết quả các bạn xem dưới đây nha
Xem Pen cach tao CSS Background Image Full Screen by haycuoilennao19 (@haycuoilennao19) trên CodePen
Tổng kết
Qua đây mình mong bài viết sẽ cung cấp thêm cho các bạn những kiến thức hữu ích CSS phục vụ cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ