Skills of realizing chrome tab bar with CSS

Time:2022-5-14

This time, let’s look at a navigation bar layout with special rounded corners, as shown in the tag bar of Google Browser:

How can such a layout be realized? Several methods are introduced below

1、 Pseudo element splicing

Suppose there is such an HTML structure


<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>

The first way to consider is to splice two pseudo elements

The fillet in the middle is relatively easy. How to realize the reverse fillet on the left and right sides? In fact, you can think about which circular styles can be realized. Here you think of border radius, which can be realized in this way

  • Draw a transparent circle
  • Add a large enough border or projection to the circle
  • Cut a small part
  • complete

The schematic diagram is as follows

Code implementation is

.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 40px red;/* Using box shadow does 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);
}

The final real-time effect is as follows

Clip path is used to realize clipping here. Note that the left and right sides can be clipped more towards the inside to avoid gaps in splicing, and the completed code can be accessedchrome-tab (codepen.io)

Of course, the reverse fillet here can also be realized by radial gradient, and then look down.

2、 Gradient omnipotent

CSS gradients are almost omnipotent. Any graphics can be drawn. You can split them here. There are two rectangles, two circles and two reverse fillets, that is, two linear gradients and four radial gradients, as shown below

Code implementation is


.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%;
}

Although it has been realized, it is very verbose. After careful observation, it is found that two circles can be tiled, and two reverse fillets can be regarded as a semicircle and then tiled, as shown below

In this way, only two radial gradients are required. The code is as follows


.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;
}

The final real-time effect is as follows (the above is the schematic diagram)

Completion code accessiblechrome-tab-gradient (codepen.io)

3、 Adaptive svg

Although gradient is omnipotent, it has a large amount of code, which is a great test of patience. For this example, SVG is also a good solution.

The rounded rectangle in the middle is relatively easy. Just use rect


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

The reverse fillet on both sides can directly use a path path (which can be generated by various graphics software)


<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>

Then take these three pieces of SVG code as the background, which can be adjusted and controlled with background size and 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"),
    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;
}

The real-time effect is as follows

The complete code is accessiblechrome-tab-svg (codepen.io)

In addition, some people may wonder why * * here uses three SVG? Can’t you use one SVG containing three paths** The answer is No. There is no flexible way to use location in SVG. For example, to realize the location in the lower right corner, SVG can only use 100% instead of calc (100% – 12px), let alone CSS has the location attribute of right bottom, so CSS multi background implementation must be adopted

4、 Picture border

The above methods are still too complicated. Can you * * “cut the picture”? Of course, it’s OK, but it also needs some skills to realize self-adaptive. CSS3 border image can be used here. For border image, please refer to this article:Jerry | the correct usage of border image (JD. Com).

Just prepare such a picture, SVG or PNG

SVG is as follows


<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>

Then cut according to the border image specification

The code implementation is as follows. Remember to add border


.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;
}

The real-time effect is as follows

The complete code is accessiblechrome-tab-border-image (codepen.io)

Although the code implementation is relatively brief, due to the addition of border, the content size is not easy to control

5、 Mask mask

In fact, there is a problem with the methods of the previous background pictures. The colors are almost fixed in the background pictures, which is inconvenient to modify. Then, with the help of mask mask, this problem can be easily solved.

With the front background (gradient or SVG is OK), just change the background to WebKit mask in batch, like this

Take SVG as an example and replace it as follows


.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"),
    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;
}

Now it’s convenient to control the background color. If you need to change the background color, just change it directly


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

The complete code can be viewedchrome-tab-mask (codepen.io)

In addition, those who like * * “cut” * * can also use mask border, which is basically the same as the above border image, but gets the effect of mask

Still use this picture to cut

Code implementation is


.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;
}

The complete code is accessiblechrome-tab-mask-border (codepen.io)

Currently still in the draft, there is an alternative attribute-webkit-mask-box-image have access to

6、 Summary and description

Five different layout methods are introduced above, and the key points of implementation are summarized below:

  1. Border radius combined with clip path can realize concave fillet
  2. Gradient is omnipotent, and the repeated content should be completed through background repeat as much as possible
  3. Rect in SVG can realize adaptive rounded rectangle, which is also applicable as background
  4. Multi segment SVG can be used as multi background to control the size and position respectively
  5. The border image can achieve adaptive effect. You need to pay attention to setting the border width
  6. Mask mask can directly use gradient or SVG as mask layer, which makes it easier to modify the background color
  7. Mask border and border image are similar, but currently only supported by – WebKit – kernel

This is the end of this article about the skills of CSS to implement chrome tab bar. For more information about CSS chrome tab bar, please search for previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Shell version of nginx log spider crawling view script

Shell version of nginx log spider crawling view script Just change the path of nginx log before useIf more spiders themselves can be added to the code spider UA array #!/bin/bash m=”$(date +%m)” case $m in “01”) m=’Jan’;; “02”) m=’Feb’;; “03”) m=’Mar’;; “04”) m=’Apr’;; “05”) m=’May’;; “06”) m=’June’;; “07”) m=’July’;; “08”) m=’Aug’;; “09”) m=’Sept’;; “10”) […]