CSSの力は、多くのWeb開発者の想像力をはるかに超えています。時間が経つにつれて、StyleSheet言語はますます強力になり、元々JavaScriptを達成する必要があるブラウザに機能をもたらしました。この記事では、JavaScriptをまったく必要としない8つの巧妙なCSS機能のヒントを紹介します。
キーポイント
calc()関数を使用して、よりスマートなグリッドシステムと固定位置要素のアラインメントを作成し、設計の柔軟性と精度を高めることができます。 cubic-bezier()関数を使用してクリエイティブなアニメーションと、element()関数を使用してHTML要素を背景画像として使用する可能性もありますが、後者は現在Firefoxによってのみサポートされています。 純粋なCSSツールチップ
多くのWebサイトはまだJavaScriptを使用してツールチップを作成しますが、実際にはCSSを使用する方が簡単です。最も簡単な解決策は、HTMLコードのデータプロパティを使用して、data-tooltip="…"などのツールチップテキストを提供することです。このタグを使用すると、attr()関数内にToolTipテキストを表示するために次のようなCSSに配置できます。
.tooltip::after {
content: attr(data-tooltip);
}
（乱用）カスタムデータ属性と属性（）function
ツールチップにを使用しましたが、他にもいくつかのユースケースがあります。データプロパティを組み合わせると、HTMLコードの1行だけを使用して、サムネイル画像をタイトルと説明で作成できます。
attr()
<a class="caption" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="秃鹫" data-description="..."> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg" class="lazy" alt="8 Clever Tricks with CSS Functions " /> </a>
attr()これは、ホバーディスプレイアニメーションタイトルを備えたサムネイルの実用的な例です。
.caption::after {
content: attr(data-title);
...
}
cssカウンター
CSSカウンターを使用できますが、これは魔法のようです。それは最もよく知られている機能ではなく、ほとんどの人はそれがあまりうまくサポートされていないと思うかもしれませんが、実際、すべてのブラウザはCSSカウンターをサポートしています：[CSS-Countersを使用できますか？]ここにリンク）注文されたリストにCSSカウンターを使用してはいけませんが、カウンターは、ギャラリーのアイテムの下にページネーションや数字を表示するのに最適です。選択したアイテムの数もカウントすることもできます。これは、コードが非常に少ない（およびJavaScriptがない）ことを考えると非常に印象的です。 <ol>
最後の例と同様に、生成されたコンテンツにはアクセシビリティに問題がある可能性があることを忘れないでください。
CSSフィルターを使用して、つや消しのガラス効果を実現します
iOS 7のリリースにより、Appleは「つや消しのガラス」効果、つまり霜のついたガラスの窓のように見える透明でぼやけた要素をもたらします。 Appleの実装に触発されたこの効果は、多くの場所に現れ始めました。この効果を再現することは、CSSフィルターを使用する前に少し注意が必要です。ぼやけたイメージを使用して、霜のついたガラス効果を作成する必要があります。現在、ほとんどすべての主要なブラウザがCSSフィルターを完全にサポートするため、この効果を再現する方がはるかに簡単です。 [CSS-filtersを使用できますか？]（リンクを使用することができると仮定して、ここに挿入する必要があります） 将来的には、
および関数を使用して同様の効果を作成できますが、これらの2つの関数は現在Safariによってのみサポートされています。
backdrop-filter
filter()
通常、jpegまたはpngファイルを背景画像として指定するか、勾配を指定します。しかし、関数を使用して、を背景画像として使用することもできることをご存知ですか？現在、
関数はFirefoxによってのみサポートされています：[CSS-Element-Functionを使用できますか？]（ここにリンクを使用できると仮定して）
element()可能性はほとんど無限です。MDNの例を示します。 <div>
element()
流動的なメッシュは素晴らしいことですが、いくつかの深刻な問題があります。たとえば、上部と下部の間の間隔を左と右の間隔と同じサイズにすることはできません。また、マーキングは、使用しているグリッドシステムに応じて非常に混乱しています。 FlexBox自体でさえ最終的なソリューションではありませんが、
calc()
calc()
では、相対値と絶対値を組み合わせて要素を完全に整列させることができます。
calc()
calc()これは例です。
.tooltip::after {
content: attr(data-tooltip);
}ウェブサイトまたはアプリケーションの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の
CSSのRGB（）とRGBA（）関数の違いは何ですか？ calc()
calc()cssのdiv { width: calc(50% – 20px); }関数と
CSS関数を使用して、linear-gradient()およびradial-gradient()関数を使用して勾配を作成できます。たとえば、赤から青まで線形勾配を作成するには、次のものを使用できます。同様に、中央の赤から青の端までの放射状の勾配を作成するには、background: linear-gradient(red, blue);を使用できます。 background: radial-gradient(red, blue);
属性は、transform、rotate()、scale()、skew()などのさまざまな関数で使用できます。要素の外観を変更できます。たとえば、要素を45度回転させるには、translate()を使用できます。 transform: rotate(45deg);
を使用して、Tooltip：attr()にリンクの「HREF」プロパティの値を表示できます。 attr()
a:after { content: attr(href); } CSSでvar（）関数を使用する方法は？
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()
以上がCSS関数を使用した8つの巧妙なトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
