CSS関数を使用した8つの巧妙なトリック

CSSの力は、多くのWeb開発者の想像力をはるかに超えています。時間が経つにつれて、StyleSheet言語はますます強力になり、元々JavaScriptを達成する必要があるブラウザに機能をもたらしました。この記事では、JavaScriptをまったく必要としない8つの巧妙なCSS機能のヒントを紹介します。

キーポイント

• CSS関数を使用して、JavaScriptなしでツールチップ、サムネイルタイトル、カウンター、霜のガラス効果などのさまざまな効果と機能を作成できます。
• calc()関数を使用して、よりスマートなグリッドシステムと固定位置要素のアラインメントを作成し、設計の柔軟性と精度を高めることができます。
また、
• css関数は、cubic-bezier()関数を使用してクリエイティブなアニメーションと、element()関数を使用してHTML要素を背景画像として使用する可能性もありますが、後者は現在Firefoxによってのみサポートされています。

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

   多くのWebサイトはまだJavaScriptを使用してツールチップを作成しますが、実際にはCSSを使用する方が簡単です。最も簡単な解決策は、HTMLコードのデータプロパティを使用して、data-tooltip="…"などのツールチップテキストを提供することです。このタグを使用すると、attr()関数内にToolTipテキストを表示するために次のようなCSSに配置できます。

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

   とてもシンプルで明確ですよね？もちろん、実際にツールチップをスタイリングするには、より多くのコードが必要ですが、心配しないでください。この目的のために、hint.cssと呼ばれる素晴らしい純粋なCSSライブラリがあります。

2. （乱用）カスタムデータ属性と属性（）function

   ツールチップに

   を使用しましたが、他にもいくつかのユースケースがあります。データプロパティを組み合わせると、HTMLコードの1行だけを使用して、サムネイル画像をタイトルと説明で作成できます。 attr()

   <a class="caption" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="秃鹫" data-description="...">
     <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="8 Clever Tricks with CSS Functions " />
   </a>

   機能を使用してタイトルと説明を表示できるようになりました。

   attr()これは、ホバーディスプレイアニメーションタイトルを備えたサムネイルの実用的な例です。

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

   注：生成されたコンテンツには、アクセシビリティに問題がある場合があります。 CSS生成コンテンツのアクセシビリティサポートに関するこの記事は、このトピックの有用な解釈を提供します。

   cssカウンター

   CSSカウンターを使用できますが、これは魔法のようです。それは最もよく知られている機能ではなく、ほとんどの人はそれがあまりうまくサポートされていないと思うかもしれませんが、実際、すべてのブラウザはCSSカウンターをサポートしています：[CSS-Countersを使用できますか？]ここにリンク）

注文されたリストにCSSカウンターを使用してはいけませんが、カウンターは、ギャラリーのアイテムの下にページネーションや数字を表示するのに最適です。選択したアイテムの数もカウントすることもできます。これは、コードが非常に少ない（およびJavaScriptがない）ことを考えると非常に印象的です。 <ol></ol>

CSSカウンターは、プロジェクトリストで動的に数値を変更するのにも最適です。これは、ドラッグアンドドロップで再注文できます。
最後の例と同様に、生成されたコンテンツにはアクセシビリティに問題がある可能性があることを忘れないでください。
CSSフィルターを使用して、つや消しのガラス効果を実現します

3. iOS 7のリリースにより、Appleは「つや消しのガラス」効果、つまり霜のついたガラスの窓のように見える透明でぼやけた要素をもたらします。 Appleの実装に触発されたこの効果は、多くの場所に現れ始めました。この効果を再現することは、CSSフィルターを使用する前に少し注意が必要です。ぼやけたイメージを使用して、霜のついたガラス効果を作成する必要があります。現在、ほとんどすべての主要なブラウザがCSSフィルターを完全にサポートするため、この効果を再現する方がはるかに簡単です。 [CSS-filtersを使用できますか？]（リンクを使用することができると仮定して、ここに挿入する必要があります） 将来的には、

   および

   関数を使用して同様の効果を作成できますが、これらの2つの関数は現在Safariによってのみサポートされています。

   backdrop-filter filter()

   html要素を背景画像
4. として使用します

   通常、jpegまたはpngファイルを背景画像として指定するか、勾配を指定します。しかし、関数を使用して、を背景画像として使用することもできることをご存知ですか？現在、

   関数はFirefoxによってのみサポートされています：[CSS-Element-Functionを使用できますか？]（ここにリンクを使用できると仮定して）

   element()可能性はほとんど無限です。MDNの例を示します。 <div> <code>element()

   calc（）
5. でよりスマートなグリッドを作成します

   流動的なメッシュは素晴らしいことですが、いくつかの深刻な問題があります。たとえば、上部と下部の間の間隔を左と右の間隔と同じサイズにすることはできません。また、マーキングは、使用しているグリッドシステムに応じて非常に混乱しています。 FlexBox自体でさえ最終的なソリューションではありませんが、関数を使用すると、グリッドが良くなる可能性があります。このウェブサイトのこのチュートリアルでは、George Martsoukosは、完璧な間隔のあるギャラリーグリッドなど、いくつかの実用的な例を示しています。 SASSのようなCSSプリプロセッサを使用すると、クリエイティブメッシュシステムの構築は非常にシンプルでメンテナンスが簡単です。ブラウザのサポートはほぼ完璧であるため、は間違いなく使用すべき便利な機能です。 [calcを使用できますか？]（ここにリンクを使用できると仮定して）

   calc() calc()

   css calc（）を使用して位置を調整します関数の別のユースケースは、固定位置に要素を整列することです。たとえば、左と右に流体間隔でコンテンツラッパーがあり、そのラッパー内の固定要素を正確に整列させたい場合は、「右」または「左」属性の選択を決定するのに苦労します。 ？

   では、相対値と絶対値を組み合わせて要素を完全に整列させることができます。 calc() calc()これは例です。

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

   cubic-bezier（）
6. でアニメーション化します

   ウェブサイトまたはアプリケーションのUIをより魅力的にするために、アニメーションを使用できますが、標準の緩和オプションは非常に限られています。たとえば、「線形」または「容易さ」。標準的なオプションがあっても、アニメーションを跳ね返すようなものは不可能です。 関数を使用すると、必要に応じて要素をアニメーション化できます。

   - その背後にある数学を理解して自分で構築するか、cubic-bezier()ジェネレーターを使用する2つの方法があります。

   正直なところ、後者を選択します。 cubic-bezier() cubic-bezier

   結論

CSS関数の巧みな使用は、既知の問題（よりスマートなグリッドシステムの構築など）を解決するだけでなく、より大きな創造的な自由を提供します。ブラウザのサポートが良くなるため、CSSを注意深く調べて、などの機能を使用して改善する必要があります。

CSS関数に関するよくある質問calc()

初心者として、どのような基本的なCSS関数を理解する必要がありますか？ CSS関数は、CSS属性の値を設定するために使用されます。すべての初心者が知っておくべきいくつかの基本的な機能には、

、

、

、

、rgb()、およびrgba()が含まれます。 hsl()およびhsla()関数は色を定義するために使用されますが、calc()およびrgb()関数は、色相、飽和、明るさに基づいて色を定義するために使用されます。 rgba()関数を使用すると、計算を実行してCSS属性値を決定できます。 hsl() hsla() CSSでcalc（）関数を使用する方法は？ calc() CSSの

関数は、属性値として使用できる計算を実行するために使用されます。この関数は、 ""（添加）、 " - "（縮小）、「*」（複数）、および「/」（分割）数学演算子を使用できます。たとえば、以下に示すように、ビューポート幅50％に常に20ピクセルをマイナスしたDIVを作成することができます：

。

CSSのRGB（）とRGBA（）関数の違いは何ですか？ calc() calc()cssのdiv { width: calc(50% – 20px); }関数と

関数の主な違いは、

に色の不透明度を指定するアルファチャネルが含まれていることです。アルファパラメーターは、0.0（完全に透明）から1.0（完全に不透明）の数です。たとえば、半透明の赤を設定するには、次のことを使用できます。

CSS関数を使用してグラデーションを作成する方法は？

CSS関数を使用して、linear-gradient()およびradial-gradient()関数を使用して勾配を作成できます。たとえば、赤から青まで線形勾配を作成するには、次のものを使用できます。同様に、中央の赤から青の端までの放射状の勾配を作成するには、background: linear-gradient(red, blue);を使用できます。 background: radial-gradient(red, blue);

CSS関数を使用して要素を変換できますか？
はい、CSS関数を使用して要素を変換できます。

属性は、transform、rotate()、scale()、skew()などのさまざまな関数で使用できます。要素の外観を変更できます。たとえば、要素を45度回転させるには、translate()を使用できます。 transform: rotate(45deg);

CSSのattr（）関数の目的は何ですか？

cssの

関数は、選択した要素の属性値を返すために使用されます。これは、コンテンツなどを生成するのに役立ちます。たとえば、

を使用して、Tooltip：attr()にリンクの「HREF」プロパティの値を表示できます。 attr() a:after { content: attr(href); } CSSでvar（）関数を使用する方法は？

CSSの

関数は、カスタムプロパティの値（「CSS変数」とも呼ばれる値を挿入するために使用されます。たとえば、カスタムプロパティを定義してから、次のようにCSSで使用できます。

var()CSS関数を使用してアニメーションを作成できますか？ --main-color: blue; color: var(--main-color);はい、CSS関数を使用してアニメーションを作成できます。 cssの

属性は、

、

、

などを含む8つの異なる属性に対して省略された属性です。たとえば、「slidein」と呼ばれる2秒のアニメーションを作成するには、animationを使用できます。 animation-name CSSにおけるanimation-durationurl（）関数の目的は何ですか？ animation-timing-function CSSのanimation: slidein 2s;

の関数は、ファイルを含めるために使用されます。関数の最も一般的な使用は、外部スタイルシートにリンクするか、画像を含めることです。たとえば、要素の背景画像を設定するには、

を使用できます。

CSS関数を使用して3D変換を作成できますか？ url() url()はい、CSS関数を使用して3D変換を作成できます。 cssのbackground-image: url('image.jpg');属性は、

、

、

、

、transform、rotateX()などの関数で使用して、3D変換を作成できます。たとえば、x軸の周りに要素を回転させるには、rotateY()を使用できます。 rotateZ() scale3d()元のテキストをオリジナル化し、画像の元の形式と場所を保存するために最善を尽くしたことに注意してください。 Codepenにアクセスできず、Webサイトを使用できます。関連するリンクをプレースホルダーに置き換えました。正しいリンクを見つけて挿入してください。 translate3d()