最新の Web デザインに不可欠な CSS3 機能_html/css_WEB-ITnose

過去数年にわたり、CSS は多くの Web デザイナーや開発者が想像もできなかった方法で進化しました。 CSS3 では、border-radius、box-shadow、text-shadow、text-overflow、multiple-background、transition、flexbox、アニメーション、メディア クエリなどの新機能が導入されています。

ただし、いくつかの不明瞭なプロパティはあるものの、CSS は改良され続けています。 CSS はより効率的になり、JavaScript やその他の Web プログラミング言語で達成したいものに近づきます。

この記事では、現代の Web デザインに不可欠な CSS3 の機能をいくつか紹介します。

複数の背景

CSS3 では、単純なカンマ区切りリストを使用して要素に複数の背景を適用できます。背景はレイヤーに積み重ねられ、最初の背景が一番上、最後の背景が一番下になります。 注意 リストの最後の背景色のみが表示されます。

これは基本的な例です:

上の例からわかるように、3 つの背景が重ねられています。同時に、画像の表示を制御するために、background-repeat、background-position などの他の背景プロパティがここで適用されます。

背景クリップ

Photoshop を使用して画像ベースのテキストを作成していた頃のことを覚えていますか?同じ機能を備えた新しい CSS3 背景クリップ プロパティの登場以来、Photoshop は徐々に人々の目から消えつつあります。

これで、background-clip プロパティを使用して画像ベースのテキストをクリップできるようになりました。まず、切り取りたい h1 または text 要素の上に image div 要素を配置する必要があります。これで、background-clip プロパティを使用してテキストベースの画像をクリップできるようになりました。 text-fill-color プロパティが transparent であることを確認してください。

次の例は、background-clip プロパティがどのように機能するかを示しています。

CSS 3D Transform

CSS3 を使用すると、架空の 3D 空間を作成できます。このとき、要素には 3D 空間をアクティブにするための遠近感が必要です。アクティベーションを実現するには、transform アトリビュートを使用する方法と、perspective アトリビュート値を使用する方法の 2 つがあります。

transform: perspective(600px);

または単にパースペクティブ属性を使用します:

perspective: 600px;

達成される効果は、指定した値によって決まります。値が小さいほど、3 次元空間の Z 平面に近づきます。例が最も説得力があることがわかります。次のプログラムは、transform プロパティを使用して 3D 効果を実現する方法を示しています。

計算値

私のお気に入りの CSS3 機能の 1 つは、calc() 関数を使用して要素の値を計算することです。 。電卓と同じように、大きさ、角度、周波数などの単純な数学計算を実行できます。

以下のコードを見て、それがどのように機能するかを確認してください。

HTML:

<div class="container">This is the text inside the container!</div>

CSS:

.container {    width: 80%; /* fallback for browsers without support for calc() */    width: calc(100% - 80px);    text-align: center;    margin-top: 20px;    position: absolute;    left: 40px;    border: 1px solid #3b3b3b;    background-color: #1dd046;     padding: 10px;}

この例では、CSS はブラウザの端の距離の端から 40 ピクセルのマージンを持つコンテナ ボックスを作成します残りのウィンドウ全体を塗りつぶします。以下の画像結果を参照してください。

ブレンド モード

背景ブレンドモード プロパティを使用すると、色を使用して画像をブレンドできます。 Photoshop と同様に、さまざまなカラー効果を使用して、スクリーン (スクリーン)、オーバーレイ (オーバーレイ)、暗くする (暗くする)、明るくする (明るくする)、カラー覆い焼き (カラー覆い焼き) 、カラー - などのプロパティ (ブレンド モード) を変更できます。焼き込み、ハードライト、ソフトライト、差分、除外、色相、彩度、色、明度。もちろん、元の値を保持するには、normal 属性を使用します。

これは簡単な例です:

ここではブレンド モードの属性値 screen を使用していることに注意してください。これにより、画像の色のブレンド効果が作成されます。

text-overflow

CSS3 のもう 1 つの機能は、text-overflow プロパティを使用して、コンテナからオーバーフローしたテキストをトリミングできることです。

text-overflow には 3 つのオプションの値があります。

• クリップ : デフォルト値。テキストをトリミングします。
• 省略記号 : ("···") は切り取られたテキストを表すために使用されます。
• 初期 : プロパティをデフォルト値に設定します。

text-overflow を overflow 属性と一緒に使用して、テキストを非表示、スクロール可能、または適応的に設定できることに注意してください。また、white-space:nowrap; を使用してテキストのレイアウト方法を決定することもできます。次の例に示すように:

CSS3 アニメーション

以前は、JavaScript を介してのみアニメーション効果を実現できました。 Javascript を知らなくても、CSS3 を使用してクールなアニメーション効果を実現できます。

次の 2 つの方法を使用して、クールなアニメーション効果を作成できます。

• トランジション : マウスオーバー状態にスムーズなトランジションを追加します。
• @keyframes : これは少し複雑かもしれませんが、高度なアニメーション効果を作成できます。

両方の方法がどのように機能するかを見てみましょう。以下の例を参照してください:

CSS3 アニメーションについて詳しく知りたい場合は、ここをクリックしてください。

Flexbox

Flexbox は、コンテナ内の項目の配置、方向、順序を強化するために作成された CSS3 レイアウト方法です。利点は、さまざまな画面サイズやデバイスに適応できることです。

フレキシブル ボックス モデルは、float を使用せずにブロック モデルを強化します。これは、コンテナの端が中身と一緒に崩れないことを意味します。

基本的なフレックスボックス レイアウトを見てみましょう:

フレックスボックス レイアウトを有効にするには、その親要素の表示プロパティを flex または inline-flex に設定する必要があります。このようにして、すべての子要素が自動的にフレックス項目として設定されます。

フレックス方向

flex-container プロパティと flex-direction プロパティを使用して、フレックス項目の方向を設定できます。

flex-direction には 4 つのオプションの値があります。

• 行 : デフォルト値。フレックス項目の方向を左から右、上から下に設定します。
• row-reverse : フレックス項目の方向を右から左に設定します。
• 列 : フレックス項目の方向を垂直に設定します。
• column-reverse : フレックス項目の方向を垂直に設定しますが、逆方向に設定します。

次の例を見てみましょう。

上の例では、flex-container の flex-direction プロパティを row-reverse、つまり flex-items に設定しています。並べ替えの順序は右から左です。

フレックスボックスに関しては、関連するプロパティが多数あります。さらに詳しく知りたい場合は、ここをクリックしてください。

概要

CSS3 機能は、要素をあるスタイルから別のスタイルに徐々に変更できる素晴らしい効果を提供し、ホスティングによっては読み込み速度を向上させることができます。プログラマーではない場合でも、シンプルで洗練されたエフェクトを作成したい場合に便利です。

この記事は @Samuel Norton の「The Cutting-Edge CSS3 features That Are Essential to Modern Web Design」を元に翻訳したものです。翻訳が不十分な場合は、全文に私たちの理解と考えが含まれています。または、何か間違っていることに気づいた場合は、同僚に指摘してもらってください。この翻訳を転載したい場合は、英語の出典を明記してください: https://speckyboy.com/2016/04/10/css3-features-essential-modern-web-design/。

Jingzi

現役学生、コンピューターサイエンスを専攻する学部生。積極的で笑いが大好き、フロントエンドが大好き、人とコミュニケーションしたり共有したりするのが好きな女の子。自分の心の中の自分を自分の努力で実現したいと思っています。 Weibo: @京-如秋叶