見て！ CSS の実践的な 10 のヒント (共有)

この記事では、フロントエンド開発を容易にするための 10 の優れた CSS 実践的なヒントを紹介します。ぜひ集めてください。皆さんのお役に立てれば幸いです。

CSS 約 200 のプロパティがあります。多くの属性は相互に関連しており、すべての属性の詳細を分類することは不可能です。したがって、この記事では、開発者とデザイナーが参照できるように役立つ CSS のヒントをいくつか紹介します。 [推奨学習: css ビデオ チュートリアル ]

1. タイピング効果

# #Web デザインはますますクリエイティブになっています。

CSS アニメーションと連携すると、Web ページが生きているように見えます。この例では、animation 属性と @keyframes 属性を使用して、タイピング効果を実現します。

具体的には、このデモでは、

steps() 属性を使用してテキストを分割する効果を実現します。まず、step() で渡す量を指定する必要があります。この場合、これはテキストの長さです。

次に、2 番目のステップで、

@keyframes を使用して、アニメーションの実行を開始するタイミングを宣言します。

step() の数値を変更せずに、テキスト テキストのタイピング効果 の後にコンテンツを追加した場合、この効果は発生しません。

この効果は特に新しいものではありません。ただし、多くの開発者は、

CSS を使用する代わりに、JavaScript ライブラリを使用してこれを実装しています。

コード スニペット

2. 透明画像シャドウ効果

box-shadow

を使って透明な画像に影を付けて、枠線が追加されたように見せたことはありますか?ただし、解決策は drop-shadow を使用することです。

drop-shadow

の仕組みは、指定された画像の Alpha チャネルをたどることです。したがって、影は画像の外側に現れるのではなく、画像の内部の形状に基づいています。 #コード スニペット

3. カスタム カーソル

# #サイト訪問者に独自のカーソルの使用を強制する必要はありません。少なくとも、ユーザーエクスペリエンスを目的としたものではありません。ただし、

cursor 属性について注意すべき点は、画像を表示できるということです。これは、写真形式でツールチップを表示するのと同じです。

ユーザー ケースによっては、2 つの異なる写真を比較することが含まれますが、これらの写真をビュー ウィンドウでレンダリングする必要はありません。例: cursor 属性をデザインで使用すると、スペースを節約できます。特定の

div

要素内で特定のカーソルをロックできるため、この div は効果がありません。 現在、画像のサイズには制限があり、読者は検証のために変更できます

コード スニペット

4. attr() を使用してツールチップを表示します

##attr()

属性は私が最近発見したものですこれは最も誇りに思う発見です。当初は tooltip

機能をサイトに追加する予定でしたが、プラグインを導入する必要があることがわかり、不要なものが導入され、サイトが肥大化してしまいました。ありがたいことに、これは

attr() を使用することで回避できます。 attr() 属性の仕組みは非常に簡単です。ステップごとに分析してみましょう。

• tooltip クラスを使用して、tooltip 情報を表示する必要がある要素をマークします。次に、要素に好きなスタイルを追加します。この便宜的なデモンストレーションでは、dotted border-bottom スタイルを使用します。
• 次に、特定の attr() を指すコンテンツ content を含む :before 疑似要素を作成します。これは attr(tooltip-data) を指します。
• 次に、:hover 疑似クラスを作成します。ユーザーが要素の上にマウスを移動すると、opacity が 1 に設定されます。 。

さらに、カスタム スタイルを含めることもできます。 tooltp に設定したデータに応じて、幅や余白を調整する必要がある場合があります。 tooptip-data art() クラスを設定したら、それをデザインの他の部分に適用できます。

5. 純粋な CSS 実装のアカウンティング リスト

最初に述べたように、CSS は徐々に成熟しています。この動的リストのデモは良い例です。

入力タイプ checkbox と :checked 疑似クラスを使用します。 :checked が true の場合を返す場合、transform 属性を使用して状態を変更します。

この方法を使用すると、さまざまな目標を達成できます。たとえば、ユーザーが指定されたチェックボックスをクリックすると、その内容が非表示になります。入力 input タイプのラジオとチェックボックスで使用されます。もちろん、これは <option></option> および <select></select> 要素にも適用できます。

6. <span style="font-size: 18px;">:is()</span>## を使用します。 # および :where()<span style="font-size: 18px;"></span> 要素スタイルを追加します

Modern

CSS フレームワークが動作する方法の 1 つは、条件付きロジック セレクターを使用することです。つまり、:is() プロパティと :where() プロパティを使用して、複数のデザイン要素を同時にスタイル設定できます。しかし、さらに重要なのは、これらのプロパティを使用して、個別に処理する必要がある要素をクエリできることです。

以下の

CSS スニペットは小さな例です。:is() と について詳しくは、MDN をご覧ください。 where() の内容。

#コード スニペット

7. キー フレームを使用してアコーディオン プルダウン効果を実現します

JavaScript

ライブラリ (jQuery、Cash など) は、単純なズーム機能を使用したい場合でも、インポートする必要があります。全体的に。幸いなことに、この導入を回避できる CSS トリックがたくさんあります。たとえば、次のアコーディオン スニペット コードです。 現在の

web

のデザイン トレンドを注意深く見てみると、アコーディオン デザインの効果がランディング ページに見られることがわかります。これは、コンテンツを圧縮してデザインスペースを節約する方法です。よくある質問、製品の機能、使用上のヒント、その他の機能はすべてアコーディオン内に実装できます。以下は、これを実践するための純粋な CSS コード スニペットです。

コード スニペット

8. サイドバーのホバー効果

CSS を使用して動的な Hover 効果を実現できるサイドバーはありますか?もちろん、これは transform プロパティと :hover プロパティのおかげで可能です。

互換性のために、さまざまなモバイル端末でテストしましたが、かなり良い感じでした。ただし、この効果はモバイルよりデスクトップでスムーズに機能します。

この演習の例では、position: Sticky; を使用してスティッキー サイドバーを作成するとうまく機能します。

9. 最初の文字を大文字にするには、最初の文字を使用します

CSS では、特定の first-of-type 要素を選択できます。この例では、::first-letter 擬似クラスを使用して、最初の文字を大文字にする効果を実現します。このクラスを使用すると、より自由にスタイルを追加できます。したがって、サイトのデザイン スタイルに合わせて大文字のスタイルを調整できます。

このプロパティについて言えば、それを使ってさまざまなことができます。特定の要素がページに初めて表示されるとき、first-of-type を使用してスタイルを個別に追加できます。ただし、以下のコードが示すように、要素がすでに表示されている場合でも、複数の要素でそれを使用できます。

#コード スニペット

10.::before を使用してボタンのアイコンを追加します

##他の外部リソースにリンクする必要がある場合は、カスタム ボタンを使用してそれを実現します。正確にはアイコンを追加するボタンです。 Google で簡単に検索すると、多数の

ボタン ジェネレーター

が見つかりますが、私はいつでも使用できる一般的なソリューションに興味があります。 そこで、これを実現するために、特定のボタンに

:before

疑似要素を作成しました。明記する必要があるのは、コード スニペット内の content:"\0000a0"; は   の Unicode エスケープであるということです。 幅と高さの属性を使用してアイコンのサイズを調整し、ボタンのスタイルに合わせて調整できます。

コード スニペット

最も重要なのは、これらの

CSS

のヒントは、 JavaScript を使用せずに機能を実装できる可能性を強調していることです。上記のヒントを使用して、デザインに適用できます。実際、これらの例の多くは自由なスタイルのデザインを作成するために組み合わせて使用​​できます。 もちろん、これにはまだ改善の余地が必要です。これらの小さなトリックだけでフレームワークやライブラリの使用を過小評価するべきではありません。 。

ただし、長い

JavaScript

関数を記述する必要はなく、CSS を通じてデザイン効果を実現できるようになっています。

英語原文アドレス: https://stackdiary.com/useful-css-tricks/

この記事は意訳による翻訳です。

【終了】

（学習動画共有：

Webフロントエンド

）

以上が見て！ CSS の実践的な 10 のヒント (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。