CSS で Github プロフィールを目立たせる-CSSチュートリアル-php.cn

CSS で Github プロフィールを目立たせる

DDD

リリース： 2024-09-13 06:20:37

オリジナル

593 人が閲覧しました

これまで、Github プロフィールをカスタマイズできる唯一の方法は、写真を更新するか名前を変更することでした。これは、すべての Github プロファイルが同じに見え、カスタマイズしたり目立たせるためのオプションが最小限であることを意味しました。

それ以来、Markdown を使用してカスタムセクションを作成するオプションが利用できるようになりました。履歴書、興味のあること、趣味を含めて、プロフィールにあなた自身を反映させることができます。これは、あなたのプロフィールにアクセスしたときに誰もが目にする主要なセクションの 1 つです。

この記事では、私がひねりを加えて Github Readme を作成した方法を紹介します。 Markdown を使用して、その主な問題を解決していきます。色を変更したり、位置や間隔を調整したりすることができないため、制限が非常に厳しいという問題があります。これを解決するには、Github Readme に CSS を追加し、より良い UX を提供するトランジションを追加する方法があります。

しかし、まずは Readme を作成することから始めましょう。このためには、Github ユーザー名とまったく同じ新しいパブリックリポジトリを作成する必要があります。これが固有のリポジトリであることを示す小さなテキストが表示されます。

Make Your Github Profile Stand Out With CSS

[README.md]() ファイルで更新した内容は、プロフィールに表示されます。 Markdown 構文または HTML を使用してコンテンツを表示できます。インラインスタイル、CSS ファイル、または JavaScript を追加すると、Github によって削除されるため、その解決策は無効です。

解決策

README.md ファイルには画像を含めることができます。これには SVG ファイルが含まれます。 CSS の追加を可能にする抜け穴は、SVG ファイル内のforeignObject 要素を使用してカスタム HTML と CSS を埋め込むことです。 externalObject 要素を使用すると、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