今すぐ使える 12 のハイエンドで上品な CSS3 機能_html/css

原文: http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/

原文にはデモ表示とダウンロードがあります。

翻訳開始:

おそらくあなたも私と同じで、トレンディで忘れられない CSS3 特殊効果を目にすると、それを自分の Web サイトに適用したくなるでしょう。その後、これらの新機能は 1 つまたは 2 つの主流ブラウザ (IE では決して) でのみ正常に表示できることがわかります。そのため、この特殊効果を棚上げして無期限に待機することを選択します。ここで朗報です。多くの優れた CSS3 機能がブラウザの最新バージョンで十分にサポートされており、今すぐ使用できるようになりました。

以下で説明する機能のほとんどは、古いバージョンの IE (バージョン 9 以前) では使用できませんのでご注意ください。顧客の大多数が依然としてこれらの旧式のブラウザを使用している場合、残念ながら、これらの実証済みの機能にダウングレードする必要があるかもしれません。しかし、他の皆さんも、最新のブラウザーがもたらす美しさをお楽しみください~

1. CSS アニメーション (Animation) とトランジション (Transitions)

CSS アニメーションは、ついにすべての主要なブラウザーで使用できるようになり、IE (IE10) でも使用できます。 CSS アニメーションを作成するには、主に 2 つの方法があります。

最初の方法は非常に簡単で、CSS でトランジション属性を設定します。トランジションを使用して、マウスオーバー (ホバー) またはクリック (マウスダウン) のエフェクトを作成できます。もちろん、JavaScript を通じて DOM 要素 CSS のトランジションプロパティを操作して、アニメーションをトリガーすることもできます。例 1 では、マウスをホバリングすると、ロケットは地表近くの飛行に移行します。

アニメーションを定義する 2 番目の方法は、@keyframe を使用してキーフレームを定義する必要があります。このアプローチにより、ユーザーのアクションや JavaScript に依存せずに、繰り返しアニメーションをトリガーできます。

[特定のコードとデモについては、ソース Web ページを参照してください。以下も同様です。】

CSS アニメーションは学ぶ価値があります。この記事は入門に非常に適しています。ブラウザの互換性も確認できます。

2. calc() を使用して計算を実行します

calc() 関数は、もう 1 つの少し強力な CSS 機能です。 CSS で数学的計算を実行できるため、長さとサイズを計算する必要があるあらゆる状況に適しています。さらに優れているのは、パーセンテージやピクセル [width: calc(100% - 40px);] など、さまざまな測定単位を計算で自由に使用できることです。これらのハックを使用する必要はなくなりました。また、この関数は IE9 以降で適切に動作し、プレフィックスを必要としないというニュースもあります。

ここで calc() 関数を学習したり、互換性をチェックしたりできます。

3. 高度なセレクター

スタイルシートを追加するためだけに DOM 要素に ID を割り当てることに固執するなら、あなたはアウトです。 CSS 2.1 と CSS 3 では、レイアウトをより便利に制御し、スタイルをよりエレガントに調整できるように、多数の強力なセレクターが導入されました。

ここでセレクターとその関連コンテンツの詳細を確認したり、互換性を確認したりできます。

4. コンテンツとカウンターを生成する

::before および ::after 擬似要素は、Web 開発者が手にできる強力な魔法の武器です。この機能により、特にシャドウなどの追加の視覚要素を追加する必要がある場合や、span や div などの先頭または末尾の要素が必要な場合に、同じレイアウト要件を達成するために使用するコードが少なくなります。疑似要素を使用すると、よりスリムでセマンティックな HTML コードが得られます。

CSS3 にはカウンターも用意されており、CSS ルールを使用してカウントを増やすことができます。さらに、ラップされた要素は、親要素からカウンターにアクセスすることもできます。

IE9+ を含むすべての主要なブラウザに適用されます。

5. グラデーション

CSS3 のグラデーションプロパティにより、Web デザイナーは色間の滑らかな遷移を得るために画像に依存する必要がなくなります。 CSS グラデーションの優れた点の 1 つは、CSS グラデーションがピクセルで構成されているのではなく計算されるため、Retina スクリーンでも適切にパフォーマンスを発揮できることです。グラデーションは線形グラデーションと放射状グラデーションの2種類に分かれており、繰り返しを設定できます。以前は、グラデーションはあまり適用できませんでしたが、過去数か月間構文に若干の変更を加えた後は、ほぼどこにでも適用できるようになりました。

ここで関連するチュートリアルを入手したり、各ブラウザのサポート状況を確認したりできます。

6. フォント

「Web セーフ」フォントしか使用できなかった当時のことを覚えていますか?過去を振り返るのは難しいですが、現在では Google Fonts と typekit があり、スタイルシートに美しいフォントを埋め込むことができます。 fontawesome のようなアイコンフォントを使用して、文字や数字を置き換えるベクターアイコンを作成することもできます。これはすべて @font-face のおかげで、使用するフォントの名前、太字や斜体などのバリエーション、およびソースファイルを定義でき、これらの定義を後続のフォント/フォントファミリで使用できるようになります。宣言。

セキュリティ上の理由から、私は上記のエディターにローカルフォントを埋め込まなかったので [作成者が元の Web ページに各サンプルコードを提供しました]、Google Webfonts を使用しました。このページでは、ローカルフォントを埋め込む例を示します。

崇高な理想を持った何人かの人々の継続的な努力により、いくつかの処理を経て、Web フォントは古代の IE6 でも実行できるようになりました。上記の 2 つのフォントサービスプロバイダーがこれらすべての処理をサポートしてくれるため、中国語を自由に使用できます。。。】。

7.ボックスのサイジング

CSS 初心者にとって最大の頭痛の種は、CSS ボックスモデルです。標準化団体にはそれぞれの理由があるかもしれませんが、パディングとボーダーの幅を考慮せずに要素の幅と高さを定義するのは不合理です。このやや定義が曖昧な機能は、私たちに大きな問題を引き起こします。最後に、ボックスサイズ設定を使用すると、要素の幅と高さを想像どおりに直感的に定義できるようになります。

ここでボックスのサイズの詳細を確認したり、ブラウザの互換性を確認したりできます。

8. 画像の境界線

border-image 属性を使用すると、画像を使用して境界線をデザインできます。境界線は 1 つの画像内に配置することができ (CSS スプライトテクノロジー)、境界線の上下左右の四隅に画像の異なる部分を使用することができます。

使用した画像:

レンダリング:

画像の境界線について詳しくは、MDN ページと CSS トリックに関するこの記事をご覧ください。 border-image 属性は、すべての主要なブラウザーと IE11 でサポートされています。

9. メディアクエリ

Web デザインを厳格な態度で扱うなら、間違いなくメディアクエリを使用するでしょう。 Web サイトの構築方法が変わったことを考えると、古いものにもかかわらず、まだ議論する価値があります。以前は、PC の解像度に適した Web サイトと、モバイル画面ユーザー向けに別の Web サイトをデザインするのが一般的でした。レスポンシブレイアウトにより、Web サイトはさまざまなタイプのデバイス、向き、解像度に適応できるようになりました。

メディアクエリは驚くほど簡単に使用できます。必要なのは、@media の注釈が付けられたコードブロック内に一連の CSS 位置決めルールを配置することだけです。各 @media ブロックは、その条件が true の場合に有効になります。このページを開いてブラウザのウィンドウサイズを変更して、効果を確認してください。

メディアクエリは、デバイスの解像度、方向、色深度、ピクセル密度 (PPI/PPCM) およびその他の属性を検出できます。さらに詳しく読みたい方は、ブラウザの互換性だけでなく、こちらもご覧ください。

10. 複数の背景

デザイナーは複数の背景を使用して、多くの興味深い特殊効果を作成できます。同じ要素に異なる背景を設定でき、各背景画像 (より鮮明にはレイヤー) を自由かつ独立して移動またはアニメーション化できます。以前に使用した背景関連の CSS ルールでは、カンマ区切りリストを使用してさまざまな背景画像を設定できるようになりました。

ここでは、複数の背景に関連する詳細情報を確認でき、ブラウザーの互換性も非常に優れています。

11. 列

ご存知のとおり、CSS を介して列ベースのレイアウトを実装するのは困難です。これまでの私たちのアプローチは、JavaScript またはサーバー側の処理を通じてコンテンツをさまざまな要素に分割することでした。この不必要な複雑さにより、開発の初期段階でコンテンツとスタイルを分離するという当初の意図から逸脱してしまいました。幸いなことに、CSS3 では列ルールを使用できます。

このルールはブラウザー間で十分にサポートされていますが、それでもプレフィックスが必要です。他の列関連の CSS プロパティやブラウザの違いにより、列の効果が損なわれる可能性があります。

12.3D 変換

3D 特殊効果ほどエキサイティングで印象的なものはありません。 3D 変換エフェクトの有効性についてはまだ議論がありますが、適切に設計された 3D CSS エフェクトがユーザーの注目を集めるのを妨げるものではありません。

ここは Apple のインターフェースを模倣したログインウィンドウです。読むことをお勧めします。 3D CSS を詳しく学びたい場合は、この詳細な入門書を読むことができます。 IE ユーザー向けでなければ、3D CSS のブラウザ互換性は依然として良好です。

その他

言及する価値のある有名な機能がたくさんあります。border-radius および box-shadow プレフィックスの使用を停止できるようになりました。さまざまなブラウザーで data-uri を背景画像として使用することもできます。また、広範なサポートも強化されました。非常に便利な背景サイズ。

フレックスボックス、@supports、フィルター、CSS マスク、その他の機能のクロスブラウザーネイティブサポートは待たなければならない場合があります。しかし、待つ価値はあると思います!