検索
ホームページウェブフロントエンドCSSチュートリアル純粋な CSS で作成された小さな関数のいくつかの例

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're equal */
}

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

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

関連する推奨事項:

CSS3 でさまざまな基本グラフィックを描画するためのヒント

CSS 3 を使用して長い影を作成する

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

以上が純粋な CSS で作成された小さな関数のいくつかの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
cohost.orgの失われたCSSトリックcohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee'の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG'の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind'の@Apply機能は、響きよりも優れていますTailwind'の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind'の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません