BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】Chromeのタブバーを実装するためのCSSのコツ

2022-01-21 05:19:44

今回は、Google Chromeのタブバーについて、以下のような特殊な丸みを帯びたナビゲーションバーを使ったレイアウトを見てみましょう。

このようなレイアウトは、どのように実装されるのでしょうか。いくつかの方法を紹介しましょう。

I. 擬似要素ステッチング

次のようなHTML構造があるとします。 

<nav class="tab">
  <a class="tab-item">Svelte API</a>
  <a class="tab-item active">Svelte API</a>
  <a class="tab-item">Svelte API</a>
  <a class="tab-item">Svelte API</a>
</nav>

まず考えられるのは、2つの擬似要素を用いて縫い合わせる方法です。

真ん中の角丸は簡単ですが、左右の逆角丸はどのように実現するのでしょうか。実は、角丸を実現するためにどんなスタイルが使えるかを考えてみると、ここではborder-radiusを思いつき、以下のように実装することができます。

  • 透明な円を描く
  • 円に十分な大きさの枠線または突起を付ける
  • 小さな部分を切り取る
  • 仕上げ

回路図は次のとおりです。

コードで実装されているのは 

.tab-item{
  position: relative;
  background-color: red;
  padding: 10px 15px;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  transition: .2s;
}
.tab-item::before,.tab-item::after{
  position: absolute;
  bottom: 0;
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 100%;
  box-shadow: 0 0 0 0 40px red;/*Use box-shadow to not affect the size*/
  transition: .2s;
}
.tab-item::before{
  left: -20px;
  clip-path: inset(50% -10px 0 50%);
}
.tab-item::after{
  right: -20px;
  clip-path: inset(50% 50% 0 -10px);
}

最終的なライブ効果は以下の通りです。

ここでは、クリップパスを使ってクロップを実装しています。縫い目の隙間をなくすために、左右をもう少し内側に向けてクロップできることに注意してください。 クロームタブ（codepen.io)

もちろん、この逆の角丸も放射状のグラデーションで実現できますので、読んでみてください。

II. 全能のグラデーション

CSSのグラデーションはほぼ全能で、どんな形にも描くことができる。ここでは、以下のように、2つの矩形、2つの円、2つの逆角丸と分割することができ、2つの線形グラデーションと4つの放射状グラデーションを意味します。

コードで実装されているのは 

The .tab-item{
  padding: 10px 35px;
  background-image: 
    radial-gradient(circle at 0 0, transparent 15px,blue 0),
    radial-gradient(circle at 0 0, transparent 15px,blue 0),
    radial-gradient(circle at 0 0, green 12px,transparent 0,
    radial-gradient(circle at 12px 0, green 12px,transparent 0,
    linear-gradient(red,red),
    linear-gradient(red,red);
  background-repeat: no-repeat;
  background-position: 15px top, right 15px top 0, left bottom, right bottom, center bottom, center, bootom;
  background-size: 30px 30px, 30px 30px, 12px 12px, 12px 12px, calc(100% - 30px) calc(100% - 12px), calc(100% - 54px) 100%;
}

実装はされているものの、非常に冗長です。よく見ると、2つの円はタイリングを使って実装することができ、2つの逆丸い角は半円と見ることができ、これもタイリングすることができ、模式的には以下のようになります。

これは、次のようなコードで、たった2つの放射状グラデーションで実現されています。 

The .tab-item{
  position: relative;
  padding: 10px 35px;
  cursor: pointer;
  background-image: radial-gradient(circle at 15px 0, transparent 15px,blue 0),
    radial-gradient(circle at 27px 12px, green 12px,transparent 0),
    linear-gradient(red,red),
    linear-gradient(red,red);
  background-size: 100% 15px,calc(100% - 54px), calc(100% - 30px) calc(100% - 12px), calc(100% - 54px) 100%;
  background-position: -15px bottom, left top, center bottom, center bottom;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
}

最終的なライブ効果は次のようになります（上の模式図）。

補完コードには、以下からアクセスできます。 クロームタブグラデーション (codepen.io)

III. アダプティブsvg

グラデーションは確実ですが、より多くのコードを必要とし、非常に忍耐が必要です。この例では、svgも良い解決策になります。

<イグ

真ん中の丸みを帯びた長方形は簡単で、rectを使うだけです。 

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>   
	<rect rx="12" width='100%' height='100%' fill="#3A8EFF"/>
</svg>

両側の逆丸めは、パスパスの一部を使って直接行うことができます（各種グラフィックソフトで生成可能です）。 

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/ 2000/svg">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M0 100C55.2285 100 100 55.2285 100 0V100H0Z" fill="# 3A8EFF"/>
</svg>


<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/ 2000/svg">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M100 100C44.7715 100 0 55.2285 0 0V100H100Z" fill="# 3A8EFF"/>
</svg>

そして、3つのsvgコードを背景として使用し、background-sizeとbackground-positionで調整し制御することができます。 

.tab-item{
  position: relative;
  padding: 10px 35px;
	margin: 0 -15px;
  cursor: pointer;
  transition: .2s;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/ 2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M100 100C44.772 100 0 55.228 0 0v100h100z' fill='%23F8EAE7'/%3E%3C/svg%3E& quot;),
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E% 3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 100c55.228 0 100-44.772 100-100v100H0z' fill='%23F8EAE7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='12' width='100%' height='100%' fill='%23F8EAE7' /></svg>");
  background-size: 12px 12px, 12px 12px, calc(100% - 24px) calc(100% + 12px);
  background-position: right bottom, left bottom, center top;
  background-repeat: no-repeat;
}

ライブ効果は以下の通りです。

全コードは、以下のサイトでご覧になれます。 クロームタブ-svg (codepen.io)

また、人によっては、**なぜここで3つのsvgセグメントが必要なのか、3つのパスを含む1つのsvgセグメントだけではだめなのか、と思うかもしれません。**答えはノーです。svg では柔軟な配置を使用できません。たとえば、右下隅を実現するために、svg では 100% しか使用できず、calc (100% - 12px) は使用できません。また、右下などの CSS 配置プロパティはもちろん、CSS 複数の背景を使用して実現しなければならないため、calc は使用できません。

IV. 画像の縁取り

上記の方法はまだ複雑すぎると感じますが、**"カットアウト"**することは可能でしょうか？もちろん可能ですが、適応させるためにはある程度のスキルが必要です。ここでは、CSS3のborder-imageを使って実現します。border-imageについては、こちらの記事を参照してください。 JELLY｜border-imageの正しい使い方（jd.com）。

このような画像を用意するだけで、svgでもpngでも大丈夫です。

svgは以下の通りです。 

<svg width="67" height="33" viewBox="0 0 67 33" fill="none" xmlns="http://www.w3.org/2000/ svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M27 0c-6.627 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15h67c- 8.284 0-15-6.716-15-15v-6c0-6.627-5.373-12-12-12H27z" fill="#F8EAE7"/>
</svg>

あとはborder-imageの指定に従ってカットするだけです

コードは以下のように実装され、ボーダーを追加することを忘れないようにします。 

The .tab-item{
  position: relative;
  padding: 0 8px;
  margin: 0 -15px;
  cursor: pointer;
  border-width: 12px 27px 15px;
  border-style: solid;
  border-image: url("data:image/svg+xml,%3Csvg width='67' height='33' viewBox='0 0 67 33' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27 0c-6.627 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15h67c-8.284 0-15-6.716-15-15v-6c0- 6.627-5.373-12-12-12H27z' fill='%23F8EAE7'/%3E%3C/svg%3E") 12 27 15 fill;
}

ライブ効果は以下の通りです。

完全なコードは、以下のサイトにあります。 クロムタブボーダーイメージ（codepen.io)

このコードは比較的簡単に実装できますが、ボーダーを追加することで、コンテンツのサイズを多少制御できなくなります。

V. マスク

背景画像の最初のいくつかの方法は、実際に問題がある、色は背景画像にあり、ほぼ固定され、変更することは容易ではない、その後、マスクのマスクの助けを借りて、あなたは簡単にこの問題を解決することができます。

以前の背景（グラデーションでもsvgでも何でも）では、次のように背景バッチを-webkit-maskに変更するだけでした。

svg を例にとると、置き換えは次のようになります。 

.tab-item{
  position: relative;
  padding: 10px 35px;
  cursor: pointer;
  background: #F8EAE7;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org /2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M100 100C44.772 100 0 55.228 0 0v100h100z' fill='%23F8EAE7'/%3E%3C/svg%3E& quot;),
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E% 3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 100c55.228 0 100-44.772 100-100v100H0z' fill='%23F8EAE7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='12' width='100%' height='100%' fill='%23F8EAE7' /></svg>");
  -webkit-mask-size: 12px 12px, 12px 12px, calc(100% - 24px) calc(100% + 12px);
  -webkit-mask-position: right bottom, left bottom, center top;
  -webkit-mask-repeat: no-repeat;
}

これで背景色のコントロールが簡単になりましたので、背景色を変える必要がある場合は、変更するだけです 

.tab-item:hover{
  background: #F2D0CA;
}

全コードは、以下のサイトで見ることができます。 クロームタブマスク（codepen.io)

また、**"切り抜き "** を好む人は、上記の border-image と基本的に同じですが、マスク効果を持つ mask-border を使用することもできます。

まだこの画像を使っています、カット用

コードの実装は 

.tab-item{
  /*... */
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='67' height='33' viewBox='0 0 67 33' fill='none' xmlns='http://www.w3.org /2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27 0c-6.627 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15h67c-8.284 0-15-6.716- 15-15v-6c0-6.627-5.373-12-12-12H27z' fill='%23F8EAE7'/%3E%3C/svg%3E") 12 27 15;
}

完全なコードは、以下のサイトからアクセスできます。 クロームタブマスクボーダー (codepen.io)

まだ草案ですが、代替プロパティがあります -webkit-mask-box-image（ウェッブキット・マスク・ボックス・イメージ）。 で使用することができます。

VI. まとめと注意事項

以上、合計5種類のレイアウト方法について説明しましたが、実装のポイントをまとめると以下のようになります。

  1. border-radiusとclip-pathで角丸を実現。
  2. グラデーションが全てであり、重複するコンテンツは極力background-repeatで行う。
  3. svgの矩形は適応的な丸みを帯びた矩形として使用でき、背景としても機能する
  4. 複数のsvgセグメントを複数の背景として使用でき、サイズと位置を個別に制御できます。
  5. border-imageは、border-widthに注意して設定することで、アダプティブ効果を得るために使用することができます。
  6. マスクはグラデーションやsvgマスクレイヤーとして直接使用でき、背景色を簡単に変更することができます
  7. mask-border は border-image に似ていますが、現在 -webkit- カーネルのみでサポートされています。

以上、Chromeのタグバーを実装するためのCSSのTipsを紹介しました。CSS Chromeのタグバーに関する詳しい情報は、過去の記事を検索していただくか、引き続き以下の記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します