コンテンツ
- 01.画像をサイトの配色に一致させる
- 02.グリッドの最後の行のスペースを均等に共有する
- 03.ボックスシャドウを使用してパーティクルアニメーションを作成する
- 04.変換を使用して多面体をアニメーション化する
- 05.ポジショニングのためのマスター「calc（）」
- 06.「ボックスサイジング」でボックスモデルを正気にする
- 07.CSSで垂直方向に中央に配置
- 08.関連オブジェクトのバンクをターゲットにする
- 09.ハイフネーションを制御する
- 10.モードの記述を活用する
- 11.通常とは異なる方法でグラデーションを使用する
- 12.文字列を使用する-リンクでの照合
- 13.FOUTをあなたのために機能させる
- 14.背景についてSVGを探索する
- 15.3Dトランジションでユーザーに焦点を合わせる
- 16.CSSと数学を使用して循環メニューを作成します
- 17.ホバーでリンクをアニメーション化する
- 18.簡単なキーフレームアニメーションを作成します
- 19.影付きのフローティング3D効果を作成します
- 20。「：target」を使用してページ要素を更新します
- 21.微妙なアニメーションでフィードバックを提供する
- 22.「意志を活気づける」ための準備
- 23.人道的な入力フィールド
- 24.CSSアニメーションを一時停止して再生します
- 25.CSS変数を使用しないでください
どのテクノロジーでも、ある時点で、できることはほとんどすべて行われたと感じています。何かが新しくて光沢がなくなったとき、興味は薄れ、次の大きなものに注意が向けられます。これは、遅かれ早かれ、テクノロジーの特定の側面にひどく興奮し、それを平凡なものに追いやる傾向があるWeb業界ではよくあることです。
CSSが最初に登場したとき、それは革命的であり、時間の経過とともに、デザイナーが柔軟で、しっかりと作成された、美しいWebページレイアウトを作成できるように進化してきました。しかし最近では、CSSが疲れていて、おそらく太陽の下での時間がなくなったという提案がさまざまな方面から出されています。
CSSの世界には、まだ探求していないかもしれない最先端のプロパティであろうと、以前は考えていなかった方法でCSSの側面を使用することであろうと、まだたくさんの興奮と生活があることを示したいと思います。
業界のトップCSSエキスパートからのヒントをいくつか紹介します。
（注：この機能の一部の手法は最先端であり、すべてのブラウザーで完全にサポートされているとは限りません。作業をライブにする前に、フォールバックが適切に行われていることを徹底的にテストして確認してください。）
01.画像をサイトの配色に一致させる
クリストファーシュミット、会議の主催者
会議には独自の配色があり、多くの講演者がいるため、ポートレートを管理するためのワークフローは複雑になる可能性があります。フィルタを手動で適用することはスケーリングせず、たとえば特定のPhotoshopアクションにアクセスできるかどうかに依存します。現在、高解像度のグレースケールPNGを使用し、CSSフィルターを使用してトーンを追加しています。これにより、ポートレートをイベントのスキームに一致させたり、複数のテーマで画像を再利用したりすることができます。それぞれに新しいCSSルールが必要です。デモをご覧ください。
02.グリッドの最後の行のスペースを均等に共有する
スティーブン・ヘイ、デザイナー兼作家
グリッドに表示するアイテムの数が不明な場合は、Flexboxを使用して最後の行を均等に分割できます。したがって、アイテムが1つしかない場合は、行全体を占めます。アイテムが2つある場合、行は半分に分割されます。デモをご覧ください。
03.ボックスシャドウを使用してパーティクルアニメーションを作成する
Ana Tudor、コーダーと数学の狂信者
混合することにより ボックスシャドウ いくつかの数学とSassを使用すると、2D曲線をグラフ化し、3Dモーションをエミュレートし、誰もがキャンバスのものと間違えるようなクレイジーなパーティクルアニメーションを作成できます。デモなどをご覧ください。
04.変換を使用して多面体をアニメーション化する
Ana Tudor、コーダーと数学の狂信者
境界線で作成された純粋なCSSポリゴンを見たことがあるかもしれませんが、 変換 プロパティ。ネストされた要素に変換をチェーンして適用すると、画像の背景または境界線と透明な内部を持つ複雑なポリゴンを作成できます。 3D変換を使用すると、これらの2D形状を多面体に結合し、WebGLと間違えやすい方法で、ソリッドをマージ、展開、分解、または再結合させることができます。デモをご覧ください。
05.ポジショニングのためのマスター「calc（）」
Ana Tudor、コーダーと数学の狂信者
私は愛した calc（） 発見した瞬間から。余白、パディング、または寸法を調整するのに役立ちます。背景の配置やサイズ変更、グラデーションや変換の内側で使用したり、同じ古いユニットだけでなく、新しくてクールなビューポートユニットと組み合わせたりすると、命の恩人になります。
06.「ボックスサイジング」でボックスモデルを正気にする
Sawyer Hollenshead、OakStudiosの開発者およびデザイナー
使用する ボックスサイジング あなたの正気を救うために。これがないと、250pxの定義された幅と25pxのパディングを持つ要素が300pxの幅に結合され、ピクセルとパーセンテージの混合が困難になります。と ボックスサイズ：ボーダーボックス 代わりに、境界線とパディングは定義された幅内に配置されます。
07.CSSで垂直方向に中央に配置
パラベルの創設者、トレント・ウォルトン
これまで、CSSを使用して何かを垂直方向に中央揃えすることは困難でした。たとえば、隣接するテキストを含む画像を垂直方向に配置する場合などです。踏みつけたり呪ったりする代わりに、Flexboxを使用して位置合わせの問題に対処します。デモをご覧ください。
08.関連オブジェクトのバンクをターゲットにする
Zurbパートナー兼デザインリードのJonathanSmiley
すべてのクラスに共通の属性を付加するのではなく、クラス名に近似属性セレクターを使用してCSSの線の太さを減らし、関連するオブジェクトの大規模なバンクをターゲットにします。たとえば... [class * = "-block-grid-"] {} ...は、次のようなものをターゲットにします：.small-block-grid-3 .large-block-grid-5
09.ハイフネーションを制御する
Savid Storey、オープンWeb支持者
ハイフネーションは印刷物では当然のことと見なされており、一部の開発者は ハイフン プロパティはオンラインですが、より細かい制御を提供する他のプロパティを知っている人はほとんどいません。注意しないと、ハイフンが複数の行にまたがって使用されるハイフネーションラダーが表示されます。一般的な経験則は、連続して2つ以下であり、これを使用して制御できます。 ハイフン-制限線。また、 ハイフン-制限-文字 ハイフンを使用する単語の最小長と、ハイフン区切りの前後の最小文字数を指定できます。
10.モードの記述を活用する
デビッドストーリー、オープンウェブ支持者
書き込みモードでは、テキストが流れる方向を定義できます。一部の東アジアのテキストは縦書きで、行は右から左に伸び、次のように指定されます。 書き込みモード：vertical-rl (tb-rl IEで）。縦書きのテキストはヨーロッパの書記体系では実際には使用されていませんが、横書きのスペースが限られている場合は表の見出しに便利です。
11.通常とは異なる方法でグラデーションを使用する
ルース・ジョン、デザイナー
背景のグラデーションは、境界線や箇条書きとともに使用すると見栄えがよくなります。私はブログとプリプロセッサの両方で使用しており、手動で繰り返さないように、再利用されたコードでミックスインを呼び出すことができます。グラデーションはプロセッサに負担がかかる可能性があるため、スペルクレイジーにならないでください。リストの箇条書きのSCSSミックスイン：
@mixin gradedBullet（$ colour）{background-image：linear-gradient（left、lighten（$ colour、15％）10px、$ colour 11px、$ colour 20px、darken（$ colour、15％）21px、darken（$ colour 、15％）30px、透明31px）; }
12.文字列を使用する-リンクでの照合
ルース・ジョン、デザイナー
私のブログでは、文字列照合機能を備えたCSS属性セレクターを使用してソーシャルアイコンのスタイルを設定しました。これらは私のブログ全体に表示され、テキスト付きの場合とない場合がありますが、常にアイコンが付いています。正しいソーシャルアイコンで正しいリンクのスタイルを設定するには、文字列の一致を使用します href アンカー要素の属性。私が使う *= だから href アンカー要素には、指定した文字列のみを含める必要があります。
/ *すべてのソーシャルリンク用 * / .social a：before {display：inline-block;パディング-右：30px; font-family： ’FontAwesome’;} / *各特定のリンク * / .social a [href * = "twitter"]：before {content： " f099"; color：＃52ae9f;} .social a [href * = "github"]：before {content： " f09b"; color：＃5f2e44;} .social a [href * = "feed"]：before {content： " f09e";色：＃b47742;}
13.FOUTをあなたのために機能させる
ジェイソン・パメンタル、H + Wデザインのプリンシパル
Webは、ブラウザがブリンブリンをレンダリングできない場合でも、コンテンツを配信する必要があるという前提に基づいて構築されています。読み込みが遅いWebフォントはイライラする可能性があり、フォントのダウンロード中にナビゲーションやテキストがリフローするため、FOUT（Flash Of Unstyled Text）が不快になります。グーグルとタイプキットは答えを提供します：ウェブフォントローダー。フォントの読み込みステータスに基づいてページにクラスを挿入することで、それらのクラスでフォールバックのスタイルを設定して、リフローを最小限に抑え、WebKitの「非表示コンテンツ」シンドロームを根絶することができます。デモをご覧ください。
14.背景についてSVGを探索する
EmilBjörklund、inUseWeb開発者
現在SVGをサポートしていないブラウザはIE8以下とAndroid2 WebKitのみであるため、CSSの背景にSVGを使用することは、特にGrunticonなどのPNGフォールバックソリューションとともに実現可能です。 SVGはCSSでスタイルを設定でき、HTMLに適用して遊ぶことができるSVGからのCSSプロパティ（フィルター！）の興味深いブリードスルーがあります。
15.3Dトランジションでユーザーに焦点を合わせる
EmilBjörklund、inUseWeb開発者
3D変換を使用し、 z次元 ユーザーインターフェイスでは、特にコンテンツの非表示/表示または折りたたみ/展開に非常に役立ちます。また、このような状況では、2Dトランジションにフォールバックするか、トランジションをまったく使用しないことも非常に簡単です。これは、少し進歩的な拡張が大いに役立つ可能性がある領域です。
16.CSSと数学を使用して循環メニューを作成します
フロントエンド開発者、Sara Soueidan
循環メニューはモバイルアプリで人気があり、CSS変換と遷移を使用して単純な循環メニューを作成できます。このメニューを変更およびカスタマイズして、上向きまたは下向きに開くメニューを作成することもできます。 CSSには、アイテムを斜めに平行移動する直接的な方法はありませんが、アイテムを配置する円の半径の値を使用し、簡単な数学的ルールを適用して、水平および垂直の平行移動値を計算して、 translateX（） そして translateY（） 関数。そうすれば、あなたは 対角線 メニュー項目を円の正しい位置に移動するための平行移動。メニューを閉じる/開くクリックイベントはJavaScriptを使用して処理できます。または、CSSチェックボックスハックを使用してさらに一歩進んでCSSのみのメニューを作成することもできます。私のデモでは、JavaScriptとHTML5 classList APIを使用していますが、これはすべてのブラウザーでサポートされているわけではないため、デモを機能させるには、最新のブラウザーでデモを表示するか、classListAPIを使用する代わりにjQueryコードのコメントを解除する必要があります。コード。
デモと完全なチュートリアルを参照してください。 CSSチェックボックスハックの例。
17.ホバーでリンクをアニメーション化する
ガーディアンインタラクションデザイナー、ポールロイド
アクションを機能させたり、重要な情報を提供したりするためにホバー状態に依存するべきではありませんが、マウスベースのユーザー向けのインターフェースを拡張することはできます。 24ways.orgでは、前/次のナビゲーションのリンクにカーソルを合わせると、記事のタイトルが表示されます。これは、 ::後 の値から供給された生成コンテンツを含む疑似要素 データ- 属性。CSSトランジションが適用され、ホバー時にスライドして表示されます。デモをご覧ください。
18.簡単なキーフレームアニメーションを作成します
ガーディアンインタラクションデザイナー、ポールロイド
24ways.orgで、アニメーションのコーナーフラップを要約に追加しました。これはホバーで開きます。これは、 @keyframes スプライトベースのアニメーションを実現するために背景画像の位置を変更して、animationプロパティでルールを設定します。秘訣は、アニメーションスプライトにあるフレーム数を ステップ（） 値。デモをご覧ください。
19.影付きのフローティング3D効果を作成します
Catherine Farman、HappyCog開発者
最近のプロジェクトでは、下に丸い影が付いたフローティング製品の写真が必要で、画面から飛び出す3D効果が作成されました。シャドウはいくつかのCSS3機能を使用します。 ボーダー半径 アルファ透明度と ボックスシャドウ。これは、製品グリッド、ホームページヒーローのショーケース画像、またはスキューモーフィズムが曲がった気まぐれなデザインに適しています。デモをご覧ください。
20。「：target」を使用してページ要素を更新します
サイモンマディーン、HeReシニアウェブ開発者
CSSは通常の意味でのプログラミング言語ではありませんが、JavaScriptに頼ることなく賢いことを行うことができます。たとえば、 ：目標 疑似クラスは、クリックされたリンクのターゲットである要素に適用されます。
これを使用して、ページの状態を定義し、多くの要素を含む親をターゲットにすることができます。リンクは、シングルクリックですべての子の外観とレイアウトを制御する手段になります。デモをご覧ください。
21.微妙なアニメーションでフィードバックを提供する
Neil Renicker、デザイナー兼開発者
CSS疑似要素 ：：前 そして ::後 CSSトランジションとともに、マウスユーザーに微妙なフィードバックを提供する楽しいアニメーションを有効にすることができます。たとえば、疑似要素内にCSS矢印を作成し、疑似要素に遷移を適用します（移行：すべてのイーズインアウト.15秒。）、次に簡単なレイアウト変更をに追加します ：ホバー 疑似クラス（修正など マージントップ）。デモをご覧ください。
22.「意志を活気づける」ための準備
ポールルイス、コーダー兼Chrome開発者関係チームメンバー
使用したことがある場合 -webkit-transform：translateZ（0） 魔法のようにページを高速化するために、多くのブラウザで新しいコンポジターレイヤーを作成するだけのハックは、次のように置き換えられています。 意志-アニメート。間もなく、要素について変更する予定の内容（位置、サイズ、コンテンツ、またはスクロール位置）をブラウザに伝えることができるようになり、ブラウザは内部で適切な最適化を適用します。詳しくは。
23.人道的な入力フィールド
人間のために作られた創設者、Yaron Schoen
ユーザーが操作する要素にクイックアニメーションを追加すると、インターフェイスのコンピューター性が低下します。入力フィールドを使用して、 トランジションコール 内にあるので、焦点を合わせたり、焦点を外したりするたびに、スムーズに移行できます。
input、textarea {-moz-transition：すべて0.2秒のイーズアウト; -o-transition：すべて0.2秒のイーズアウト。 -webkit-transition：すべて0.2秒のイーズアウト。 -ms-transition：すべて0.2秒のイーズアウト。移行：すべての0.2秒のイーズアウト。
24.CSSアニメーションを一時停止して再生します
ヴァルヘッド、デザイナー兼コンサルタント
CSSアニメーションを変更することで、CSSアニメーションを「一時停止」および「再生」できます。 アニメーション-再生状態 プロパティ。 「一時停止」に設定すると、変更するまでアニメーションが所定の位置で停止します アニメーション-再生状態 に ランニング、たとえばホバー時。
.animating_thing {アニメーション：10秒の線形無限回転;アニメーション-再生-状態：一時停止; }。 animating_thing：hover {animation-play-state：running; }
25.CSS変数を使用しないでください
デイブ・シェイ、デザイナー兼作家
最終的にCSS変数を取得します。たとえば、色の16進値を一度記述して、スタイルシートで参照します。しかし、公式の仕様は冗長であり、構文が複雑になり、圧倒的な機能を提供し、ほとんどのブラウザーでほとんどサポートされていません。 Sassが広く普及し、カスタム関数やif / elseステートメントなどの強力なプログラミングロジックを備えた変数を超えている時代では、公式の仕様ははるかに不足しています。
うまくいけば、これらのトップのヒントが、CSSの見方と、CSSがWeb開発と設計で表す可能性を一新したことでしょう。作業を開始する前に、これらの手法を徹底的にテストしてブラウザのサポートを確認することを忘れないでください。
言葉： クレイグ・グラネル 図： マイクチッパーフィールド
この記事はもともとネットマガジン253号に掲載されました。
