CSS には多くの関数が含まれており、以前は JavaScript が必要だった多くのことを実行できます。毎年新しい機能が追加されるため、開発が容易になり、JavaScript への依存が軽減されます。 CSS 関数は CSS が持つ最も強力な機能の 1 つであり、この記事では私が便利だと思ういくつかの機能について説明します。
(学習ビデオ共有: css ビデオ チュートリアル)
attr
関数は、選択された情報を取得するために使用されます。要素の属性値。 プロパティ名
、タイプ
、およびデフォルト値
の3つのパラメータを受け入れます。
文法:
attr( attribute-name <type-or-unit>? [, <fallback> ]? )
例:
<p data-text="the attr function" data-tooltip="Hi from attr!" class="attr">This text is combined with</p>
css
p::after { content: ' ' attr(data-text); } p.attr:hover::after { content: ' ' attr(data-tooltip); background-color: orange; color: white }
効果:
ソースコード: https://codepen.io/protic_milos/pen/GRpYJKd
この関数を使用すると、正確な値を指定する代わりに CSS 値を計算できます。値 。通常、要素のサイズまたは位置を計算するために使用されます。加算、減算、乗算、除算をサポートします。
注意すべき重要な点 は、
演算子と -
演算子はスペースで区切る必要があるということです。そうしないと、正しく機能しません。 # 演算子と
/
演算子にはこの制限はありませんが、一貫性の理由からスペースを追加することをお勧めします。
また、優れているのは、CSS ユニットを混合できることです。たとえば、パーセンテージとピクセルを減算できます。
calc
を使用して要素を中央に配置した例を構築できます:
<p class="calc">Centered with calc</p>
css
p.calc { padding: 10px; background-color: orange; color: white; width: 200px; text-align:center; margin-left: calc(50% - 100px) }
効果:
#ソースコード: https://codepen.io/protic_milos/pen/GRpYJKdvar()この関数を通じて、次のことができます。カスタム プロパティの値は、別の CSS プロパティの値として使用されます。簡単に言うと、色を定義できます。たとえば、それをカスタム プロパティ (CSS 変数) に入れ、
var 関数を呼び出してそのプロパティ値を再利用できます。
:root { --bg-color: green; --color: white } p.var { background-color: var(--bg-color); color: var(--color) }
ソースコード: https://codepen.io/protic_milos/pen/GRpYJKdcounter()個人的には、この方法を使ったことはありませんが、面白そうです。この関数は、指定されたカウンターの現在値を返します。
counter-reset および
counter-increment と組み合わせて使用する必要があります。
<div class="counter"> <span>Mars</span> <span>Bounty</span> <span>Snickers</span> </div>
ソースコード: https://codepen.io/protic_milos/pen/GRpYJKdcircle()
clip-path プロパティ値です。
<img class="circle" src="https://devinduct.com/Uploads/PostImages/1122dcb9-954a-4641-9ca6-c38e9472698f.png" />
img.circle { clip-path: circle(30%); }
ソースコード: https://codepen.io/protic_milos/pen/GRpYJKd概要これまで何度も述べてきたように、多くの場合、開発者は CSS の可能性を無視しており、そのため Web サイトのシンプルさが失われています。毎年、必要なデザイン機能を CSS に頼ることができます。それは素晴らしいことです。JavaScript はデザインではなく他のことに焦点を当てるべきです。 プログラミング関連の知識について詳しくは、
プログラミング入門をご覧ください。 !
以上が便利なCSS関数5選(共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。