Trong hướng dẫn này, chúng tôi sẽ xây dựng một thẻ ID khoa học viễn tưởng cho các Avengers. Bạn sẽ học Flexbox, Flexbox lồng nhau, hoạt ả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.

Bạn đang xem : thiết kế thẻ id trong html

Làm Thẻ ID Avengers trong HTML và CSS

  • 17 phút đọc

< p class = "c-garfield-native-panel c-garfield-native-panel__below">

< p class = "c-garfield-Summary" id = "article__start">

Tóm tắt nhanh ↬

Trong hướng dẫn này, chúng tôi sẽ xây dựng một thẻ ID khoa học viễn tưởng cho các Avengers. Bạn sẽ học Flexbox, Flexbox lồng nhau, hoạt ả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.

Trong hướng dẫn này, chúng tôi sẽ xây dựng một thẻ ID khoa học viễn tưởng cho Avengers. Bạn sẽ học Flexbox, Flexbox lồng nhau, hoạt ả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 các 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 tôi có thể giúp đỡ? Trong hướng dẫn này, chúng tôi sẽ sử dụng Flexbox để tạo bố cục mong muốn trong khi đi sâu vào các flexbox lồng nhau cho một số bố cục nâng cao. 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 hoạt ảnh CSS xung quanh hình ảnh của Avenger. 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 box-shadow text-shadow để 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.

< p> Ở phần cuối của hướng dẫn, chúng ta sẽ xây dựng một thẻ ID Avengers hoạt hình khoa học viễn tưởng và cũng tìm hiểu các 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 dùng khác.

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

Hãy bắt đầu!

​​Full-Page Background

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:

  & lt; div class = "id-card-wrapper" & gt;
& lt; / div & gt;
 

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

  body {
  lề: 0px;
}
.id-card-wrapper {
  chiều cao: 100vh;
  chiều rộng: 100%;
  màu nền: # 122023;
}
 

Tại sao sử dụng 100vh chứ không phải 100% cho chiều cao?

Nếu quan sát kỹ, bạn sẽ nhận thấy rằng chúng tôi đã sử dụng 100% cho chiều rộng, nhưng 100vh cho chiều cao. Đơn vị vh 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à: vw , vmin vmax .

Vậy, tại sao chúng ta có nên sử dụng 100vh thay vì 100% cho chiều cao không? Chà, thứ nguyên dựa trên % có liên quan đến phần tử mẹ của nó. Vì vậy, nếu chúng tôi đặt chiều cao của id-card-wrapper thành 100%, điều đó có nghĩa là nó sẽ làm cho chiều cao của id-card-wrapper bao phủ 100% chiều cao của phần tử mẹ của nó (là phần tử body ).

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ử body là 100% theo mặc định, đó là lý do tại sao chúng tôi có thể sử dụng width: 100% trên id-card-wrapper , nhưng vì chiều cao không phải là 100% bởi mặc định điều tương tự sẽ không hoạt động đối với chiều cao.

Vì một đơn vị chế độ xem có liên quan đến chế độ xem, không phải phần tử mẹ, việc đặt chiều cao thành 100vh sẽ làm cho phần tử bao phủ toàn bộ chiều cao của vùng hiển thị (chế độ xem), bất kể kích thước của vùng chính.

Lưu ý : Nếu bạn muốn tìm hiểu sâu hơn về các đơn vị chế độ xem, hãy khám phá Fun with Viewport này Bài viết về Đơn vị trên CSS-Tricks. 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 rất hay trong bài đăng này .

Tại sao margin: 0px On Body?

Theo mặc định, các trình duyệt hiển thị một số lề xung quanh phần thân. Nếu chúng ta không đặt lề này thành 0, chúng ta sẽ nhận được khoảng trắng xung quanh id-card-wrapper div.

Căn giữa Sử dụng Flexbox

Có nhiều cách để căn giữa. 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 "Kiểm tra" làm nội dung và xây dựng bố cục trước:

  & lt; div class = "id-card-wrapper" & gt;
    & lt; div class = "id-card" & gt;
        Bài kiểm tra
    & lt; / div & gt;
& lt; / div & gt;
 

Và thêm một số kiểu vào đó:

 . id-card {
  viền: 2px solid # 0AE0DF;
  chiều rộng tối đa: 30em;
  margin: tự động;
  màu: #fff;
  đệm lót: 1em;
}
 

Chúng tôi đang sử dụng thuộc tính border để tạo đường viền liền khối 2px của màu # 0AE0DF cho id-card < / code> phần tử.

Vì “div” là một phần tử khối, nó sẽ bao phủ toàn bộ chiều rộng của phần tử mẹ theo mặc định. Nhưng chúng tôi không muốn nó vượt quá 30em , vì vậy chúng tôi sẽ đặt thuộc tính max-width thành 30em .

Chờ đã, em lại là gì?

Đây là những gì W3C phải nói về đơn vị “em”:

em chỉ đơn giản là kích thước phông chữ. Trong phần tử có phông chữ 2in , 1em có nghĩa là 2in . ”

Điều này có nghĩa là nếu trình duyệt của bạn có kích thước phông chữ mặc định là 14px, thì 30em sẽ bằng 30 × 14 = 420px.

Nhưng, tại sao lại sử dụng đơn vị em thay vì px ?

Hãy xem, đơn vị em có liên quan đến kích thước phông chữ. Giả sử bạn đang sử dụng trình duyệt có kích thước phông chữ mặc định 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 thêm không gian, nhưng div của bạn có chiều rộng cố định, tức là nội dung sẽ tràn ra ngoài hoặc phá vỡ bố cục.

Bạn nên có kích thước phù hợp với nội dung thay vì cố định nó thành pixel tùy ý.

Tại sao không margin: auto Center div Vertical? **

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 margin: auto , nhưng nó không hoạt động để căn giữa theo chiều dọc.

Tự động canh lề cho 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 margin: auto cũng hoạt động theo chiều dọc? Trên thực tế, ở chế độ bố cục thông thường thì không. Nhưng trong các chế độ bố cục mới như Flexbox, margin: auto cũng hoạt động để căn giữa theo chiều dọc. Hãy tiếp tục và đặt id-card-wrapper thành một hộp linh hoạt để bạn tự xem nó:

 . Id-card-wrapper {
  chiều cao: 100vh;
  chiều rộng: 100%;
  màu nền: # 122023;
  hiển thị: flex;
}
 

Đầu ra:

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

Như bạn có thể thấy, < code> id-card div hiện được căn giữa theo chiều ngang và chiều dọc. Chúng tôi chỉ cần đặt display: flex trên div id-card-wrapper . Khi bạn đặt display: flex 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. Xem “ Khái niệm cơ bản về Flexbox ” trên MDN.

Được rồi, điều này đã làm trung tâm phần tử của chúng tôi, nhưng tại sao nó lại mất chiều rộng? Div id-card là một phần tử khối và vì các phần tử khối theo mặc định có chiều rộng 100%, tại sao div lại mất hành vi cấp khối này khi nó trở thành một phần tử linh hoạt?

< p> Trên thực tế, nó không bị mất hành vi khối. Đ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 width nào được đặt cho nó (chúng tôi chỉ cung cấp cho nó max- width ), và sau đó nó đặt chiều rộng ban đầu thành 0.

Chúng tôi 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 flex-base < / span> thuộc tính, như sau:

 . id-card {
  cơ sở linh hoạt: 100%;
  viền: 2px solid # 0AE0DF;
  chiều rộng tối đa: 30em;
  margin: tự động;
  màu: #fff;
  đệm lót: 1em;
}
 

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

Chiều rộng ban đầu của mục flex được đặt thành 100% bằng cách sử dụng “flex-base” < h2 id = "nested-flexboxes"> Nested Flexboxes

Bây giờ div id-card của chúng tôi đã sẵn sàng cho nội dung. Hãy tạo một div profile-row và hai phần trong đó dp desc . dp div sẽ chứa ảnh hồ sơ của Avenger trong khi desc div sẽ chứa mô tả của Avenger đó:

  & lt; div class =" id-card-wrapper "& gt;
    & lt; div class = "id-card" & gt;
        & lt; div class = "profile-row" & gt;
            & lt; div class = "dp" & gt;
                Bài kiểm tra
            & lt; / div & gt;
            & lt; div class = "desc" & gt;
                Kiểm tra mô tả
            & lt; / div & gt;
        & lt; / div & gt;
    & lt; / div & gt;
& lt; / div & gt;
 

Chúng tôi biết rằng id-card div là một flex-item, nhưng div mà chúng tôi vừa tạo bên trong id-card ( profile-row div) không phải là một flex-item. Có, chỉ phần đuôi trực tiếp của flex-container mới trở thành flex-item, chứ không phải phần cháu.

Do đó, profile-row là một div bình thường và chúng tôi sẽ làm cho nó một flex-container bằng cách đặt display: flex cho nó. Điều này sẽ làm cho các phần tử con của nó, dp desc , flex-items:

 . Profile-row {
  hiển thị: flex;
}
 

Bây giờ chúng ta có thể sử dụng thuộc tính flex-base để tạo cho dp div rộng 33,3% và desc div rộng 66,6%:

 . profile-row .dp {
  cơ sở linh hoạt: 33,3%;
}
.profile-row .desc {
  phát triển linh hoạt: 66,6%;
}
 

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

Chúng tôi 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-base”.

Ảnh hồ sơ

Đối với ảnh hồ sơ, chúng tôi sẽ sử dụng hình ảnh Người sắt dễ thương làm thẻ ID của Stark ( tải xuống tại đây ). Đưa hình ảnh vào bằng thẻ img bên trong thẻ dp div:

  & lt; div class = "id- card-wrapper "& gt;
    & lt; div class = "id-card" & gt;
        & lt; div class = "profile-row" & gt;
            & lt; div class = "dp" & gt;
                & lt; img src = "img / iron-man-dp.jpg" & gt;
            & lt; / div & gt;
            & lt; div class = "desc" & gt;
                Kiểm tra mô tả
            & lt; / div & gt;
        & lt; / div & gt;
    & lt; / div & gt;
& lt; / div & gt;
 

Và cung cấp một số kiểu cho nó:

 . profile-row .dp img {
  chiều rộng tối đa: 100%;
  bán kính biên giới: 50%;
}
.profile-row .desc {
  đệm lót: 1em;
}
 

Chúng tôi đặt max-width: 100% cho phần tử img vì phần tử img theo mặc định hiển thị hình ảnh ở độ phân giải ban đầu.

Nếu hình ảnh có kích thước 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 dp , đó là lý do tại sao chúng tôi đặt max-width của nó thành 100%.

Ngoài ra , chúng tôi đặt thuộc tính border-radius thành 50% . Chúng tôi đang làm điều này để hiển thị hình ảnh dưới dạng một vòng tròn:

Chúng tôi không đặt phần tử img thành một mục linh hoạt mà đặt nó vào bên trong một mục linh hoạt.

Tạo vòng cung trong CSS

Cuối cùng, Tony đến thăm chúng tôi khi chúng tôi vẫn đang làm 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 có vấn đề gì. Hãy làm cho nó trở nên khoa học viễn tưởng hơn. Chúng ta có thể làm cho hai vòng cung xoay xung quanh hình ảnh bằng cách chèn vòng cung đầu tiên dp-arc-inner bên trong phần tử dp :

  & lt; div class =" id-card-wrapper "& gt;
    & lt; div class = "id-card" & gt;
        & lt; div class = "profile-row" & gt;
            & lt; div class = "dp" & gt;
                & lt; div class = "dp-arc-inner" & gt; & lt; / div & gt;
                & lt; img src = "img / iron-man-dp.jpg" & gt;
            & lt; / div & gt;
            & lt; div class = "desc" & gt;
                Kiểm tra mô tả
            & lt; / div & gt;
        & lt; / div & gt;
    & lt; / div & gt;
& lt; / div & gt;
 

Định vị nó trong CSS:

 . profile-row .dp {
  cơ sở linh hoạt: 33,3%;
  chức vụ: thân nhân;
}
.profile-row .dp img {
  chiều rộng tối đa: 100%;
  bán kính biên giới: 50%;
  hiển thị: khối;
}
.profile-row .dp .dp-arc-inner {
  vị trí: tuyệt đối;
  chiều rộng: 100%;
  chiều cao: 100%;
  viền: 6px solid # 0AE0DF;
  đầu trang: -6px;
  trái: -6px;
}
 

Chúng tôi muốn div cung chồng lên div dp . Vấn đề duy nhất là các phần tử không trùng lặp trong HTML. Tuy nhiên, nếu chúng tôi đặt vị trí của một phần tử là tuyệt đối thì phần tử đó sẽ được đưa ra khỏi quy trình bình thường của tài liệu và chúng tôi có thể đặt vị trí của nó như mong muốn.

vị trí mặc định của các phần tử HTML là static . Chúng tôi đặt position: Absolute trên dp-arc-inner để làm cho nó được định vị tuyệt đối. Giờ đây, chúng ta có thể sử dụng các thuộc tính left , top , bottom right để đặt vị trí của nó.

Một lưu ý: Các thuộc tính left , top , bottom right tương đối với phần tử mẹ đầu tiên trong hệ thống phân cấp được định vị "tương đối". Đó là lý do tại sao chúng tôi đã đặt position: relative trên div dp . Nếu chúng tôi không thực hiện việc này, các thuộc tính left , top , bottom right sẽ được đặt tương ứng vào màn hình, không phải phần tử dp .

Một điều nữa: chúng tôi đang đặt display: block trên img yếu tố. Tại sao? Bởi vì các phần tử img theo mặc định là inline-block và các phần tử inline-block hiển thị một khoảng trống nhỏ trên các cạnh và dưới cùng của nó.

Khoảng trống này thường không gây ra bất kỳ vấn đề nào, nhưng một khoảng trống 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ử img làm phần tử khối.

Tiếp theo, hãy làm cho div dp-arc-inner giống như một vòng cung:

 . profile-row .dp .dp-arc-inner {
  vị trí: tuyệt đối;
  chiều rộng: 100%;
  chiều cao: 100%;
  border: 6px solid trong suốt;
  màu viền trên cùng: # 0AE0DF;
  bán kính biên giới: 50%;
  đầu trang: -6px;
  trái: -6px;
}
 

Những gì chúng tôi đang làm là, thay vì đặt đường viền cho tất cả các mặt bằng màu # 0AE0DF , chúng tôi đặt tất cả các mặt là trong suốt, sau đó cho chỉ đường viền trên cùng có màu # 0AE0DF . Sau đó, chúng tôi đặt border-radius: 50% để làm cho nó tròn:

Lề âm bù lại chiều rộng của đường viền mà chúng tôi đã tạo cho vòng cung

Được rồi, hãy tạo thêm một cung nữa, dp-arc-external :

  & lt; div class = "id-card-wrapper" & gt;
    & lt; div class = "id-card" & gt;
        & lt; div class = "profile-row" & gt;
            & lt; div class = "dp" & gt;
                & lt; div class = "dp-arc-external" & gt; & lt; / div & gt;
                & lt; div class = "dp-arc-inner" & gt; & lt; / div & gt;
                & lt; img src = "img / iron-man-dp.jpg" & gt;
            & lt; / div & gt;
            & lt; div class = "desc" & gt;
                Kiểm tra mô tả
            & lt; / div & gt;
        & lt; / div & gt;
    & lt; / div & gt;
& lt; / div & gt;
 

Và tạo kiểu theo cách tương tự:

 . profile-row .dp .dp-arc-external {
  vị trí: tuyệt đối;
  chiều rộng: calc (100% + 12px);
  chiều cao: calc (100% + 12px);
  border: 6px solid trong suốt;
  màu viền-dưới cùng: # 0AE0DF;
  bán kính biên giới: 50%;
  đầu trang: -12px;
  trái: -12px;
}
 

Chà, calc ở đó là cái gì vậy?

Calc là một hàm CSS tính toán biểu thức toán học trao 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? Điều đó làm cho tổng chiều rộng của vòng cung bên trong 6px + 100% + 6px .

Bây giờ nếu chúng ta muốn cung bên ngoài lớn hơn cung bên trong thì chúng ta cần một số cách để làm cho nó Rộng 100% + 12px . Đây là lúc hàm calc () được giải cứu.

Ngoài ra, hãy lưu ý rằng chúng tôi đang sử dụng border-bottom-color cho vòng cung này kể từ chúng tôi muốn hình 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 vòng cung và hình ảnh

Animating The Arcs

Bây giờ, khi 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 ảnh nào cũng yêu cầu ba điều cơ bản:

  1. Trạng thái bắt đầu của hoạt ảnh,
  2. trạng thái kết thúc của hoạt ảnh,
  3. Mất bao lâu để chuyển 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:

 . profile-row .dp .dp-arc-inner {
  vị trí: tuyệt đối;
  chiều rộng: 100%;
  chiều cao: 100%;
  border: 6px solid trong suốt;
  màu viền trên cùng: # 0AE0DF;
  bán kính biên giới: 50%;
  đầu trang: -6px;
  trái: -6px;

  thời lượng hoạt ảnh: 2 giây;
  animation-name: xoay-đồng hồ;
}
@keyframes xoay đồng hồ {
  từ {
    biến đổi: xoay (0deg);
  }
  đến {
    biến đổi: xoay (360deg);
  }
}
 

Chúng tôi sử dụng @keyframes để xác định hoạt ảnh. Từ khóa from to đượ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 ta đang xoay vòng cung 0 -độ đồng ý bằng cách sử dụng biến đổi: xoay (0deg) và ở trạng thái cuối, chúng tôi đang xoay vòng cung 360 độ bằng cách sử dụng biến đổi: xoay (360deg) .

< p> Để 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 ( xoay đồng hồ trong trường hợp của chúng tôi) cho thuộc tính animation-name của phần tử đó . Đó là những gì chúng tôi đang làm với animation-name: Rot-clock .

Chúng tôi cũng cần biết mất bao lâu để hoàn thành hoạt ảnh. Chúng tôi có thể thực hiện việc này bằng cách đặt thuộc tính animation-time thành 2s .

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 cùng tốc độ 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 animation-iteration-count để giữ cho hoạt ảnh tự tái hiện thời gian vô hạn và thuộc tính animation-timing-function để có được hoạt ảnh tuyến tính:

. profile-row .dp .dp-arc-inner {
  vị trí: tuyệt đối;
  chiều rộng: 100%;
  chiều cao: 100%;
  border: 6px solid trong suốt;
  màu viền trên cùng: # 0AE0DF;
  bán kính biên giới: 50%;
  đầu trang: -6px;
  trái: -6px;

  thời lượng hoạt ảnh: 2 giây;
  animation-name: xoay-đồng hồ;
  animation-iteration-count: vô hạn;
  animation-timing-function: tuyến tính;
}
 

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

 . Profile-row .dp {
  cơ sở linh hoạt: 33,3%;
  chức vụ: thân nhân;
  lề: 24px;
}
.profile-row .dp .dp-arc-external {
  vị trí: tuyệt đối;
  chiều rộng: calc (100% + 12px);
  chiều cao: calc (100% + 12px);
  border: 6px solid trong suốt;
  màu viền-dưới cùng: # 0AE0DF;
  bán kính biên giới: 50%;
  đầu trang: -12px;
  trái: -12px;

  thời lượng hoạt ảnh: 2 giây;
  tên-hoạt-động: xoay-chống khóa;
  animation-iteration-count: vô hạn;
  animation-timing-function: tuyến tính;
}
@keyframes xoay-chống khóa {
  từ {
    biến đổi: xoay (0deg);
  }
  đến {
    biến đổi: xoay (-360deg);
  }
}
 

Chúng tôi chỉ thay đổi trạng thái thành 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 hoạt ảnh ngược chiều kim đồng hồ.

Lưu ý rằng chúng tôi cũng đã thêm lề 24px vào .dp để nó không quá tắc nghẽn. Đây là kết quả của chúng tôi bây giờ:

Sử dụng Phông chữ Khoa học Viễn tưởng của Google

Tony ghé thăm lại và đây thời gian anh ấy hài lòng với nơi chúng tôi đang hướng tới. Tuy nhiên, chỉ có 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 miễn phí vô số phông chữ 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 “ Chọn liên kết phông chữ này ”khi bạn truy cập liên kết phông chữ 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ã & lt; link & gt; để sao chép vào HTML và mã font-family để sử dụng trong CSS:

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ẽ được hiển thị với liên kết và mã “font-family” của phông chữ đó.

Sao chép liên kết & lt; & gt; mã vào tệp HTML của bạn ngay phía trên dòng mà bạn đang đưa biểu định kiểu của mình vào.

Bây giờ, hãy thêm một số chi tiết về Người Sắt bên trong desc div:

  & lt; div class = "id-card-wrapper" & gt;
    & lt; div class = "id-card" & gt;
        & lt; div class = "profile-row" & gt;
            & lt; div class = "dp" & gt;
                & lt; div class = "dp-arc-external" & gt; & lt; / div & gt;
                & lt; div class = "dp-arc-inner" & gt; & lt; / div & gt;
                & lt; img src = "img / iron-man-dp.jpg" & gt;
            & lt; / div & gt;
            & lt; div class = "desc" & gt;
                & lt; h1 & gt; Tony Stark & ​​lt; / h1 & gt;
                & lt; p & gt; Sức mạnh: Bộ đồ Người sắt & lt; / p & gt;
                & lt; p & gt; Điểm yếu: Không có & lt; / p & gt;
                & lt; p & gt; Được biết đến với cái tên: Người Sắt & lt; / p & gt;
            & lt; / div & gt;
        & lt; / div & gt;
    & lt; / div & gt;
& lt; / div & gt;
 

Trong CSS của chúng tôi, chúng tôi sẽ sử dụng mã font-family từ Google Fonts để đặt phông chữ của desc div:

 . profile-row .desc {
  font-family: 'Orbitron', sans-serif;
  màu: # a4f3f2;
}
.profile-row .desc h1 {
  lề: 0px;
}
 

Chờ một chút, tại sao chúng tôi đặt lề của h1 thành 0 ?

Bạn thấy đấy, tất cả các phần tử tiêu đề ( h1 , h2 , h3 , h4 h5 ) đượ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 cùng và dưới cùng xung quanh các phần tử tiêu đề ngay bây giờ. Đó là lý do tại sao chúng tôi làm bằng không giới hạn cho phần tử h1 .

Hãy xem kết quả đầu ra:

Rất tiếc! Điều gì đã xảy ra?

Có vẻ như chiều cao của div dp đang tăng lên. Thông thường, nếu nội dung trong div desc có chiều cao hơn chiều cao của div dp thì không có gì xảy ra với div dp . Tuy nhiên, trong bố cục Flexbox, chiều cao của div dp cũng sẽ tăng cùng với chiều cao của div desc .

Chúng tôi không muốn dp div để tăng chiều cao bằng div desc , vì vậy chúng tôi có thể kiểm soát điều này bằng cách sử dụng mã align-self thuộc tính phụ của flexbox như sau:

 . profile-row .dp {
  cơ sở linh hoạt: 33,3%;
  align-self: trung tâm;
  chức vụ: thân nhân;
  lề: 24px;
}
 

align-self: center làm cho div dp ở giữa giữ nguyên chiều cao của nó.

Thêm Glow

Bây giờ, hãy thêm chút á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 vấn đề, nó có thuộc tính text-shadow . Nếu chúng ta tạo màu sáng cho bóng, bóng sẽ trông giống như đang phát sáng:

 . Profile-row .desc {
  font-family: 'Orbitron', sans-serif;
  màu: # d3f8f7;
  text-shadow: 0px 0px 4px # 12a0a0;
  khoảng cách giữa các chữ cái: 1px;
}
 

Trong thuộc tính text-shadow , giá trị đầu tiên, 0px , là x-offset, bóng mờ là bao nhiêu từ văn bản theo hướng x. Giá trị thứ hai, 0px , là y-offset, cho chúng ta biết bóng cách văn bản theo hướng y bao nhiêu. Giá trị thứ ba, 4px , là lượng mờ bạn muốn cung cấp cho bóng đổ. Giá trị thứ tư, # 12a0a0 , 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 ký tự thuộc tính -spacing vì văn bản có vẻ hơi tắc nghẽn.

Tiếp theo, hãy thêm bóng vào thẻ ID và hình ảnh:

 . id-card {
  cơ sở linh hoạt: 100%;
  chiều rộng tối đa: 30em;
  border: 1px solid rgb (97, 245, 245);
  margin: tự động;
  màu: #fff;
  đệm lót: 1em;
  màu nền: # 0D2C36;
  box-shadow: 0px 0px 3px 1px # 12a0a0, chèn 0px 0px 3px 1px # 12a0a0;
}
.profile-row .dp img {
  chiều rộng tối đa: 100%;
  bán kính biên giới: 50%;
  hiển thị: khối;
  hộp-bóng: 0px 0px 4px 3px # 12a0a0;
}
 

Thuộc tính text-shadow tạo bóng cho văn bản và thuộc tính box-shadow cho đổ bóng cho các phần tử.

Ba giá trị đầu tiên của box-shadow giống với text-shadow x-offset, y-offset và mơ hồ. 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 đổ.

Hãy lưu ý cách chúng tôi tạo hai bóng (bên ngoài và bên trong) cho id- thẻ div trong một dòng:

  box-shadow: 0px 0px 3px 1px # 12a0a0, inset 0px 0px 3px 1px # 12a0a0;
 

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 phân tách cả hai bằng , .

Thẻ Avengers đã sẵn sàng. Yay!

Kết thúc

Trong hướng dẫn này, chúng ta đã học một cách hiệu quả để tạo nền toàn trang và căn giữa các phần tử 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 video nhiều hơn thì bạn sẽ được tận hưởng 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à chuyển đổi xoay để tạo các vòng cung động, tuy nhiên, chúng tôi đã sử dụng một số thuộc tính và giá trị CSS hạn chế. 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 đã tạo cho thẻ ID của chúng tôi một giao diện khoa học viễn tưởng độc đáo. Chúng tôi đã sử dụng thuộc tính box-shadow để tạo ánh sáng cho các phần tử của chúng tôi. Đôi khi việc đặt thủ công các giá trị của thuộc tính box-shadow có thể phức tạp, vì vậy hãy thử sử dụng Box Shadow CSS Generator của CSSmatic để dễ dàng tạo bóng hộp.

Smashing Editorial

(rb, ra, il)

Khám phá thêm về


Xem thêm những thông tin liên quan đến chủ đề thiết kế thẻ id trong html

[HTML] ID và Class trong HTML

alt

  • Tác giả: Sơn Vina
  • Ngày đăng: 2020-09-07
  • Đánh giá: 4 ⭐ ( 9101 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ID và Class trong HTML

Thuộc tính id trong HTML, có ví dụ minh họa về thẻ ID

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 9371 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: thuoc tinh id trong html, Thuộc tính id trong HTML, có ví dụ minh họa

CÁCH TẠO GIAO DIỆN WEB ĐƠN GIẢN BẰNG HTML VÀ CSS

  • Tác giả: daotaodigitalmarketing.vn
  • Đánh giá: 3 ⭐ ( 7302 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Việc tạo giao diện web đơn giản bằng HTML và CSS ngày càng thuận tiện hơn với nhiều công cụ thiết kế web hiệu quả ra đời như Adobe Dreamweaver...

Thuộc tính ID trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 3 ⭐ ( 9864 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng thuộc tính ID để tương tác với thẻ trong HTML.

[HTML/HTML5] Phần 19: Thuộc tính class và thuộc tính id

  • Tác giả: www.dammio.com
  • Đánh giá: 5 ⭐ ( 1085 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thẻ HTML là gì? Danh sách các thẻ HTML trong thiết kế web

  • Tác giả: isinhvien.com
  • Đánh giá: 3 ⭐ ( 1441 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này sẽ tổng hợp tất cả những kiến thức về thông tin và chức năng chi tiết của tất cả các thẻ HTML hiện nay đang được hỗ trợ để lập trình thiết kế web, giúp bạn có cái nhìn tổng quát hơn và hiểu sâu hơn về HTML trong thiết kế web.

HTML Thuộc Tính ID

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 9511 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính ID được dùng để gán một giá trị duy nhất (ID) cho phần tử trên trang, giá trị này được dùng để phân biệt các phần tử khác nhau trên trang.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  AI-LAB - topica ai lab

By ads_php