Ten useful CSS tricks that you don't use very often

Here are some useful CSS tricks that you don’t use very often.

1. cursor

The CSS property cursor is used to set the type of cursor that is displayed when the mouse pointer hovers over the element.

The URL property allows you to set the cursor display to a custom image, as shown in Figure 2 below

cursor: url(./assets/arrow-down-circle.svg) 0 0, progress;
Copy the code

Emoji are also supported, as shown in Figure 3

cursor: url("data:image/svg+xml; utf8,
      ),
  pointer;
Copy the code

The CURSOR property can have zero or more < URL > values, separated by commas, and followed by a keyword value. Each < URL > points to an image file.

The browser loads in this order:

First the browser will try to load the first image specified
If not, try to load the next image
If all images specified by the URL cannot be loaded, the last value is used.

Each < URL > is optionally followed by a pair of space-separated numbers <x><y> to indicate offset. They are used to set the hot spot of the pointer (that is, the actual clicking position of the custom icon) relative to the upper-left corner of the icon.

For example, the following example uses the < URL > value to specify two images, provides the <x><y> coordinates for the second image, and returns the pointer keyword value if neither image can be loaded:

cursor: url(cursor1.png), url(cursor1.png) 2 2, pointer;
Copy the code

2. :target

Use the: Target pseudo class to create the effect of the popup

HTML

<div class="wrapper">
  <a href="#demo-modal">Open Modal</a>

  <div id="demo-modal" class="modal">
    <div class="modal__content">
      <div class="modal__header">Modal Header</div>
      <div class="modal__body">
        <p>
          You can use the :target pseudo-class to create a modals with Zero
          JavaScript. Enjoy!
        </p>
      </div>
      <div class="modal__footer">Footer</div>
      <a href="#" class="modal__close">X</a>
    </div>
  </div>
</div>
Copy the code

CSS

.modal {
  position: absolute;
  height: 100vh;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal:target {
  visibility: visible;
}
Copy the code

Effect:

3. :empty

The :empty pseudo-class represents elements that have no children. Child elements can only be element nodes or text (including Spaces). Comments or processing instructions do not matter.

HTML

<div class="wrapper">
  <div>red</div>
  <div><! -- green --></div>
</div>
Copy the code

CSS

.wrapper div {
  width: 100px;
  height: 100px;
  margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: red;
}
.wrapper div:empty {
  background-color: green;
}
Copy the code

The effect

4. -webkit-line-clamp

The CSS property – Webkit-line-clamp limits the content in a block container to a specified number of rows.

It only works if the display attribute is set to -webkit-box or -webkit-inline-box and the -webkit-box-orient attribute is set to vertical

HTML

<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>
Copy the code

CSS

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
Copy the code

The effect

This property does not support IE.

5. sticky

Sticky positioning can be regarded as a mixture of relative and fixed positioning. The element is positioned relative before crossing a specific threshold, and then fixed.

Such as:

#one {
  position: sticky;
  top: 10px;
}
Copy the code

Elements are positioned relative to each other until the viewport scrolls to the top less than 10px away. After that, the element will be fixed 10px from the top until the ViewPort is rolled back below the threshold.

HTML

<div class="wrapper">
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
  </dl>
</div>
Copy the code

CSS

dt {
  position: sticky;
  top: 0;
}
Copy the code

The effect

6. conic-gradient

The conic-gradient() function can be used to create a tapered gradient. The most common scenario is to create a pie chart.

The following code

.wrapper {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-image: conic-gradient(
    # 001133 0 15%.#aa0044 0 40%.#ddaa11 0 85%.#2da132 0 100%
  );
}
Copy the code

The effect

Radial gradient is used in a similar way

width: 400px;
height: 400px;
border-radius: 50%;
background-image: radial-gradient(
  # 001133 0 15%.#aa0044 0 40%.#ddaa11 0 56%.#208f25 0 100%
);
Copy the code

7. transform-origin

The transform-origin property sets the reference point at which the element is rotated. By default, rotation is based on the center point of the element

Effect of changing the position of the rotation point

.wrapper div {
  transform-origin: 50% 100%;
}
Copy the code

8. shape-outside

The shape-outshide property can define an arbitrary shape and have its adjacent contents laid out around the shape.

HTML

<div class="main">
  <div class="circle"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
    hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel,
    dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet
  </p>
</div>
Copy the code

CSS

.circle {
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
  float: right;
}

p {
  text-align: center;
}
Copy the code

When adjusting the parameters of the circle function, the effect is as follows:

In addition, ellipse() can be used to draw ellipses, polygon() to draw polygons, etc.

This property does not support IE.

9. mask-image

The mask-image attribute sets a mask layer for an element.

HTML

<div id="masked"></div>
Copy the code

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  -webkit-mask-image: url(https://media.prod.mdn.mozit.cloud/attachments/2016/03/03/12676/cef7251f571b727c87a4613cfb347bbc/star.svg);
  mask-image: url(https://media.prod.mdn.mozit.cloud/attachments/2016/03/03/12676/cef7251f571b727c87a4613cfb347bbc/star.svg);
}
Copy the code

The effect

The mask layer can be an image, specified by URL () or image(), or it can be a gradient layer, implemented by Linear-gradient () or radial-gradient().

This property does not support IE.

10. mix-blend-mode

The mix-blending-mode attribute describes how the content of an element should be displayed mixed with the content of its parent element and the background of the element.

HTML

<div class="blend">
  <img
    src="https://cdn.pixabay.com/photo/2016/12/11/12/02/bled-1899264_960_720.jpg"
  />
  <h1>NATURE</h1>
</div>
Copy the code

CSS

.blend img {
  position: absolute;
  height: 300px;
}

.blend h1 {
  position: absolute;
  mix-blend-mode: overlay;
}
Copy the code

The effect

CSS has a variety of built-in blend modes to choose from.

This property does not support IE.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Ten useful CSS tricks that you don’t use very often

1. cursor

2. :target

3. :empty

4. -webkit-line-clamp

5. sticky

6. conic-gradient

7. transform-origin

8. shape-outside

9. mask-image

10. mix-blend-mode

The sample code has been uploadedGitHub

Ten useful CSS tricks that you don’t use very often

1. cursor

2. :target

3. :empty

4. -webkit-line-clamp

5. sticky

6. conic-gradient

7. transform-origin

8. shape-outside

9. mask-image

10. mix-blend-mode

The sample code has been uploadedGitHub

Related Posts

Websocket – Client quick start

Egg.js project construction

How to solve the problem of caching static resources