Clever use of negative value in CSS

<div></div>
div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: 10px;
}

图0:巧妙运用css中的负值

Modify the outline offset to an appropriate negative value, and the outline border will be indented into a plus sign at the appropriate time.

After some attempts, the outline offset of the above div is changed to – 118px.

div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: -118px;
}

Add an animation effect, which is like this:

图1:巧妙运用css中的负值

Codepen demo &; using outline to realize plus sign

Interestingly, I tried many different situations. Finally, I summarized a simple rule. To generate a plus sign with negative outline offset, there are some simple restrictions

The container has to be a squareThe width of the outline border itself cannot be too smallThe range of negative value x of outline offset is: – (half of container width + half of outline width) After this example, I think there are many places where CSS attributes can take negative values. We are most familiar with the negative margin, which can be used to achieve layout similar to multi column contour, vertical center and so on. Are there any other interesting techniques for using negative values?

Here are some interesting usage scenarios of negative CSS.

Unilateral projection

Let’s start with one-sided projection. For box shadow, most of the time, we use it to generate a two-sided projection or a four sided projection. As follows:

图2:巧妙运用css中的负值

OK, what if you want to generate a unilateral projection?

Let’s take a look at the usage definition of box shadow

{
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
}

Taking box shadow: 1px 2px 3px 4PX # 333 as an example, the meanings of the four values are: X-direction offset value, Y-direction offset value, blur radius and expansion radius.

Here’s a trick. The expansion radius can be negative.

Continue, if the blur radius of the shadow is consistent with the negative dilation radius, then we will not see any shadow, because the generated shadow will be included under the original element, unless we set a direction offset for it. So at this time, we can achieve unilateral projection by giving a direction offset value

图3:巧妙运用css中的负值

Codepen demo &; CSS unilateral projection

Using scale (- 1) to flip

Usually, we want to achieve 180 ° flipping of an element, we will use transform: rotate (180DEG). Here is a trick, using transform: Scale (- 1) can achieve the same effect. Watch a demo:

<p class="scale">CSS Nagative Scale(-1)</p>
.scale {
    transform: scale(1);
    animation: scale 10s infinite linear;
}

@keyframes scale{
    50% {
        transform: scale(-1);
    }  
    100% {
        transform: scale(-1);
    }
}

Look at the effect:

图4:巧妙运用css中的负值

(the first line in GIF uses the effect of transform: rotate (180DEG))

Codepen demo &; using scale (- 1) to flip elements

Use negative letter spacing to arrange text in reverse order

Similar to the above scale (- 1) is the negative letter spacing.

The letter spacing property specifies the spacing behavior of the text. Generally speaking, in addition to the keyword normal, we can also specify a size to represent the spacing of the text. Like this:

<p class="letter_spacing">倒序排列文字</p>
.letter_spacing {
    font-size: 36px;
    letter-spacing: 0px;
    animation: move 10s infinite;
}

@keyframes move {
    40% {
        letter-spacing: 36px;
    }
    80% {
        letter-spacing: -72px;
    }
    100% {
        letter-spacing: -72px;
    }
}

We set the letter spacing from 0 – >36px – >- 72px to observe the different changes

图5:巧妙运用css中的负值

Codepen demo &; negative letter spacing

However, due to the influence of mixed arrangement of Chinese and English or different fonts, as well as the arrangement after reverse order, it is not recommended to use this method to arrange the text in reverse order.

Use the negative value of transition delay and animation delay to start the animation immediately

We know that CSS animation and transition provide a delay attribute to delay the animation.

Consider this animation:

图6:巧妙运用css中的负值

The simple code is like this:

<div class="g-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
.item {
    transform: rotate(0) translate(-80px, 0) ;
}

.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}

.item:nth-child(2) {
    animation: rotate 3s infinite 1s linear;
}

.item:nth-child(3) {
    animation: rotate 3s infinite 2s linear;
}


@keyframes rotate {
    100% {
        transform: rotate(360deg) translate(-80px, 0) ;
    }
}

If we want to get rid of this delay, we hope that the three balls will move at the same time as soon as we enter the page. At this time, you just need to change the positive animation delay to the negative one.

.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}

.item:nth-child(2) {
    animation: rotate 3s infinite -1s linear;
}

.item:nth-child(3) {
    animation: rotate 3s infinite -2s linear;
}

Here, there is a trick. The animation with negative animation dealy value will be executed immediately. The starting position is one of the animation stages. Therefore, the animation at the beginning is as follows:

图7:巧妙运用css中的负值

Take the above animation as an example. If the animation delay is – 1s, the starting point is equivalent to the position of 2S (3-1) in normal execution.

Codepen demo &; use negative animation delay to perform animation in advance

Negative margin

Negative margin is widely used in CSS. The outer margin of an element can be set to a negative value.

Before the flexbox layout specification is popular, it still needs to work hard to achieve multi line contour layout. One method is to use positive padding and negative margin cancellation.

There is a layout as follows:

图8:巧妙运用css中的负值

The contents of the left and right columns are uncertain, that is, the height is unknown. However, we hope that the height of the two columns will always be the same regardless of whether there is more content on the left or on the right.

OK, one of the hack methods is to use a large positive padding and the same negative margin cancellation method to fill the left and right columns

.g-left {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

.g-right {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

No matter how the height of the left and right columns changes, the lower column will change with the other column.

The specific code can be seen here: codepen demo &; positive padding and negative margin realize multi column contour layout

To sum up

In addition, there are some well-known ones that are not listed separately, such as:

Using negative margin to center elements horizontally and verticallyUse negative margin to hide redundant borders at the beginning and end of the listUsing negative text indent to hide textUsing negative Z-index to participate in cascading context sortinglast

Well, although some scenarios with negative CSS values are really useful, at the same time, it may lead to the decline of code readability. Sometimes when I see these codes, I have to do a good job in order to relax my mind, and then I sigh, I see.

If there are other better and easier to understand implementation methods, we should weigh them carefully when using the implementation.

Well, the end of this article, I hope to help you 🙂

Author: chokcoco
Link: https://juejin.im/post/5d4b8707f265da03a65302bd

Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image