ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS で作成された小さな関数のいくつかの例

純粋な CSS で作成された小さな関数のいくつかの例

小云云オリジナル: 2017-11-21 10:58:052333ブラウズ

CSS は HTML マークアップ言語のスタイル記述を提供し、その中の要素がどのように表示されるかを定義します。 CSS は Web デザインの分野における画期的な技術です。これを使用して小さなスタイルを変更し、それに関連するすべてのページ要素を更新できます。現在、CSS をベースにして CSS3 が新たにリリースされていますが、CSS は依然としてフロントエンド作業において非常に重要です。以下に CSS で作られた小さな機能の例をいくつか紹介します。

CSS@supports

優秀なフロントエンド開発者は、一部のブラウザーにはない機能を使用するときに機能テストを実行する必要があります。機能テストは常に JavaScript で行われており、多くの人が機能テストを行うために、多くの十分にテストされたケースから作られた優れたユーティリティである Modernizr を使用しています。ただし、新しい API: @supports が開発者向けに登場し、CSS を使用して機能テストを行うことができます。 @supports がどのように機能するかの簡単な例をいくつか示します:

コードは次のとおりです:

/* basic usage */@supports(prop:value) {/* more styles */}
/* real usage */@supports (display: flex) {p { display: flex; }}
/* testing prefixes too */@supports (display: -webkit-flex) or(display: -moz-flex) or(display: flex) 
{section {display: -webkit-flex;display: -moz-flex;display: flex;float: none;}}

この新しい @supports 機能には、対応する JavaScript バージョンもありますが、有効期限が切れていますので、すぐに使用できることを楽しみにしています。

CSS フィルター

画像の色調を変更するサービスを作成すれば、それを Facebook に数十億ドルで販売できます。確かに、それは簡単なことですが、画像フィルターを作成することは科学ではありません。 Mozilla での最初の週に私が書いた小さなプログラム (賞を受賞しました、えっと、言ってるだけです) では、JS ベースの数学を使用して Canvas を使用して画像フィルターを作成していましたが、今では CSS Filtered を使用して画像を作成できるようになりました。

コードは次のとおりです:

/* simple filter */.myElement {-webkit-filter: blur(2px);}
/* advanced filter */.myElement {-webkit-filter: blur(2px) 
grayscale (.5) opacity(0.8) hue-rotate(120deg);}

このタイプのフィルターは、画像の元の外観を変更するだけです。上記のフィルターは、画像の保存またはエクスポート時には使用されませんが、写真を美しくしたり、加工する必要がある場合に非常に役立ちます。使いやすいポスター。

Pointr イベントとブリッキングクリック

CSS の Pointr Events プロパティは、要素を効果的に無効にする方法を提供します。このため、JavaScript を介してリンクをクリックしてもクリックイベントはトリガーされません。

コードは次のとおりです。

/* do nothing when clicked or activated */.disabled { pointer-events: none; }
/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {alert("Clicked!");});

上記の例では、CSS の pointer-events 値により、クリックイベントは発生しません。これは大きな利点であることがわかりました。一部の要素が無効になっていることを確認するために、クラス名や属性をどこでもチェックする必要がありません。

メニューの折りたたみと展開

CSS を使用すると、トランジション効果やアニメーションを作成できますが、多くの場合、一部のものを変更したり、アニメーションを制御したりするために JavaScript ライブラリが必要になります。非常に人気のあるアニメーションは、メニューの折りたたみと展開のエフェクトです。これが CSS だけで実現できることはあまり知られていません。

コードは次のとおりです:

/* slider in open state */.slider {overflow-y: hidden;max-height: 500px; /* approximate max height */
transition-property: all;transition-duration: .5s;transition-timing-function: cubic-bezier(0, 1, 0.5, 1);}
/* close it with the "closed" class */.slider.closed {max-height: 0;}

Max-height を賢く使用すると、目的の効果に応じて要素を折りたたんだり展開したりできます。

CSS カウンター

Web 上で「カウンター」という用語を聞くと、それが何を意味するのかよくクスッと笑ってしまいますが、CSS カウンターは私たちをさらにクスッとさせるもう 1 つのものです。 CSS カウンターを使用すると、開発者は :before と :after を使用して、指定した要素のカウンターを増分できます:

コードは次のとおりです:

/* initialize the counter */ol.slides {counter-reset: slideNum;}
/* increment the counter */ol.slides > li {counter-increment: slideNum;}
/* display the counter value */ol.slides li:after {content: "[" counter(slideNum) "]";}

CSS カウンターは、スライド効果やフォームコンテンツなどのリストで使用されることがよくあります。

Unicode CSS スタイル名

CSS のベストプラクティスに関するドキュメントは数多くありますが、それらはすべて CSS スタイルの名前の付け方から始まります。スタイルに名前を付けるために Unicode 記号を使用するように記載されている文書は決してありません:

コードは次のとおりです:

.ಠ_ಠ {border: 1px solid #f00;background: pink;}
.❤ {background: lightgreen;border: 1px solid green;}

これらの記号は使用しないでください。できなければ！

CSSサークル

CSSトライアングルは技術的な仕事ですが、CSSサークルも同様です。 CSS の border-radius を悪用すると、完全な円を作成できます。

コードは次のとおりです:

circle {
border-radius: 50%;
width: 200px;
height: 200px; 
/* width and height can be anything, as long as they&#39;re equal */
}

サークルにグラデーションを追加したり、CSS アニメーションを使用してサークルを動かすこともできます。 CSS はこれらの図形に対してさらに統合された API を提供する予定ですが、現時点ではこの方法で円を作成できます。

上記は純粋な CSS で作成された小さな関数の例です。皆さんのお役に立てれば幸いです。

純粋な CSS で作成された小さな関数のいくつかの例

関連記事