Thiết kế thẻ ID trường học trong html

Question

Tìm hiểu cách tạo thẻ hồ sơ bằng CSS

Nội dung chính Show

Bối cảnh toàn trang
Tại sao lại sử dụng

Test

7 chứ không phải

Test

8 cho chiều cao?
Tại sao

Test

74 Trên cơ thể?
Định tâm bằng Flexbox
Đợi đã,

92 lại là gì?
Tại sao

Test

01 không căn giữa

Test

02 theo chiều dọc?**
Flexbox lồng nhau
Hình ảnh hồ sơ cá nhân
Tạo vòng cung trong CSS
Hoạt hình The Arcs
Sử dụng phông chữ khoa học viễn tưởng của Google
Thêm ánh sáng
kết thúc
Làm thế nào để tạo thẻ ID sinh viên trong HTML?
Làm cách nào để tạo id bằng HTML?
Làm thế nào tôi có thể trang trí thẻ ID của tôi?
Làm thế nào tôi có thể làm một thẻ ID đơn giản?

Giám đốc điều hành & người sáng lập, ví dụ

đại học Harvard

Liên hệ

Tự mình thử »

Bước 1) Thêm HTML

Ví dụ

John Doe

Giám đốc điều hành & người sáng lập, ví dụ

đại học Harvard

Liên hệ

Bước 2) Thêm CSS

Ví dụ

.card {
box-shadow. 0 4px 8px 0 rgba(0, 0, 0, 0. 2);
chiều rộng tối đa. 300px;
lề. tự động;
căn chỉnh văn bản. trung tâm;
}

.title {
màu. màu xám;
cỡ chữ. 18px;
}

nút {
  đường viền. không;
phác thảo. 0;
hiển thị. inline-block;
đệm. 8px;
  màu. màu trắng;
  màu nền. #000;
  căn chỉnh văn bản. trung tâm;
con trỏ. con trỏ;
chiều rộng. 100%;
cỡ chữ. 18px;
}

a {
trang trí văn bản. không;
cỡ chữ. 22px;
màu. đen;
}

. di chuột, một. di chuột {
độ mờ. 0. 7;
}

Tự mình thử »

Kunal Sarkar là một nhà phát triển và nhà văn có trụ sở tại Ấn Độ. Anh ấy viết các hướng dẫn lập trình thú vị và hấp dẫn tại supersarkar. com. Nói xin chào đi. ” với anh ấy trên … Thông tin thêm về Kunal ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

Bắt đầu miễn phí

Hệ thống thiết kế thành công
Quảng cáo trên tạp chí Smashing

Giao diện người dùng SmashingConf 2023
SmashingConf Freiburg 2023

Trong hướng dẫn này, chúng tôi sẽ tạo thẻ ID khoa học viễn tưởng cho Avengers. Bạn sẽ học Flexbox, Nested Flexbox, hoạt hình CSS và rất nhiều kỹ thuật CSS khác trong khi xây dựng dự án thú vị này

Giả sử Tony Stark muốn thiết kế lại thẻ ID của Avengers và anh ấy cần sự trợ giúp của chúng tôi để tạo chúng bằng HTML và CSS. Vì vậy, làm thế nào chúng ta có thể giúp đỡ? . Chúng tôi cũng sẽ sử dụng các đường viền tròn cũng như trong suốt để tạo các vòng cung khoa học viễn tưởng trong CSS, sau đó tạo hoạt ảnh cho chúng bằng cách sử dụng các hoạt ảnh CSS xung quanh ảnh của Kẻ báo thù. Cuối cùng nhưng không kém phần quan trọng, chúng tôi sẽ sử dụng các thuộc tính


    
        Test

5 và


    
        Test

6 để cung cấp cho thẻ ID của chúng tôi một nét khoa học viễn tưởng cuối cùng

Đến cuối hướng dẫn, chúng ta sẽ tạo thẻ ID Avengers hoạt hình khoa học viễn tưởng, đồng thời tìm hiểu kiến thức cơ bản về Flexbox, Flexbox lồng nhau, hoạt ảnh CSS, đường viền, bóng đổ và nhiều thuộc tính CSS thường được sử dụng khác

Đây là cách thẻ ID Avengers cuối cùng của chúng tôi sẽ trông như thế nào

Xem Pen Avengers ID Card của Kunal Sarkar (@supersarkar) trên CodePen

Bắt đầu nào

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Chuyển đến hội thảo ↬

Bối cảnh toàn trang

Chúng tôi cần một div bao phủ toàn bộ màn hình. Chúng tôi sẽ sử dụng div này làm nền để đặt thẻ ID

Hãy tạo div bao phủ toàn bộ trang và tạo nền tối

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

Tại sao lại sử dụng

Test

7 chứ không phải

Test

8 cho chiều cao?

Nếu bạn nhìn kỹ, bạn sẽ nhận thấy rằng chúng tôi đã sử dụng


    
        Test

8 cho chiều rộng, nhưng


    
        Test

7 cho chiều cao. Đơn vị

.id-card {
  border: 2px solid #0AE0DF;
  max-width: 30em;
  margin: auto;
  color: #fff;
  padding: 1em;
}

1 là viết tắt của “chiều cao khung nhìn”. Nó là một đơn vị khung nhìn, một số đơn vị khung nhìn khác là.

.id-card {
  border: 2px solid #0AE0DF;
  max-width: 30em;
  margin: auto;
  color: #fff;
  padding: 1em;
}

2,

.id-card {
  border: 2px solid #0AE0DF;
  max-width: 30em;
  margin: auto;
  color: #fff;
  padding: 1em;
}

3 và

.id-card {
  border: 2px solid #0AE0DF;
  max-width: 30em;
  margin: auto;
  color: #fff;
  padding: 1em;
}

4

Vì vậy, tại sao chúng ta nên sử dụng


    
        Test

7 thay vì


    
        Test

8 cho chiều cao? . Vì vậy, nếu chúng ta đặt chiều cao của

.id-card {
  border: 2px solid #0AE0DF;
  max-width: 30em;
  margin: auto;
  color: #fff;
  padding: 1em;
}

8 thành 100%, điều đó có nghĩa là nó sẽ làm cho chiều cao của

.id-card {
  border: 2px solid #0AE0DF;
  max-width: 30em;
  margin: auto;
  color: #fff;
  padding: 1em;
}

8 bao phủ 100% chiều cao của phần tử cha của nó (là phần tử


    
        Test

70)

Vấn đề là - theo mặc định - phần tử body không bao phủ toàn bộ chiều cao của màn hình. Chiều rộng của phần tử nội dung theo mặc định là 100%, đó là lý do tại sao chúng ta có thể sử dụng


    
        Test

71 trên

.id-card {
  border: 2px solid #0AE0DF;
  max-width: 30em;
  margin: auto;
  color: #fff;
  padding: 1em;
}

8, nhưng vì chiều cao không phải là 100% theo mặc định nên điều tương tự sẽ không hoạt động đối với chiều cao

Vì đơn vị khung nhìn có liên quan đến khung nhìn, không phải thành phần chính, nên việc đặt chiều cao thành


    
        Test

7 sẽ làm cho thành phần bao phủ toàn bộ chiều cao của vùng hiển thị (khung nhìn), bất kể kích thước của thành phần chính

Ghi chú. Nếu bạn muốn tìm hiểu sâu hơn về các đơn vị khung nhìn, hãy xem bài viết Thú vị với Đơn vị khung nhìn này trên Thủ thuật CSS. Một điều nữa, có rất nhiều cách để tạo nền toàn trang, Chris Coyier liệt kê chúng trong bài viết này

Tại sao

Test

74 Trên cơ thể?

Các trình duyệt theo mặc định hiển thị một số lề xung quanh cơ thể. Nếu chúng tôi không đặt lề này thành 0, chúng tôi sẽ có một khoảng trống xung quanh div

.id-card {
  border: 2px solid #0AE0DF;
  max-width: 30em;
  margin: auto;
  color: #fff;
  padding: 1em;
}

8

Định tâm bằng Flexbox

Có nhiều cách để tập trung. Bây giờ nền toàn trang của chúng ta đã sẵn sàng, hãy tạo div chứa Thẻ ID của chúng ta. Chúng tôi sẽ chỉ đặt “Thử nghiệm” làm nội dung và xây dựng bố cục trước


    
        Test

Và thêm một số phong cách cho nó

________số 8

Chúng tôi đang sử dụng thuộc tính


    
        Test

76 để tạo đường viền liền 2px có màu


    
        Test

77 cho phần tử


    
        Test

78

Vì “div” là một phần tử khối nên theo mặc định, nó sẽ bao phủ toàn bộ chiều rộng của phần tử cha. Nhưng chúng tôi không muốn nó vượt quá


    
        Test

79, vì vậy chúng tôi sẽ đặt thuộc tính

90 thành


    
        Test

79

Đợi đã,

92 lại là gì?

Đây là những gì W3C nói về đơn vị "em"

“_______292 chỉ đơn giản là kích thước phông chữ. Trong phần tử có phông chữ ________ 294, ________ 295 điều này có nghĩa là ________ 294. ”

Điều này có nghĩa là nếu trình duyệt của bạn có cỡ chữ mặc định là 14px thì


    
        Test

79 sẽ bằng 30×14 = 420px

Nhưng, tại sao lại sử dụng đơn vị

92 thay vì

99?

Hãy nhìn xem, đơn vị

92 có liên quan đến cỡ chữ. Giả sử bạn đang sử dụng trình duyệt có cỡ chữ mặc định là 14px. Bây giờ nếu ai đó xem dự án của bạn từ một trình duyệt khác có kích thước phông chữ mặc định là 16px, thì hãy đoán xem điều gì sẽ xảy ra?

Nội dung bên trong sẽ cần nhiều không gian hơn, nhưng div của bạn có chiều rộng cố định, tôi. e. nội dung sẽ tràn ra ngoài hoặc phá vỡ bố cục

Luôn luôn là một ý tưởng hay khi có các kích thước tỷ lệ với nội dung, thay vì cố định nó thành các pixel tùy ý

Tại sao

Test

01 không căn giữa

Test

02 theo chiều dọc?**

Chúng tôi đã biết rằng chúng tôi có thể căn giữa một phần tử khối theo chiều ngang bằng cách sử dụng


    
        Test

01, nhưng nó không hoạt động để căn giữa theo chiều dọc

Lề tự động căn giữa phần tử theo chiều ngang

Điều gì sẽ xảy ra nếu tôi nói với bạn rằng


    
        Test

01 cũng hoạt động theo chiều dọc? . Nhưng trong các chế độ bố cục mới như Flexbox,


    
        Test

01 cũng hoạt động để định tâm theo chiều dọc. Hãy tiếp tục và biến

.id-card {
  border: 2px solid #0AE0DF;
  max-width: 30em;
  margin: auto;
  color: #fff;
  padding: 1em;
}

8 thành flexbox để tự mình xem


    
        Test

7

đầu ra

Lề tự động căn giữa phần tử theo chiều ngang và chiều dọc nếu phần tử là một mục linh hoạt

Như bạn có thể thấy, div


    
        Test

78 của chúng tôi hiện được căn giữa theo chiều ngang và chiều dọc. Chúng tôi chỉ cần đặt


    
        Test

08 trên div

.id-card {
  border: 2px solid #0AE0DF;
  max-width: 30em;
  margin: auto;
  color: #fff;
  padding: 1em;
}

8. Khi bạn đặt


    
        Test

08 thành một phần tử, phần tử đó sẽ trở thành một flex-container và các phần tử con của nó trở thành flex-item. Kiểm tra “Khái niệm cơ bản về Flexbox” trên MDN

Được rồi, điều này đã căn giữa phần tử của chúng ta, nhưng tại sao nó lại mất chiều rộng?

Trên thực tế, nó đã không mất hành vi chặn. Điều đang xảy ra là, ngay khi div đi vào ngữ cảnh flexbox, thuật toán flexbox lưu ý rằng div không có bất kỳ thuộc tính


    
        Test

22 nào được đặt cho nó (chúng tôi chỉ cung cấp cho nó

90), và sau đó nó đặt chiều rộng ban đầu thành 0

Chúng ta có thể thay đổi hành vi này bằng cách xác định rõ ràng chiều rộng ban đầu của phần tử bằng cách sử dụng thuộc tính


    
        Test

24, như thế này

9

Và bây giờ kết quả trông giống như mong đợi

Chiều rộng ban đầu của mục linh hoạt được đặt thành 100% bằng cách sử dụng "cơ sở linh hoạt"

Flexbox lồng nhau

Bây giờ div


    
        Test

78 của chúng tôi đã sẵn sàng cho nội dung. Hãy tạo một div


    
        Test

26 và hai phần trong đó


    
        Test

27 và


    
        Test

28. Div


    
        Test

27 sẽ chứa ảnh hồ sơ của Avenger trong khi div


    
        Test

28 sẽ chứa mô tả về Avenger đó


    
        Test

0

Chúng ta biết rằng div


    
        Test

78 là một flex-item, nhưng div mà chúng ta vừa tạo bên trong


    
        Test

78 (div


    
        Test

26) không phải là một flex-item. Có, chỉ con cháu trực tiếp của flex-container mới trở thành flex-item, nhưng cháu thì không

Do đó,


    
        Test

26 là một div bình thường và chúng ta sẽ biến nó thành một flex-container bằng cách đặt


    
        Test

08 cho nó. Điều này sẽ làm cho các phần tử con của nó,


    
        Test

27 và


    
        Test

28, flex-items


    
        Test

2

Bây giờ chúng ta có thể sử dụng thuộc tính


    
        Test

18 để tạo div 33 của


    
        Test

27. rộng 3% và


    
        Test

28 div 66. rộng 6%


    
        Test

1

Đây là những gì chúng tôi nhận được

Chúng ta có thể xác định lượng không gian mà các phần tử sẽ chiếm bằng cách sử dụng thuộc tính “flex-basis”

Hình ảnh hồ sơ cá nhân

Đối với ảnh hồ sơ, chúng tôi sẽ sử dụng ảnh Iron Man dễ thương cho chứng minh thư của Stark (tải xuống tại đây). Bao gồm hình ảnh bằng cách sử dụng thẻ


    
        Test

51 bên trong div


    
        Test

27


    
        Test

5

Và đưa ra một số phong cách cho nó

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

0

Chúng tôi đặt


    
        Test

53 cho phần tử


    
        Test

51 vì phần tử


    
        Test

51 theo mặc định hiển thị hình ảnh ở độ phân giải gốc

Nếu hình ảnh là 500px×500px thì nó sẽ được hiển thị ở kích thước đó. Nhưng chúng tôi không muốn điều đó. Thay vào đó, chúng tôi muốn hình ảnh chỉ rộng bằng div


    
        Test

27, đó là lý do tại sao chúng tôi đặt

90 của nó thành 100%

Ngoài ra, chúng tôi đặt thuộc tính


    
        Test

58 thành


    
        Test

59. Chúng tôi đang làm điều này để hiển thị hình ảnh dưới dạng hình tròn

Chúng tôi không biến phần tử img thành một flex-item, mà đặt nó bên trong một flex-item

Tạo vòng cung trong CSS

Cuối cùng, Tony đến thăm chúng tôi trong khi chúng tôi vẫn đang làm việc trên thẻ ID này và nói rằng điều này trông không đủ khoa học viễn tưởng. Được rồi, không vấn đề gì. Hãy làm cho nó khoa học viễn tưởng hơn. Chúng ta có thể làm cho hai cung xoay quanh hình ảnh bằng cách chèn cung đầu tiên

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

00 vào bên trong phần tử


    
        Test

27

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

1

Định vị nó trong CSS

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

2

Chúng tôi muốn div vòng cung chồng lên div


    
        Test

27. Vấn đề duy nhất là các phần tử không trùng nhau trong HTML. Tuy nhiên, nếu chúng ta đặt vị trí của một phần tử là

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

03 thì phần tử đó sẽ bị loại khỏi luồng thông thường của tài liệu và chúng ta có thể đặt vị trí của nó theo ý muốn

Vị trí mặc định của các phần tử HTML là

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

04. Chúng tôi đặt

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

05 trên

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

00 để làm cho nó được định vị tuyệt đối. Bây giờ chúng ta có thể sử dụng các thuộc tính

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

07,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

08,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

09 và

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

10 để đặt vị trí của nó

Một thận trọng. Các thuộc tính ________ 307, ________ 308, ________ 309 và ________ 310 là tương đối phần tử cha đầu tiên trong cấu trúc phân cấp được định vị "tương đối". Đó là lý do tại sao chúng tôi đặt

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

15 trên div


    
        Test

27. Nếu chúng tôi không làm điều này, các thuộc tính

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

07,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

08,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

09 và

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

10 sẽ được đặt tương ứng cho màn hình, không phải thành phần


    
        Test

27

Một điều nữa. chúng tôi đang đặt

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

22 trên phần tử


    
        Test

51. Tại sao?

Khoảng cách này thường không gây ra bất kỳ vấn đề gì, nhưng một khoảng cách nhỏ xung quanh hình ảnh trong trường hợp của chúng tôi sẽ bù đắp vị trí của vòng cung. Vì vậy, chúng tôi đặt phần tử


    
        Test

51 làm phần tử khối

Tiếp theo, hãy làm cho div

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

00 trông giống như một vòng cung

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

3

Những gì chúng tôi đang làm là, thay vì đặt đường viền cho tất cả các bên bằng màu


    
        Test

77, chúng tôi đặt tất cả các bên thành trong suốt, sau đó chỉ cung cấp cho đường viền trên cùng màu


    
        Test

77. Sau đó, chúng tôi đặt

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

31 để làm tròn

Lề âm bù đắp chiều rộng của đường viền mà chúng ta đã cung cấp cho cung

Được rồi, hãy tạo thêm một vòng cung nữa,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

32

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

4

Và phong cách nó theo cùng một cách

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

5

Wow, thứ

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

33 đó là gì vậy?

Calc là một hàm CSS tính toán biểu thức toán học được cung cấp cho nó. Hãy nhìn xem, chúng ta có vòng cung bên trong với chiều rộng và chiều cao là 100% và đường viền là 6px, phải không?

Bây giờ nếu chúng ta muốn vòng cung bên ngoài lớn hơn vòng cung bên trong thì chúng ta cần một số cách để làm cho nó rộng

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

35. Đây là lúc chức năng

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

36 đến để giải cứu

Ngoài ra, lưu ý rằng chúng tôi đang sử dụng

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

37 cho vòng cung này vì chúng tôi muốn vòng cung hiển thị ở phía dưới

đầu ra

Hàm calc thêm 12px để tạo khoảng cách 6px giữa hình cung và hình ảnh

Hoạt hình The Arcs

Bây giờ các vòng cung của chúng ta đã sẵn sàng, hãy làm cho chúng xoay quanh hình ảnh. Chúng tôi có thể làm điều này với sự trợ giúp của hoạt ảnh CSS

Bất kỳ hoạt hình nào cũng yêu cầu ba điều cơ bản

Trạng thái bắt đầu của hoạt ảnh,
Trạng thái kết thúc của hoạt ảnh,
Mất bao lâu để đi từ trạng thái bắt đầu đến trạng thái kết thúc (tốc độ của hoạt ảnh)

Chúng tôi có thể cung cấp những dữ liệu này trong CSS như thế này

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

6

Chúng tôi sử dụng

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

38 để xác định hoạt ảnh. Các từ khóa

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

39 và

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

40 được sử dụng để đặt trạng thái bắt đầu và kết thúc của hoạt ảnh

Ở trạng thái bắt đầu, chúng tôi đang xoay cung 0 độ bằng cách sử dụng

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

41 và ở trạng thái kết thúc, chúng tôi đang xoay cung 360 độ bằng cách sử dụng

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

42

Để sử dụng hoạt ảnh này trên một phần tử, chúng ta cần đặt tên của hoạt ảnh (trong trường hợp của chúng tôi là ______343) cho thuộc tính

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

44 của phần tử đó. Đó là những gì chúng tôi đang làm với

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

45

Chúng ta cũng cần biết mất bao lâu để hoạt hình hoàn thành. Chúng tôi có thể làm điều này bằng cách đặt thuộc tính

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

46 thành

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

47

Xem Pen Avengers ID Card - 1 của Kunal Sarkar (@supersarkar) trên CodePen

Bạn sẽ nhận thấy hai vấn đề trong đầu ra. Một, vòng cung chỉ được quay một lần, chúng tôi muốn nó tiếp tục quay và hai, hoạt ảnh không tuyến tính. Hoạt ảnh nhanh ở đầu và cuối, chúng tôi muốn nó quay với tốc độ như nhau trong suốt hoạt ảnh

Để giải quyết những vấn đề này, chúng tôi sẽ sử dụng thuộc tính ________ 348 để giữ cho hoạt ảnh tự lặp lại vô hạn và thuộc tính ________ 349 để có được hoạt ảnh tuyến tính

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

7

Xem Pen Avengers ID Card - 2 của Kunal Sarkar (@supersarkar) trên CodePen

Được rồi, vòng cung bên trong hiện đang quay như mong đợi. Bây giờ, hãy tạo hoạt ảnh cho vòng cung bên ngoài theo cách tương tự, nhưng theo hướng ngược lại

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

8

Chúng tôi chỉ thay đổi trạng thái

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

40 cho vòng cung bên ngoài. Thay vì xoay nó theo chiều dương 360 độ, chúng tôi đã xoay nó theo chiều âm 360 độ để có được hình ảnh động ngược chiều kim đồng hồ

Lưu ý rằng chúng tôi cũng đã thêm lề 24px vào

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

51 để nó không bị tắc nghẽn. Đây là kết quả của chúng ta bây giờ

Xem Pen Avengers ID Card - 3 của Kunal Sarkar (@supersarkar) trên CodePen

Sử dụng phông chữ khoa học viễn tưởng của Google

Tony lại đến thăm, và lần này anh ấy hài lòng với nơi chúng tôi đang hướng tới. Dù chỉ một điều. anh ấy yêu cầu sử dụng phông chữ khoa học viễn tưởng

Không thành vấn đề. Hãy sử dụng phông chữ Orbitron từ Google Fonts. Google Fonts cung cấp rất nhiều phông chữ miễn phí và phông chữ cụ thể này khá phù hợp với yêu cầu của chúng tôi

Nhấp vào “Chọn phông chữ này”

Bạn sẽ thấy liên kết “Chọn phông chữ này” khi bạn truy cập vào liên kết phông chữ của Google

Một cửa sổ bật lên sẽ xuất hiện ở dưới cùng. Nhấn vào nó. Bạn sẽ nhận được hai mã. mã

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

52 để sao chép vào HTML của bạn và mã

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

53 để sử dụng trong CSS của bạn

Khi bạn nhấp vào liên kết “Chọn phông chữ này”, một cửa sổ bật lên sẽ hiển thị với liên kết và mã “họ phông chữ” của phông chữ đó

Sao chép mã

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

52 vào tệp HTML của bạn ngay phía trên dòng mà bạn đang thêm biểu định kiểu của mình

Bây giờ, hãy thêm một số chi tiết về Iron Man bên trong div


    
        Test

28

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

9

Trong CSS của chúng tôi, chúng tôi sẽ sử dụng mã

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

53 từ Google Fonts để đặt phông chữ của


    
        Test

28 div


    
        Test

0

Đợi một chút, tại sao chúng ta lại đặt mức ký quỹ từ

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

58 đến

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

59?

Bạn thấy đấy, tất cả các thành phần tiêu đề (

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

58,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

61,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

62,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

63 và

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

64) được trình duyệt hiển thị với một số lề xung quanh nó. Đây thường không phải là vấn đề, nhưng chúng tôi không muốn có khoảng trống trên và dưới xung quanh các thành phần tiêu đề ngay bây giờ. Đó là lý do tại sao chúng tôi lấy số không ký quỹ cho phần tử

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

58

Hãy xem đầu ra

Xem Pen Avengers ID Card - 4 của Kunal Sarkar (@supersarkar) trên CodePen

ồ ồ. Chuyện gì đã xảy ra thế?

Có vẻ như chiều cao của div


    
        Test

27 đang tăng lên. Thông thường, nếu nội dung trong div


    
        Test

28 có chiều cao lớn hơn chiều cao của div ________ 527 thì không có gì xảy ra với div ________ 527. Tuy nhiên, trong bố cục Flexbox, chiều cao của div


    
        Test

27 cũng sẽ tăng cùng với chiều cao của div


    
        Test

28

Chúng tôi không muốn div


    
        Test

27 tăng chiều cao với div


    
        Test

28, vì vậy chúng tôi có thể kiểm soát điều này bằng cách sử dụng thuộc tính phụ

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

74 của flexbox như thế này


    
        Test

1

Xem Pen Avengers ID Card - 5 của Kunal Sarkar (@supersarkar) trên CodePen

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

75 đặt div của


    
        Test

27 vào giữa để giữ nguyên chiều cao của nó

Thêm ánh sáng

Bây giờ, hãy thêm một số ánh sáng

Nhưng chờ đã, CSS không có bất kỳ thuộc tính phát sáng nào

Không thành vấn đề, nó có thuộc tính

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

77. Nếu chúng ta tô màu sáng cho bóng đổ, bóng đổ sẽ trông như đang phát sáng


    
        Test

2

Trong thuộc tính


    
        Test

6, giá trị đầu tiên,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

79, là độ lệch x, phần bóng cách văn bản theo hướng x bao nhiêu. Giá trị thứ hai,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

79, là độ lệch y, cho chúng tôi biết bóng cách xa văn bản bao nhiêu theo hướng y. Giá trị thứ ba,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

81, là mức độ mờ mà bạn muốn cung cấp cho bóng tối. Giá trị thứ tư,

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

82, là màu của bóng

Lưu ý rằng chúng tôi cũng đã thêm khoảng cách 1px giữa các chữ cái của văn bản bằng cách sử dụng thuộc tính

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

83 vì văn bản có vẻ hơi tắc nghẽn

Tiếp theo, hãy thêm một số bóng đổ vào thẻ ID và hình ảnh


    
        Test

3

Thuộc tính


    
        Test

6 tạo bóng cho văn bản và thuộc tính

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

85 tạo bóng cho các phần tử

Ba giá trị đầu tiên cho


    
        Test

5 giống như


    
        Test

6 x-offset, y-offset và blur. Giá trị thứ tư là mức độ bạn muốn bóng lan rộng và giá trị thứ năm là màu của bóng

Lưu ý cách chúng ta tạo hai bóng đổ (bên ngoài và bên trong) cho div


    
        Test

78 trên một dòng


    
        Test

4

Năm giá trị đầu tiên tạo bóng bên ngoài. Sau đó, từ khóa “inset” chỉ định rằng năm giá trị tiếp theo dành cho bóng bên trong. Chúng tôi tách cả hai bằng một

body {
  margin:0px;
}
.id-card-wrapper {
  height: 100vh;
  width:100%;
  background-color: #122023;
}

89

Xem Pen Avengers ID Card của Kunal Sarkar (@supersarkar) trên CodePen

Thẻ ID Avengers đã sẵn sàng. vâng

kết thúc

Trong hướng dẫn này, chúng ta đã học được một cách hiệu quả để tạo nền toàn trang và căn giữa các thành phần bằng Flexbox và lề tự động. Chúng tôi đã thấy cách sử dụng cơ bản của Flexbox và các Flexbox lồng nhau để tạo bố cục một chiều

Nếu bạn muốn tìm hiểu sâu hơn về Flexbox, hãy xem “Hướng dẫn đầy đủ về Flexbox” của Chris Coyier tại CSS-Tricks. Nếu bạn là người học qua video nhiều hơn, thì bạn sẽ được thưởng thức khóa học 20 video miễn phí của Web Bos tại Flexbox. io

Chúng tôi cũng đã sử dụng hoạt ảnh CSS và biến đổi xoay để tạo các cung hoạt hình, tuy nhiên, chúng tôi đã sử dụng một số lượng hạn chế các thuộc tính và giá trị CSS. Nếu bạn muốn khám phá thêm về hoạt ảnh CSS thì bạn sẽ thích hướng dẫn MDN chi tiết này

Cuối cùng, các yếu tố phát sáng đã mang đến cho thẻ ID của chúng ta một diện mạo khoa học viễn tưởng độc đáo. Chúng tôi đã sử dụng thuộc tính


    
        Test

5 để tạo ánh sáng cho các phần tử của mình. Đôi khi, việc đặt giá trị của thuộc tính


    
        Test

5 theo cách thủ công có thể khá phức tạp, vì vậy hãy thử sử dụng Trình tạo CSS Box Shadow của CSSmatic để dễ dàng tạo bóng hộp

Làm thế nào để tạo thẻ ID sinh viên trong HTML?

Làm cách nào để tạo id bằng HTML?

Cú pháp của id là. viết ký tự băm (#), theo sau là tên id .

Làm thế nào tôi có thể trang trí thẻ ID của tôi?

Làm theo các mẹo thiết kế thẻ ID này để tạo thẻ trông đẹp mắt và đáp ứng tất cả các yêu cầu thiết yếu của chúng. .

Giữ nó đơn giản. Các thiết kế thẻ ID đơn giản nhất thường là tốt nhất. .

Sử dụng hình ảnh lớn, rõ ràng. .

Bao gồm tên của tổ chức. .

Sử dụng phông chữ phù hợp. .

Chọn màu nền cẩn thận. .

Xem xét chủ sở hữu thẻ ID

Làm thế nào tôi có thể làm một thẻ ID đơn giản?

5 bước làm thẻ căn cước .

Bước 1. Xác định loại hình ảnh bạn muốn khắc họa. .

Bước 2. Chọn các yếu tố thiết kế thương hiệu phù hợp. .

Bước 3. Ghi chú tất cả thông tin bạn muốn đưa vào CMND. .

Bước 4. Tải xuống mẫu thẻ ID có thể chỉnh sửa. .

Bước 5. In thiết kế thẻ ID

programming html

Thiết kế thẻ ID trường học trong html

Bước 1) Thêm HTML

Ví dụ

Bước 2) Thêm CSS

Ví dụ

Bản tin email

Bối cảnh toàn trang

Tại sao lại sử dụng Test 7 chứ không phải Test 8 cho chiều cao?

Tại sao Test 74 Trên cơ thể?

Định tâm bằng Flexbox

Đợi đã, 92 lại là gì?

Tại sao Test 01 không căn giữa Test 02 theo chiều dọc?**

Flexbox lồng nhau

Hình ảnh hồ sơ cá nhân

Tạo vòng cung trong CSS

Hoạt hình The Arcs

Sử dụng phông chữ khoa học viễn tưởng của Google

Thêm ánh sáng

kết thúc

Làm thế nào để tạo thẻ ID sinh viên trong HTML?

Làm cách nào để tạo id bằng HTML?

Làm thế nào tôi có thể trang trí thẻ ID của tôi?

Làm thế nào tôi có thể làm một thẻ ID đơn giản?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Tại sao lại sử dụng

Test

7 chứ không phải

Test

8 cho chiều cao?

Tại sao

Test

74 Trên cơ thể?

Đợi đã,

92 lại là gì?

Tại sao

Test

01 không căn giữa

Test

02 theo chiều dọc?**