素晴らしいCSSトリック(パート1)

1 .テキストの背景

赤、黄色、緑のような伝統的な色の疲れ?何か新しいものを試してみたい?このトリックは、色のほかに、画像、ビデオを使用することができますし、線形勾配、ラジアルグラデーション、あなたのためです.あなたのテキストを“ペイント”する.
例:

涼しい、右見て?あなたがテキストの背景イメージ(動きのように……)のいくつかの効果があるならば、それはより衝撃的です.
上のコードのスニペットは以下の通りです.

background: url(...);
-webkit-background-clip: text;
color: transparent;

しかし、このトリックの欠点は、すべてのブラウザがうまくサポートしていないことです.
https://caniuse.com/?search=-webkit-background-clip
あなたのウェブサイトを完全にすべてのブラウザで動作する場合は、それを使用するときに注意してください.

丸いボーダー

私は、あなたの大部分がこれのような丸い境界を持つボタン/リンクを作ったと思います:

これを取得する非常に簡単な方法は、境界半径を使用して、その属性をピクセルの数値に設定します.しかし、初心者が通常闘争するものは、何の数が十分ですか?私がニュービーであったとき、これらの日を思い出してください、私は常にdevtoolsを開けて、それから乱数を設定して、それから私が私が欲しかった正確な結果を得るまで、前後にそれを変えます.境界半径属性を考慮して時間を費やすならば、境界半径の値を増加させ続けるなら、ピクセルの特定の値の後、境界の真円度は同じままであることがわかります.それで、我々の考えが遊びに来るとき、これはそうです.🤤 あなたはちょうど非常に大きな値に境界半径を設定する必要があります我々は、幅、高さ、パディング、私たちのボタンのマージンに関係なく丸い境界線をアーカイブします.私の好きな値は999 pxです.それは覚えて、私の意見では非常に簡単です、それはいい番号です.

3 .テキストコンテンツのカラム分割

通常のコンテンツの代わりに、CSSを使用すると、テキストコンテンツを列に表示することができます(このように、雑誌や新聞を読んでください.

このコードスニペットを使用できます.

-webkit-column-count: 3 // the number of columns
column-count: 3
-webkit-column-gap: 40px; // the gap between column
column-gap: 40px;

あなたの要件に合うように任意の数に列の数と列のギャップを変更します.

視差スクロール

パララックススクロールは、今日、より多くのデザイナーとフロントエンド開発者が彼らのウェブサイト(ポートフォリオ)に置くのが好きである衝撃的な影響です.
W 3 Schoolによると、視差スクロールは背景画像(すなわちイメージ)がスクロールしている間、前景内容より異なる速度で動かされるウェブサイト傾向です.以下のリンクをクリックして、パララックススクロールなしでウェブサイトの違いを見てください.
これがこの手法の一例です.Link
最初は、JavaScriptを使用してその効果を取得しなければならないと思いました.驚くべきことに、CSSでは、ケーキのようなものです.そのセクションのCSSで、背景画像でセクションを作成してください.

background-attachment: fixed

例えば、

.parallax{
    background-image: url(...); // your background image
    ... // some attribute to make your background looks good
    background-attachment: fixed; // this is where the magic happens
}

あなたはそれに興味を持っている場合は、それをショットを与えましょう.Link

5 .オブジェクトフィット

時には、アイテムのリスト、画像のリストを表示する必要があります.しかし、イメージの幅と高さは、レイアウトを壊すのと同じではないかもしれません.その時、イメージのサイズを変えることが利用できないならば、私は最高の解決がイメージに特定の高さまたは幅(多分両方とも)をセットすることになっていると思います?しかし、あなたがそのようにイメージのサイズをセットするとき、あなたは若干の問題につながるイメージ比率面を壊すかもしれません.このように:
これが最初の例です( 400 x 300 )

この画像のサイズを200 x 300に設定すると、次のようになります.

非常に、我々は完全に新しい画像を持っているので、オブジェクトフィットのための時間が遊びに来る.CSSオブジェクトフィットは、IMGまたはビデオがどのようにリサイズされるべきであるか、コンテナに合うかを指定するのに使用されます.
ここがどこですかobject-fit プロパティが入っています.角object-fit Countプロパティは次のいずれかの値をとることができます.

fill これはデフォルトです.指定された寸法を埋めるためにイメージをリサイズします.必要に応じて、画像を伸ばすか、またはフィットするために

contain イメージ-そのアスペクト比を維持しますが、与えられた次元内に収まるようにサイズ変更されます

cover ○-画像はそのアスペクト比を保ち、与えられた寸法を満たす.画像がフィットするようにクリップされます

none no -画像がリサイズされません

scale-down ちょっと-イメージは、1の最小のバージョンに縮小されますnone うんcontain

ほとんどの場合、私は通常カバーを使用します.
我々はオブジェクトフィットを使用する場合:カバー;次のような写真があります.

イメージはそのアスペクト比のままですが、クリップされます.それはいくつかのケースでは本当に良いことではないが、それはトレードオフです.
詳細な例と詳細はこちらをご覧ください.Link

テキスト行の長さをx行に制限する

テキストの長さを制限するために、JavaScriptを使用することができますが、その時、行の数ではなく文字数を制御できます.もしテキストがそれより長い場合、テキストを4行に表示したいなら、何か他のものを見せるでしょう.はい、我々が望むならば、我々もJavaScriptを使ってそれをすることができます、しかし、それはちょうど文字の数を制限するより複雑です.
我々は、CSSだけを使用して取得することができます、素晴らしい右、右?
このジョブを行うためのスニペットコードは以下の通りです.

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
text-overflow: ellipsis;

$ lineをテキストを表示する行の数に置き換えます.
例を確認してください.Link

テキストオーバーフロープロパティは、テキスト長が上記のコードスニペットで必要な行の数を超えた場合、残りのテキストがどのように表示されるかを定義します.詳細は、行くことができますhere
ボックス指向プロパティは、要素が水平または垂直にその内容をレイアウトするかどうかを設定します.詳細は、行くことができますhere
⚠️ 悪いトリックは、私がこのトリックで言及した属性がすべてのブラウザーのすべてのバージョンによってサポートされないということです.それで、もう一度、あなたがそれを使うとき、注意してください.たとえそれがダウンサイドであっても、私は、それがあなたが見てみたいかもしれない強力なトリックであると思います、そして、多分、あなたは時々それを使いたいです.