見逃していると思われる10（その他）のCSSトリック

Web開発者が特定の結果を達成するために使用できるCSSスニペットがたくさんあります。次に、コンテンツを垂直方向に整列させるなどの目的で使用できるCSSトリックがあります。 CSSは進化を続けるエンティティであり、繰り返しますが、CSSの便利なトリックをよく知っています。.

今日の投稿では、私はあなたを紹介しています あなたが知らないかもしれない10以上のCSS属性とトリック.

1.縦書き

というCSS属性があります。 書き込みモード それはこれら3つの値の1つを受け入れます。 水平方向のTB, 垂直方向 そして 縦長.

水平方向のTB これがデフォルトであり、それは要素内の典型的な左から右への水平テキストフローを引き起こします。.

の 垂直-* ただし、値は垂直方向のブロックフロー用であり、ブラウザによってテキストが上から下に書き込まれます。に 垂直方向, 前の行の左側に新しい行が追加されます。 縦長.

これは役に立ちます 中国語や日本語などの言語を表示する これは通常上から下に書かれていて、テーブルの見出しのように水平方向のスペースを節約するためにテキストを垂直に表示したいときにも使われます。.

注意： 個々の文字の方向を制御したい場合は、必要に応じて、文字の向きを縦にしたり横にしたりできます。.

 -webkit-writing-mode：vertical-rl; -ms-writing-mode：tb-rl;書き込みモード：vertical-rl。 

2.カラー値を再利用する

キーワード currentColor の値を運ぶ 色 属性であり、次のような色の値を受け入れる他の属性で使用できます。 バックグラウンド.

div 背景：線形グラデーション（90度、currentColor 50％、黒50％）;…色：＃FFD700; / * currentColorは＃FFD700 * /です。 

ブレンドの背景

要素は、複数の背景（背景色と複数の背景画像）を持つことができます。の 背景ブレンドモード 与えられたブレンドモードに従って、それらすべてを一緒にブレンドします。現時点で合計16のブレンドモードがあります.

背景ブレンドモード：違い。 

4.ブレンド要素

mix-blend-modeは、重なっている要素の内容と背景をブレンドします。 FirefoxはFirefoxをサポートしていますが、Chromeはすべてのモードをサポートしているようには見えません。.

ミックスブレンドモード：色。 

私は二つの要素を取りました。 img バラとのイメージを示す スパン グラフィックの背景で、それらを積み重ねて、いくつかのmix-blend-modeを適用しました.

5.ポインタイベントを無視する

という名前の単一の属性を使用することで、要素をポインタイベントの影響を受けないようにすることができます。 ポインタイベント. 与えることによって ポインタイベント の値 無し 要素内では、これはそれがポインタイベントのターゲットになるのを防ぎます。 IE11以降のサポート.

次のデモでは、2つの画像を重ねて下にチェックボックスがあります。両画像とも ポインタイベント：なし, それらの下に埋め込まれたチェックボックスをクリックすることを許可します。チェックボックスのチェック状態に基づいて、目的の画像が表示され、もう一方の画像は非表示になります。.

6.分割ボックスを飾る

通常、ボックスが分割されるとき（インライン要素が改行を目撃するときのように）、分割された部分の端にはボックススタイルがなく、スライスされて見えます。それを避けるためには、 ボックスデコレーションブレイク：クローン.

例と初期の「地平線のクリスマス」のリマインダーでそれをフォローアップするために、ここにサンタのトナカイのすべてが単一でタイプされたリストがあります スパン! ホー！ホー！ホー!

注意：現代のIEはサポートしていますが ボックスデコレーションブレイク, 分割部分の境界線の端では、レンダリングは滑らかではなく、背景はスライスされて見えます。しかしそれはレンダリングします ボックスシャドウ 境界線と背景の両方にボックスシャドウを使用したのはそのためです。あなたはスペースで埋めることができるかもしれないIEの端に水平方向のパディングの欠如もあります.

7.表の要素を折りたたむ

可視性：崩壊 行や列など、表の要素に対してのみ作成される属性です。他のもので使用された場合、それは次のように振る舞います 可視性：隠されている. Chromeはそれを好む 隠された テーブル要素でも.

割り当てるとき 可視性：崩壊 テーブル要素では、それは隠され、そのスペースは近くのコンテンツで埋められます。 表示：なし 代わりに.

しかし違う 表示：なし スペースを削除した後にテーブルレイアウトを変更しますが、レイアウトは同じです。 可視性：崩壊. あなたはそれがどのように機能するかをここでもっと詳細に見ることができます.

8.列を作成する

あなたはあなたのコンテンツのためにカラムレイアウトを作成することができます。 コラム 属性。列数を指定できます（列数）と各列幅（列幅）要素にレンダリングされる.

画像のようにコンテンツがテキスト以外のものである場合は、列の幅に合わせて幅を覚えておく必要があります。次の例では、私は 列数 必要な列数を指定する.

-webkit-column-count：2; -moz-column-count：2;列数：2。 

9.要素をサイズ変更可能にする

CSS3属性を使用して、要素をサイズ変更可能（縦、横、または両方）にすることができます。 リサイズ . サイズ変更可能性 テキストエリア 同じを使用して無効にすることができます.

サイズ変更：縦。サイズ変更：水平。サイズ変更：両方。サイズ変更：なし。 

10.パターンを作成する

1つの要素に対して複数のCSS3グラデーション（線形と放射状の両方）を作成し、それらを重ねてパターンを作成することができます。これにより、 外部画像を使用せずに要素のための素晴らしい背景を作成する. それを機能させるには少し練習が必要かもしれません.