文字列の最初の文字を取得してテキストアイコン機能を実現する純粋なCSS

CSS でテキストアイコンを実装する方法

/*アイコンスタイル*/
.nav-icon-normal {
    幅: 32px;
    高さ: 32px;
    行の高さ: 33px;
    表示: インラインブロック;
    境界線の半径: 6px;
    背景色: #b3b4c5;
    垂直位置合わせ: 中央;
    オーバーフロー: 非表示;
    フォントサイズ: 16px;
    テキストインデント: 8px;
    テキスト配置: 中央;
    文字間隔: 8px;
    色: #fff;
    単語区切り: 全区切り;
}

<div class="nav-icon-normal">テクノロジーが基盤です</div>
<div class="nav-icon-normal">能力が鍵です</div>
<div class="nav-icon-normal">コミュニケーションが最も重要です</div>
<div class="nav-icon-normal">一般的なインターフェース</div>

効果プレビュー

この方法で基本的な効果は達成されますが、まだ少し足りません。アイコンの背景色をテキストに合わせて変更する方法

このJsを読んで名前に応じて色の値を抽出することができます

どのように実装するかは、こちらをご覧ください。以下のコードは、この記事では例としてのみ使用されています。実際の使用は、実際の状況に応じて調整する必要があります。

var titles = ["テクノロジーが基礎です", "能力が鍵です", "コミュニケーションが最も重要です", "ユニバーサルインターフェース"];
var html = "";
(i = 0 とします; i < titles.length; i++) {
    定数title = titles[i];
    定数 color = extractColorByName(タイトル);
    html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title);
}
// 出力document.write(html);
/**
 * 名前で色を抽出* @param name name*/
関数 extractColorByName(名前) {
    var temp = [];
    temp.push("#");
    for (let index = 0; index < name.length; index++) {
        temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
    }
    temp.slice(0, 5).join('').slice(0, 4); を返します。
}

導入後の効果は以下のとおりです

最後にケースコードを添付します

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <スタイル>
        /*アイコンスタイル*/
        .nav-icon-normal {
            幅: 32px;
            高さ: 32px;
            行の高さ: 33px;
            表示: インラインブロック;
            境界線の半径: 6px;
            背景色: #b3b4c5;
            垂直位置合わせ: 中央;
            オーバーフロー: 非表示;
            フォントサイズ: 16px;
            テキストインデント: 8px;
            テキスト配置: 中央;
            文字間隔: 8px;
            色: #fff;
            単語区切り: 全区切り;
        }
    </スタイル>
</head>
 
<本文>
    <script type="text/javascript">
        var titles = ["テクノロジーが基礎です", "能力が鍵です", "コミュニケーションが最も重要です", "ユニバーサルインターフェース"];
            var html = "";
            (i = 0 とします; i < titles.length; i++) {
                定数title = titles[i];
                定数 color = extractColorByName(タイトル);
                html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title);
            }
            // テストHTMLを出力する
            ドキュメントを書き込みます。
            /**
             * 名前で色を抽出* @param name name*/
            関数 extractColorByName(名前) {
                var temp = [];
                temp.push("#");
                for (let index = 0; index < name.length; index++) {
                    temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
                }
                temp.slice(0, 5).join('').slice(0, 4); を返します。
            }
               </スクリプト>
</本文>
 
</html>

要約する

これで、文字列の最初の文字を取得して純粋な CSS を使用してテキストアイコン機能を実装する方法に関する記事は終了です。テキストアイコンの実装に関するより関連性の高い CSS コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JS 4つの楽しいハッカー背景効果コードを共有する

>>: iframe を使用して Web ページに他の Web ページを埋め込む方法