ブックマークに値する 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 相关的重要属性：

• display: flex; 这确保父容器具有 flexbox 布局。
• align-items: center; 这可确保 flex 子项与横轴的中心对齐。
• justify-content: center; 这确保 flex 子项与主轴的中心对齐。

之后，我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的，试试吧！

更多编程相关知识，请访问：编程视频！！

以上がブックマークに値する 12 の CSS ヒント! ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。