いくつかの便利な CSS 関数のヒント

CSS は HTML マークアップ言語のスタイル記述を提供し、その中の要素がどのように表示されるかを定義します。 CSS は Web デザインの分野における画期的な技術です。これを使用して小さなスタイルを変更し、それに関連するすべてのページ要素を更新できます。この記事では、CSS機能の便利なTipsを8つ紹介します。

1. 純粋な CSS ツールチップ

多くの Web サイトでは依然として JavaScript を使用してツールチップ効果を作成していますが、実際には CSS を使用することでより簡単に実現できます。最も簡単な方法は、HTML コードに data-tooltip="…" などのツールヒント テキストを含む属性を追加することです。次に、次のコードを CSS ファイルに追加して、attr() 関数を通じてツールヒント テキストを表示できます。 ?もちろん、ヒントにスタイルを追加するには実際にはさらに多くのコードが必要ですが、心配する必要はありません。このために設計された Hint.css および Balloon.css という強力で純粋な CSS ライブラリがあります。

2. カスタム データ属性と attr() 関数を使用する

attr() を使用してプロンプトを作成する方法を学習しましたが、この関数を使用できるシナリオもいくつかあります。データ属性と組み合わせると、HTML の簡単な行:

.caption::after { content: attr(data-title);
...
}

注: このメソッドにはブラウザのサポートに問題がある可能性があります。特定のコンテンツについては、 CSS 生成コンテンツのアクセシビリティ サポートの記事を参照してください。

3. CSS カウンター

CSS カウンターを通じて素晴らしい機能を実現できます。これはあまりよく知られたプロパティではなく、ほとんどの人はブラウザがこのプロパティを十分にサポートしていないとさえ考えるかもしれませんが、実際にはすべてのブラウザがこのプロパティをサポートしています:

ただし、CSS カウンターを順番に使用するべきではありません。 、ページネーションまたは画像ギャラリーの下に表示される番号に使用するのがより適しています。次の例では、非常に少ないコード (JavaScript も不要) で選択したアイテムをカウントする方法がわかります:

CSS カウンターは、ドラッグ アンド ドロップで並べ替えることができる動的に変化するアイテムのリストを表示するのにも最適です。 Numbers:

As最後の例では、この方法で生成されたコンテンツにはアクセシビリティの問題が発生する可能性があることに注意する必要があります。

4. CSS フィルターによって実現される曇り効果

iOS7 では、Apple は曇りガラスの層で覆われているように見える半透明でぼやけた要素である「曇りガラス」効果を実装しました。 Apple からインスピレーションを得たこのエフェクトは、さまざまな場所で使用されています。 CSS フィルターが登場する前は、この効果を再現するのは少し困難でした。このすりガラス効果を実現するには、ブラー イメージを使用する必要があります。しかし現在では、CSS フィルターはほぼすべての主要なブラウザーでサポートされているため、この効果を再現するのがはるかに簡単になっています。

将来的には、バックグラウンドフィルターとfilter()関数を通じてこの効果を実現できるようになりますが、現在両方の関数をサポートしているのはSafariだけです。

CSS フィルターの詳細については、ここをクリックして詳細をご覧ください。

5. HTML 要素を背景として使用する

一般的に、JPEG または PNG ファイルを背景として設定することも、グラデーションの背景を設定することもできます。しかし、element() 関数を使用して