いくつかの便利な CSS 関数のヒント-CSSチュートリアル-php.cn

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

小云云

リリース： 2017-11-20 13:19:20

オリジナル

1760 人が閲覧しました

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 の簡単な行:

これで、attr() 関数を使用してタイトルと説明を表示できるようになります:

.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() 関数を使用して

を背景画像として設定できることをご存知ですか?今のところ、element() 関数は Firefox でのみサポートされています:

可能性は無限です。MDN の例を次に示します。

CSS element() 関数の関連する概要については、ここをクリックしてください。

6. calc() を使用してより良いメッシュを作成する

流体メッシュは優れていますが、依然として深刻な問題があります。たとえば、上下の間隔が左右の間隔と同じになることはほとんどありません。また、異なるグリッドシステムが使用されている場合、マークアップは非常に混乱します。フレックスレイアウトは最終的な解決策ではありませんが、calc() (CSS ファイルのプロパティ値として使用できます) と組み合わせることで、より優れたグリッドを作成できます。ここで、George Martsoukos は、完璧な間隔のギャラリーグリッドなど、多くの例をリストしています。 Sass などの CSS が事前にコンパイルされた言語を使用すると、クリエイティブなグリッドシステムの構築が非常にシンプルになり、保守も容易になります。同時に、ブラウザーの calc() サポートはほぼ完璧であるため、calc() は間違いなくマスターすべき関数です。

CSS calc() 関数の概要については、ここをクリックしてください。

7. calc() を使用して、position:fixed 要素を整列させる

calc() のもう 1 つの機能は、position:fixed 要素を整列させることです。たとえば、左右に流れるスペースのあるコンテンツラッパーがあるとします。このコンテンツラッパー内の固定位置に要素を正確に配置したいとします。ただし、この場合、左側の特定の割り当てを計算するのは非常に困難です。そして適切な難易度。 calc() を使用すると、相対値と絶対値を組み合わせて要素を正確に配置できます。 (50% - 530px); /* 50% - ラッパーの幅の半分 */}

例:

この側面の詳細については、「位置を揃える: CSS 計算による要素の固定」の記事を参照してください。 @brnnbrn によって書かれました。

8. cubic-bezier() を使用してアニメーションを実装します

Web サイトやアプリのユーザーインターフェイスをより魅力的にするために、いくつかのアニメーションを使用できますが、選択できるトランジション効果の速度曲線は非常に複雑です。たとえば、リニアまたはイーズインアウトなど、制限されています。標準的なスピードカーブでは弾性運動の効果すら得られません。 cubic-bezier() 関数を使用すると、希望するアニメーションを正確に実現できます。

cubic-bezier() を使用するには 2 つの方法があります。その背後にあるメカニズムを理解して自分で作成するか、または cubic-bezier ジェネレーターを使用します。

正直に言うと、私は後者を使っています。

cubic-bezier() の詳細については、ここをクリックしてください。

まとめ

CSS 関数をよりインテリジェントに使用すると、より優れたグリッドの作成など、上記の問題を解決できるだけでなく、より創造的な自由も得られます。ブラウザーのサポートがますます向上するにつれて、calc() などの CSS 関数を使用して、以前の CSS コードを変更および改善できます。

この記事は @Anselm Urban の「8 Clever Tricks with CSS Functions」をもとに翻訳したものであり、翻訳全体に私たちの独自の理解と考えが含まれております。翻訳が良くない場合や間違っている点がある場合は、業界の友人にアドバイスを求めてください。。この翻訳を転載したい場合は、英語のソースを明記してください: https://www.sitepoint.com/8-clever-tricks-with-css-functions。

上記は 8 つの CSS 関数のヒントです。良いと思う友達はすぐに集めてください。