CSS3：クイックイントロ

投稿日: 2022-04-20 2022-10-06
タグ: css

Webデザインと開発では、ほとんどの分野と同様に、時代に遅れずについていくために進化する必要があります。これは、CSSなどの最も頻繁に使用されるツールの1つに追加される新機能に特に当てはまります。 CSSの最新仕様であるCSS3には、設計者が今すぐ利用できるいくつかの新機能があります。

CSS3の最大かつ最も重要な変更は、間違いなく仕様承認プロセスのモジュール化です。これが意味するのは、CSS3の各セクション（境界線、ボックスシャドウ、画像など）に独自のモジュールがあるということです。つまり、個別に承認し、個別に開発することができます。

これは、変更がより迅速に行われることを意味し、変更が行われると、コミュニティやブラウザ開発者が求めていたものとの関連性が高まります。また、一度にすべてではなく断片的に受信されるため、ブラウザが新しい標準を最新の状態に保つのが簡単であることも意味します。これは、さまざまなブラウザやプラットフォームでコンテンツがどのように表示されるかについて心配する必要がないことを意味します。

私たちの分野では、デザイナーというより恐竜に似ている人を知っています。時代遅れの技術と退屈な設計慣行を使用して立ち往生している恐竜にならないでください。デザインを向上させ、次のような手法で最新のテクノロジーを活用します。

トランジション

デザイナーは長い間、AdobeFlashとJavaScriptを使用して画像のトランジションを実現するのに苦労してきました。もういや。醜い、しばしば粘着性のあるFlashトランジションの時代は終わり、JSアニメーションの実装は困難でした。現在、CSS3トランジションを使用すると、設計者は、サーバー側の重い方法ではなく、クリーンで軽量なブラウザー側のソリューションを使用してトランジションを実装できます。これを行うには2つの重要な方法があります。まず、最も簡単な方法として、 transition 宣言を使用して、ホバーなどのマウスベースの効果をトリガーしたり、単純なJSの変更でアニメーションをトリガーしたりできます。または、 @keyframe ルールを使用して、ユーザー入力を必要としないアニメーションへの特定の変更を指定することもできます。 CSS3トランジションの詳細についてはこちらをご覧ください。

グラデーション

Photoshopをいじくり回すのにうんざりしていて、これらのボタンのグラデーションを適切に取得するのに苦労していますか？他のみんなもそうです。ありがたいことに、今、あなたはする必要はありません！ CSSグラデーションを使用すると、デザイナーはどのディスプレイでも見栄えのする美しいグラデーションを作成できます。何よりも、すべてのブラウザーでサポートされている、優れた軽量のCSSファイルに含まれているため、リソースに負担をかける重い画像を使用する必要はありません（ここでテーマに気づいていますか？）。グラデーションは実際にはしばらく前から存在していますが、すべてのブラウザで使用できるようになったのは今だけです。現在、放射状および線形の繰り返しおよび非繰り返しの勾配が利用可能であり、さらに多くの勾配が進行中である可能性があります。

3D変換

ここで少し正直にしましょう。私たちデザイナーは、非常に派手な人々のグループになることができます。私たちよりも知識の少ないデザイナーよりも自分の能力を支配することを楽しんでいると言う人もいるかもしれません。さて、これがあなたのように聞こえる場合、または単に美しく目を引くポートフォリオを構築したい場合は、CSS33D変換が本当にあなたの仕事を際立たせるのに役立ちます。特に他のデザイナーの真の海から目立つようにしたい場合は、Webページのデザインで小さなフラッシュ（恥知らずに意図されたしゃれ）の価値を過小評価しないでください。

境界半径

丸みを帯びた角は見栄えがします。丸みを帯びた角は自然に見えます。丸みを帯びた角は、歴史的にコーディングするのが面倒であり、画像を使用するとファイルサイズがすぐに大きくなる可能性があります。これで、ボタンは過度のコードなしで自然で丸みを帯びたエッジを持つことができます！ CSS3の新しいborder-radiusプロパティを使用して、heightおよびwidthプロパティを過度にいじる必要がなく、壊れない単純な丸みを帯びたエッジを作成します。コンテンツまたは場所を微調整します。例が必要な場合は、独自のWebページでこれらのコードスニペット（ webreference.com の提供）を試してください。

CSS：


.box {
  border: 2px solid orange;
  border-radius : 25px;
  width: 100px;
  padding: 10px;
  text-align:center;
}

HTML：

  `<div class='box'>Submit</div>`

ボーダー画像

境界線のテーマを続けて、divまたは画像の周りにきれいできれいな境界線を作りたいと思ったことはありますか？単に魅力的ではありませんか？今、あなたの境界線はあなたの想像力とPhotoshop/Illustratorのスキルによってのみ制限されます。これで、画像スプライトを簡単に操作できるように作成し、border-imageプロパティを使用してそれらを適用できます。これにより、何時間もいじったり調整したりすることなく、必要なきれいな境界線をすばやく簡単に作成できます。

Webフォント

昨日のデザイナーだけが「ウェブセーフ」フォントの表とリストを調べることを余儀なくされたようです。さて、当時は私たちの後ろにあり、私たち全員が感謝する必要があります。 @ font-face ルールにより、Google Web Fontsやtypekitなどのサービスを使用して、新しいスタイルシートを組み込むだけで想像できるあらゆるフォントを含めることができるようになりました。これは、タイポグラフィの選択肢が、エンドユーザーがアクセスできる可能性が高いとわかっているものに限定されなくなったことを意味します。これは、テキストが醜いデフォルトフォントでないことを確認するためだけに、12の異なるフォントファミリを指定する必要がないことも意味します。

CSS列

応答性の高い列ベースのレイアウトで記事をレイアウトしたいですか？少し前までは、いくつかの選択肢があったことを意味していました。まず、テーブルを使用して、デザインの世界の誰もが嫌うことができます。次に、JSを使用して、コンテンツをdivを含むものに流し込み、そのようなプロセスにかかる膨大な時間の間、自分自身に嫌悪感を抱かせることができます。ただし、現在では、テーブルやトレードオフは必要ありません。 columns ルールを使用するだけで、完了です。あなたが遭遇するかもしれない唯一の問題は、すべてのブラウザで同じように見えるようにすることです（私はあなたのIEを見ています）が、Internet Explorerがやっかいなことをしているので、その問題も解決する必要があるようです。

セレクター

最後に、そしておそらく最も重要なこととして、新しいCSSセレクターがあります。それらすべての詳細を説明するのに使用したいよりも多くのスペースが必要になるため、ハイライトを表示するだけで、完全なリストここを確認できます。古いCSS2セレクターも引き続き使用できますが、新しいルールがいくつかあります。つまり、各要素にIDとクラスを指定する代わりに、属性値に基づいてDOM要素を選択できるようになりました。これで、属性フィールドに基づいてスタイルを設定できます。

getdocs

13036