ブックマークに値する 12 の CSS ヒント! ！-CSSチュートリアル-php.cn

ブックマークに値する 12 の CSS ヒント! ！

青灯夜游

リリース： 2021-11-09 10:33:49

転載

1406 人が閲覧しました

この記事では、収集する価値のある 12 の CSS ヒントを紹介します。覚えておくと、重要な瞬間に命を救うことができます。お役に立てれば幸いです!

ブックマークに値する 12 の CSS ヒント! ！

1. Shape-outside を使用して、フローティング画像の周囲にテキストを曲げます。

これは、形状を設定できる CSS プロパティです。また、テキストが流れる領域を定義するのにも役立ちます。 css コード:

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

ログイン後にコピー

2. 魔法の組み合わせ

この小さな組み合わせにより、HTML で発生するほとんどのレイアウトエラーを防ぐことができます。私たちは、水平スライダーや絶対位置のアイテムが希望どおりに動作することを望んでいませんし、あらゆる場所にランダムなマージンやパディングも望んでいません。というわけで、魔法の組み合わせをご紹介します。

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

ログイン後にコピー

「display:block」が役に立たない場合もありますが、ほとんどの場合、<a> と <span> を A と同じものとして扱います。他のブロックと同じようにブロックします。したがって、ほとんどの場合、実際に役立ちます。

3. HTML と CSS を分割する

これは、どちらかというと「ワークフロー」タイプのテクニックです。開発中に異なる CSS ファイルを作成し、最後にのみマージすることをお勧めします。たとえば、1 つはデスクトップ用、もう 1 つはモバイル用などです。最後に、Web サイトへの HTTP リクエストの数を最小限に抑えるために、これらをマージする必要があります。

同じ原則が HTML にも当てはまります。 Gatsby などの SPA 環境で開発していない場合は、PHP を使用して HTML コードスニペットを含めることができます。たとえば、ナビゲーションバーやフッターなどを含む「/modules」フォルダーを別のファイルに保存したいとします。したがって、変更が必要な場合でも、すべてのページで編集する必要はありません。モジュール化が進むほど、結果はより良くなります。

4. ::頭文字

ブロックレベル要素の最初の文字にスタイルを適用します。したがって、印刷物や紙の雑誌で見慣れた効果を取り入れることができます。この疑似要素がなければ、この効果を実現するために多くのスパンを作成する必要があります。例:

これはどのように行われるのでしょうか?コードは次のとおりです:

p.intro:first-letter {
  font-size: 100px;
  display: block;
  float: left;
  line-height: .5;
  margin: 15px 15px 10px 0 ;
}

ログイン後にコピー

5. 4 つのコアプロパティ

CSS アニメーションは、多数のプロパティ間をスムーズに移行するための比較的簡単な方法を提供します。優れたアニメーションインターフェイスは、スムーズで滑らかなエクスペリエンスに依存します。アニメーションタイムラインで良好なパフォーマンスを維持するには、アニメーションプロパティを次の 4 つのコアに制限する必要があります:

scale -transform:scale(2)
回転 - 変換:回転(180度)
位置 - 変換:translateX(50rem)
透明度なし - 不透明度: 0.5

境界線の半径、高さ/幅、余白などのアニメーションプロパティはブラウザのレイアウト方法に影響し、背景、色、ボックスの影のアニメーションはブラウザの描画方法に影響します。これらすべてにより、FPS (FramesPerSecond) が大幅に低下します。これらのプロパティを使用すると、興味深い効果を生み出すことができますが、良好なパフォーマンスを維持するためには注意して使用する必要があります。

6. 変数を使用して一貫性を保つ

一貫性を保つための良い方法は、CSS 変数またはプリプロセッサ変数を使用してアニメーションのタイミングを事前定義することです。

:root{ timing-base: 1000;}

ログイン後にコピー

単位を定義せずにベースラインアニメーションまたはトランジションの継続時間を設定すると、この継続時間を calc() 関数で柔軟に呼び出すことができます。この期間は基本 CSS 変数とは異なる場合がありますが、常にこの数値を単純に変更するだけで、常に一貫したエクスペリエンスが維持されます。

7.円錐グラデーション

CSS だけを使用して円グラフを作成できないか考えたことはありますか?良いニュースは、実際にそれができるということです。これは、conic-gradient 関数を使用して実行できます。この関数は、中心点の周りを回転する設定された色の遷移を持つグラデーションで構成される画像を作成します。次のコード行を使用してこれを行うことができます:

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

ログイン後にコピー

8. テキスト選択の色の変更

テキスト選択の色を変更するには、::selection を使用します。これは、ブラウザレベルでオーバーライドされ、テキストのハイライト色を選択した色に置き換える疑似要素です。カーソルでコンテンツを選択すると、効果を確認できます。

::selection {
     background-color: #f3b70f;
 }

ログイン後にコピー

9. ホバー効果

ホバー効果は通常、ボタン、テキストリンク、サイトのブロック部分、アイコンなどに使用されます。カーソルを置いたときに色を変更したい場合は、同じ CSS を使用しますが、それに :hover を追加してスタイルを変更します。これがあなたの方法です。

.m h2{ 
    font-size:36px; 
    color:#000; 
    font-weight:800; 
} 
.m h2:hover{ 
    color:#f00; 
}

ログイン後にコピー

これにより、誰かが h2 タグの上にカーソルを置くと、h2 タグの色が黒から赤に変わります。フォントのサイズやウェイトを変更したくない場合は、再度宣言する必要がないので便利です。指定したプロパティのみが変更されます。

10.Shadow

このプロパティを追加すると、透明な画像に優れたシャドウ効果をもたらします。これは、指定されたコード行を使用して行うことができます。

.img-wrapper img{
          width: 100% ;
          height: 100% ;
          object-fit: cover ;
          filter: drop-shadow(30px 10px 4px #757575);
 }

ログイン後にコピー

11. 使用放置项居中 Div

居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友，你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素，然后使用如下所示的 place-items 属性。

main{
     width: 100% ;
      height: 80vh ;
      display: grid ;
      place-items: center center;
}

ログイン後にコピー

12. 使用 Flexbox 居中 Div

我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题，使用 flexbox 将 div 居中。为此，让我们看一下下面的示例：

<div class="center h-48">
  <div></div>
</div>

ログイン後にコピー

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

ログイン後にコピー

首先，我们需要确保父容器持有圆，即 flex-container。在它里面，我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性：