首頁 > web前端 > css教學 > 主體

使用 CSS 讓您的 Github 個人資料脫穎而出

DDD
發布: 2024-09-13 06:20:37
原創
554 人瀏覽過

以前,自訂 Github 個人資料的唯一方法是更新圖片或更改名稱。這意味著每個 Github 設定檔看起來都一樣,自訂它或脫穎而出的選項很少。

從那時起,您可以選擇使用 Markdown 建立自訂部分。您可以包括您的履歷、您的興趣和嗜好,讓您的個人資料反映您的身分。這是任何人在訪問您的個人資料時看到的主要部分之一。

在這篇文章中,我將向您展示我如何建立我的 Github 自述文件。我將使用 Markdown 並解決它的主要問題。問題是它可能受到高度限制,因為您無法更改顏色,調整位置和間距可能很困難。要解決這個問題,有一種方法可以將 CSS 添加到 Github 自述文件中,甚至添加過渡以呈現更好的 UX。

但讓我們先從建立自述文件開始。為此,您需要建立一個新的公共儲存庫,該儲存庫正是您的 Github 使用者名稱。您將看到一個小文本,表明這將是一個獨特的存儲庫。

Make Your Github Profile Stand Out With CSS

現在,無論您在 [README.md]() 檔案中更新什麼,它都會顯示在您的個人資料中。您可以使用 Markdown 語法或 HTML 來顯示您的內容。如果您新增任何內聯樣式、CSS 檔案或 JavaScript,它將被 Github 刪除,因此該解決方案是行不通的。

解決方案

在 README.md 檔案中,您可以包含映像。其中包括 SVG 檔。使我們能夠新增 CSS 的漏洞是使用 SVG 檔案中的foreignObject 元素嵌入自訂 HTML 和 CSS。 foreignObject 元素可讓您在 SVG 圖形中包含來自其他標記語言的元素。

讓我們在儲存庫中建立一個新文件,名為 header.svg。就我而言,我希望在我的個人資料上顯示一條文本,內容為 CodeFlow.,具有漂亮的漸變和打字機效果。為了實現這一點,我在 SVG 檔案中的foreignObject 中編寫了一些 CSS 和一些 HTML :

<svg fill="none" width="100%"  xmlns="http://www.w3.org/2000/svg">
 <foreignObject width="100%" height="100%">
  <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .wrapper {
          height: 100vh;
          display: grid;
          place-items: center;
        }

        .text {
          width: 9ch;
          animation: typing 1.5s steps(9), blink .5s step-end infinite alternate;
          white-space: nowrap;
          overflow: hidden;
          border-right: 3px solid;
          font-family: monospace;
          font-size: 4em;
          background: linear-gradient(90deg, rgba(0,241,220,1) 0%, rgba(86,115,241,1) 44%, rgba(103,68,241,1) 54%, rgba(254,0,255,1) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        @keyframes typing {
          from {
            width: 0
          }
        }

        @keyframes blink {
          from, to { border-color: transparent }
          50% { border-color: rgba(254,0,255,1); }
        }
      </style>
      <div class="wrapper">
        <div class="text">
          CodeFlow.
        </div>
      </div>
  </div>
 </foreignObject>
</svg>
登入後複製

現在讓我們更新 README.md 檔案以使用此 SVG 作為圖像並將其顯示在我們的個人資料中:

<div align="center">
 <a class="link" href="https://github.com/codeflowjs/codeflowjs/blame/main/header.svg">
  <img class="image" src="header.svg" alt="Click to see the source">
 </a>
</div>
登入後複製

Make Your Github Profile Stand Out With CSS

就是這樣。它實際上只是封裝在 SVG 中的一些 CSS 和 HTML。查看下面的最終結果,或者如果您想查看實際效果,我的 Github 個人資料在這裡

以上是使用 CSS 讓您的 Github 個人資料脫穎而出的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!