Bộ xương html

Từ phía sau HTML, chúng tôi sẽ chỉ làm việc với một phần tử giữ chỗ duy nhất. To it been. Toàn bộ hoạt ảnh sẽ đi vào bên trong một. trước phần tử. Đây là phần tử giả thường được sử dụng để bổ sung mỹ phẩm vào phần tử đã chọn. Hãy coi phần tử giả như một từ khóa được thêm vào một bộ chọn cho phép bạn tạo kiểu cho các phần cụ thể của nó. Nhưng trước khi quan tâm đến nó, hãy xác định một số kiểu cho cha mẹ

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

7

Các quy tắc quan trọng được xác định ở trên là hai dòng cuối cùng. Chúng tôi sẽ định vị. before phần tử hoàn toàn vào vùng chứa của nó, vì vậy mục đích giữ chỗ cần phải có vị trí tương đối và được tràn đặt thành ẩn. Điều này sẽ ngăn không cho gradient hiển thị bên ngoài phần tử giữ chỗ của chúng tôi. Move to. before phần tử giả

Sử dụng phần tử giả

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

8

Please participation this code section

• Như bạn có thể thấy, vì chiều rộng của gradient là 150px, nên giá trị ban đầu của nó phải là -150px ở bên trái
• Một phần quan trọng khác là thuộc tính nền. Bạn muốn chuyển từ trong suốt sang trong suốt để hợp nhất hoàn hảo nó vào nền của vùng chứa. Màu của gradient chỉ được xác định chính xác ở mức 50%
• And đối với tải hoạt động ảnh, bạn sẽ cần sửa đổi thuộc tính bên trái

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

9

Với mọi vị trí phù hợp, điều này sẽ dẫn đến hoạt động của ảnh sau

 

 

Tóm tắt

Khi xử lý các hình ảnh động tinh tế, bạn có thể thấy rằng việc triển khai chúng không phải là nhiều việc. Tuy nhiên, trải nghiệm người dùng mà họ cung cấp vượt trội so với thời gian và nỗ lực dành cho họ

Nếu bạn cũng thay đổi chiều rộng cố định của gradient thành phần trăm, bạn cũng sẽ có thể sử dụng lại hoạt ảnh trên các định dạng và kích thước khác nhau. Bạn chỉ cần viết một lần, sau đó sử dụng tùy chọn thích

Hi xin chào các bạn, lâu rồi không có chủ đề bàn phím gì về CSS, trong thời buổi nóng nực thế này chúng ta sẽ cùng thư giãn với một chút CSS cho phần mềm mại nhé =)). Chủ đề hôm nay mình muốn giới thiệu đến các bạn đó là hiệu ứng

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

8 khi tải trang. Chắc chắn khi sử dụng các ứng dụng lớn như Facebook, Youtube,. bạn cũng đã gặp nó rồi

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

8 được hiểu đơn giản là một bộ khung được định hình trước thay thế cho phần nội dung bạn muốn hiển thị trong thời gian chờ dữ liệu được tải xong. Skeleton giúp nâng cao trải nghiệm người dùng (UX) và đặc biệt hữu ích trong trường hợp trang/ứng dụng của bạn có quá nhiều thứ để tải và quá nhiều thứ phải chờ đợi. Vì vậy, có cách nào để tự tạo ra

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

8 với một vài dòng CSS mà không cần phải mạnh tay để tác động lớn đến các thư viện không?

Hoàng Văn Hùng @hunghoangvan

Theo dõi

2. 2K 65 28

Đã đăng vào ngày 30 tháng 5 năm 2021 1. 51 SA 3 phút đọc

937

1

4

Skeleton loader - 10 điểm cho UX

• Report
• Add to series of me

Hi xin chào các bạn, lâu rồi không có chủ đề bàn phím gì về CSS, trong thời buổi nóng nực thế này chúng ta sẽ cùng thư giãn với một chút CSS cho phần mềm mại nhé =)). Chủ đề hôm nay mình muốn giới thiệu đến các bạn đó là hiệu ứng

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

8 khi tải trang. Chắc chắn khi sử dụng các ứng dụng lớn như Facebook, Youtube,. bạn cũng đã gặp nó rồi

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

8 được hiểu đơn giản là một bộ khung được định hình trước thay thế cho phần nội dung bạn muốn hiển thị trong thời gian chờ dữ liệu được tải xong. Skeleton giúp nâng cao trải nghiệm người dùng (UX) và đặc biệt hữu ích trong trường hợp trang/ứng dụng của bạn có quá nhiều thứ để tải và quá nhiều thứ phải chờ đợi. Vì vậy, có cách nào để tự tạo ra

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

8 với một vài dòng CSS mà không cần phải mạnh tay để tác động lớn đến các thư viện không?

Cùng xem qua 1 chút demo nhé

Trong ví dụ này, mình sẽ demo Skeleton với 1 dòng chứa tiêu đề và 1 dòng chứa nội dung (ảnh, văn bản,. ) khá giống với Facebook

1. Dựng HTML

Theo mô tả bên trên HTML của chúng ta sẽ như sau

<div class="container">
  <div class="placeholder title">div>
  <div class="placeholder content">div>
div>

Theo đó ta sẽ sử dụng lớp

.title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  min-height: 60px;
}

1 để tạo kiểu cho phần hiệu ứng Skeleton

2. Viết CSS

Trước tiên mình sẽ tạo kiểu cho phần

.title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  min-height: 60px;
}

2 có Skeleton, phần này thì không quan trọng lắm, tùy vào UI đề ra mà bạn sẽ tạo kiểu cho phù hợp với yêu cầu

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

Một chút CSS cho phần

.title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  min-height: 60px;
}

3 và

.title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  min-height: 60px;
}

4

.title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  min-height: 60px;
}

Tiếp theo ta sẽ định kiểu cho phần

.title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  min-height: 60px;
}

1 nơi hiệu ứng Skeleton sẽ hoạt động, phần nội dung sẽ như sau

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

4

Trong đó 2 thuộc tính quan trọng quyết định thành bại đó là

.title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  min-height: 60px;
}

6 => để tạo kiểu tuyệt đối cho phần

.title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  min-height: 60px;
}

7,

.title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  min-height: 60px;
}

8 Ngăn chặn nội dung tràn ra bên ngoài

Tiếp theo ta sẽ tạo kiểu cho phần

.title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  min-height: 60px;
}

7, phần sẽ nhận nhiệm vụ chạy hoạt hình

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

9

Như vậy ta sẽ sử dụng animation chạy với thuộc tính left để hiệu ứng chạy từ trái qua phải với số lần lặp lại là

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

40 khi animation được kích hoạt (các bạn chú ý đoạn này nhé)

Cuối cùng ta sẽ định nghĩa ra

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

41 để chạy hoạt hình kia đơn giản như sau

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

2

bùm. thế là bạn đã tạo xong rồi mã nguồn tổng hợp lại sẽ như sau

HTML

<div class="container">
  <div class="placeholder title">div>
  <div class="placeholder content">div>
div>

CSS

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

4

3. Thực hiện

lướt vào ngôn ngữ bạn đang sử dụng bạn sẽ cần cân nhắc thêm để phù hợp. Mình ví dụ đơn giản với luồng chạy.

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

42. Mô tả đơn giản bằng đoạn mã phản ứng sau

.container {
  width: 300px;
  padding: 10px;
  background: #eee;
  margin: auto;
}

6

4. Kết luận

Trên đây mình đã giới thiệu cho các bạn cách tạo Skeleton loader đơn giản chỉ với vài dòng CSS, trên thực tế có rất nhiều cách khác nhau mà bạn có thể tham khảo để phục vụ 1 cách tốt nhất cho công việc của mình

Nếu thấy bài viết hay thì hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút theo dõi để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công và hẹn gặp lại ở bài viết sau nhé