Đảo ngược css

Đã 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="https://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

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>

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>

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>

<div class="content"></div>

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;
}

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>

<div class="content"></div>

HTML

.gradient-text {
 background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 48px;
}

CSS

.gradient-text {
 background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 48px;
}

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;
}

CSS

.gradient-text {
 background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 48px;
}

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;
}

HTML

.gradient-text {
 background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 48px;
}

CSS

.gradient-text {
 background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 48px;
}

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;
}

HTML

.gradient-text {
 background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 48px;
}

CSS

.gradient-text {
 background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 48px;
}

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;
}

CSS

<p class="content">Niem vui lap trinh</p>

Và 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>

CSS

<p class="content">Niem vui lap trinh</p>

Và 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;
}

CSS

<p class="content">Niem vui lap trinh</p>

Và 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>

CSS

<p class="content">Niem vui lap trinh</p>

Và 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;
}

CSS

<p class="content">Niem vui lap trinh</p>

Và 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>

CSS

<p class="content">Niem vui lap trinh</p>

Và 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;
}

.content {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background: #1E90FF;
}

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 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;
}

HTML

body{
  font-size: 48px;
}
::selection {
  background: #1E90FF;
  color: #fff;
}
.content::selection {
  background: #1E90FF;
  color:  #fff;
}

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 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;
}

HTML

body{
  font-size: 48px;
}
::selection {
  background: #1E90FF;
  color: #fff;
}
.content::selection {
  background: #1E90FF;
  color:  #fff;
}

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 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;
}

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 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;
}

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 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;
}

<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>

<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>

HTML

body{
  font-size: 48px;
}
::selection {
  background: #1E90FF;
  color: #fff;
}
.content::selection {
  background: #1E90FF;
  color:  #fff;
}

CSS

<div class="content"></div>

Và 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ẻ