CSS (カスケード スタイル シート) は、Web デザインで最も人気のあるテクノロジーの 1 つで、開発者は視覚的でレスポンシブなデザインを作成できます。 Web 開発者として、CSS をマスターすることは、デザインのビジョンを実現し、すべてのデバイスで優れたユーザー エクスペリエンスを保証するために非常に重要です。 CSS で意外と知られていないヒントをいくつか紹介します:

1.ニューモルシュム:

ニューモーフシミュレーションとは、ソフト UI デザインを指し、スキューモーフィズムとフラット デザインを組み合わせた人気のデザイン トレンドです。このスタイルはシャドウとハイライトを使用して滑らかな外観を作成します。これがその仕組みです:

まず、微妙な背景を作成します。Neumotphsime から始めるには、ライト グレーのような柔らかい背景色を選択します。

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

次に、これらのスタイルを使用して要素を作成します

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

最後に、ホバー時に要素にボックスシャドウを追加します

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

これで素敵な外観が得られます

これも作れます

このようにボックスの影にインセットを追加するだけです

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. Min() & Max() およびクランプ():

これらのツールにより、Web サイトとアプリはより動的で応答性が高くなります。これらの関数を使用して、要素のサイズ変更とサイズ変更を制御できます。ここで柔軟なタイポグラフィを作成する方法:

min() 関数を使用すると、リストから最小値を設定できます。

前に

.container {
  width:800px;
  max-width:90%;
}

後

.container{
  width: min(800px,90%);
}

max() 関数は min() 関数と同じように機能しますが、リストからより大きな値を取得します。方法は次のとおりです。

.container{
  width: max(800px,90%);
}

1 つのコンテナで幅、最小幅、最大幅を設定する場合があります。clamp() という名前の別の関数があります。これがどのように機能するかです

前に

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

後

.container {
  width: clamp(400px,50vw,800px);
}

3. :Has() および :Not() セレクター:

:not() セレクターは、セレクターのリストに一致しない要素を表します

.container:not(:first-child) {
  background-color: blue;
}

:has() セレクターは、引数として渡される相対セレクターのいずれかが一致する場合に要素を表します

.container:has(svg) {
  padding: 20px;
}

4.テキストのグラデーション:

このトリックでは、このようにテキストの色に直接グラデーションを追加することはできません

.text{
  color: linear-gradient(to right, red,blue);
}

その代わりに私たちがやること

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

そして、素晴らしい効果が得られました

結論：

これらの CSS テクニックのいずれかをマスターすることで、Web デザインのスキルを新たな高みに引き上げることができます。これらのテクニックを少し調整するだけで、視覚的に素晴らしい結果が得られ、デザインをより美しく、使いやすいものにすることができます。

詳細は https://designobit.com/