Tìm hiểu cách tạo thẻ hồ sơ bằng CSS
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 HTMLVí 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;
}
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
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
Xem Pen Avengers ID Card của Kunal Sarkar [@supersarkar] trên CodePenBắ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?
Test
Test
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;
}
4Vì 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 caoVì đơ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ínhGhi 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ể?
Test
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ố 8Chú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
78Vì “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 = 420pxNhư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?**
Test
Test
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ọcLề 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ạtNhư 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 0Chú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
9Và 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
0Chú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ôngDo đó,
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
2Bâ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
5Và đưa ra một số phong cách cho nó
body {
margin:0px;
}
.id-card-wrapper {
height: 100vh;
width:100%;
background-color: #122023;
}
0Chú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ốcNế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ònChú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-itemTạ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
27body {
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;
}
2Chú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ốnVị 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
27Mộ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ốiTiế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 cungbody {
margin:0px;
}
.id-card-wrapper {
height: 100vh;
width:100%;
background-color: #122023;
}
3Nhữ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ònLề â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;
}
32body {
margin:0px;
}
.id-card-wrapper {
height: 100vh;
width:100%;
background-color: #122023;
}
4Và phong cách nó theo cùng một cách
body {
margin:0px;
}
.id-card-wrapper {
height: 100vh;
width:100%;
background-color: #122023;
}
5Wow, 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ứuNgoà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 ảnhHoạ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;
}
6Chú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;
}
45Chú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;
}
47Xem Pen Avengers ID Card - 1 của Kunal Sarkar [@supersarkar] trên CodePen
Xem Pen Avengers ID Card - 1 của Kunal Sarkar [@supersarkar] trên CodePenBạ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;
}
7Xem Pen Avengers ID Card - 2 của Kunal Sarkar [@supersarkar] trên CodePen
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;
}
8Chú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
Xem Pen Avengers ID Card - 3 của Kunal Sarkar [@supersarkar] trên CodePenSử 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 GoogleMộ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ạnKhi 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ìnhBây giờ, hãy thêm một số chi tiết về Iron Man bên trong div
Test
28body {
margin:0px;
}
.id-card-wrapper {
height: 100vh;
width:100%;
background-color: #122023;
}
9Trong 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;
}
58Hãy xem đầu ra
Xem Pen Avengers ID Card - 4 của Kunal Sarkar [@supersarkar] trên CodePen
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
28Chú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
1Xem Pen Avengers ID Card - 5 của Kunal Sarkar [@supersarkar] trên CodePen
Xem Pen Avengers ID Card - 5 của Kunal Sarkar [@supersarkar] trên CodePenbody {
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
2Trong 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óngLư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ẽnTiếp theo, hãy thêm một số bóng đổ vào thẻ ID và hình ảnh
Test
3Thuộ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óngLư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
4Nă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;
}
89Xem Pen Avengers ID Card của Kunal Sarkar [@supersarkar] trên CodePen
Xem Pen Avengers ID Card của Kunal Sarkar [@supersarkar] trên CodePenThẻ 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