This article will share with you 12 interesting and practicalCSStips to make front-end development easier. Come and collect it. I hope it will be helpful to everyone!

(Recommended learning:css video tutorial)

1. Typing effect

Code implementation:

 
 有趣且实用的 CSS 小技巧 
 

.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; } .typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em; } @keyframes typing { from { width: 0 } } @keyframes blink { 50% { border-color: transparent } }

Achieve the effect:

2. Set the shadow

When using a transparent image, you can use the drop-shadow() function on the image Create a shadow instead of using the box shadow property to create a rectangular shadow behind the entire box of the element:

 
 
 box-shadow 
  
 
 
 drop-shadow 
  
 

.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; } .mr-2 { margin-right: 2em; } .mb-1 { margin-bottom: 1em; } .text-center { text-align: center; } .box-shadow { box-shadow: 2px 4px 8px #585858; } .drop-shadow { filter: drop-shadow(2px 4px 8px #585858); }

Contrast effect:

3. Smooth scrolling

No JavaScript is required to achieve smooth scrolling, just one line of CSS: scroll-behavior: smooth;

 
 
A
 
B
 
C
 

html { scroll-behavior: smooth; } nav { position: fixed; left: calc(50vw - 115px); top: 0; width: 200px; text-align: center; padding: 15px; background: #fff; box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2); } nav .link { padding: 5px; color: white; } .section { height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 5em; text-shadow: 0px 2px 0px #b2a98f, 0px 4px 3px rgba(0,0,0,0.15), 0px 8px 1px rgba(0,0,0,0.1); } .bg-red { background: #de5448; } .bg-blue { background: #4267b2; } .bg-green { background: #4CAF50; }

Achieve effect:

4. Custom Cursor

We can use custom images or even emojis as cursors.

 
 Default 
 
 Image 
 
 Emoji 
 

.wrapper { display: flex; height: 100vh; align-items: center; justify-content: center; background: #4776e6; background: linear-gradient(to right, #4776e6, #8e54e9); padding: 0 10px; } .tile { width: 200px; height: 200px;display: flex; align-items: center; justify-content: center; background-color: #de5448; margin-right: 10px;color: #fff; font-size: 1.4em; text-align: center; } .tile-image-cursor { background-color: #1da1f2; cursor: url(https://picsum.photos/20/20), auto; } .tile-emoji-cursor { background-color: #4267b2; cursor: url("data:image/svg+xml;utf8,"), auto; }

Achieve the effect:

5. Truncate text

One line of text overflows and hides:

 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 

div { width: 200px; background-color: #fff; padding: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Achieve the effect:

You can also use the "-webkit-line-clamp" attribute to truncate text to a specific number of lines. The text will display an ellipse at the truncated location:

div { width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

Achieve the effect:

6. Customize the selected style

CSS pseudo-element ::selection can be used to customize the highlighting style of documents selected by the user.

 
 
 默认高亮 
 
 自定义高亮 
 
 

.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; } p { font-size: 2rem; font-family: sans-serif; } .custom-highlighting::selection { background-color: #8e44ad; color: #fff; }

Achievement effect:

##7. CSS modal box

We can use CSS :target pseudo-element to create a modal box.

 Open Modal 
 
 
 
CSS Modal
 
hello world
 × 
 

.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #834d9b, #d04ed6); } .wrapper a { display: inline-block; text-decoration: none; padding: 15px; background-color: #fff; border-radius: 3px; text-transform: uppercase; color: #585858; font-family: 'Roboto', sans-serif; } .modal { visibility: hidden; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(77, 77, 77, .7); transition: all .4s; } .modal:target { visibility: visible; opacity: 1; } .modal__content { border-radius: 4px; position: relative; width: 500px; max-width: 90%; background: #fff; padding: 1em 2em; } .modal__close { position: absolute; top: 10px; right: 10px; color: #585858; text-decoration: none; }

Achievement effect:

#8. Empty element style

You can use the :empty selector to set no child elements or text at all The style of the element:

 
 
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
 

.wrapper { height: 100vh; display: flex; justify-content: center; align-items: center; } .box { display: inline-block; background: #999; border: 1px solid #585858; height: 200px; width: 200px; margin-right: 15px; } .box:empty { background: #fff; }

The effect is achieved:

9. Create a custom scroll bar

 
 
 
 默认滚动条 
 
 
 
 自定义滚动条 
 
 
 

.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; } .mr-1 { margin-right: 1em; } .tile { overflow: auto; display: inline-block; background-color: #ccc; height: 200px; width: 180px; } .tile-custom-scrollbar::-webkit-scrollbar { width: 12px; background-color: #eff1f5; } .tile-custom-scrollbar::-webkit-scrollbar-track{ border-radius: 3px; background-color: transparent; } .tile-custom-scrollbar::-webkit-scrollbar-thumb{ border-radius:5px; background-color:#515769; border:2px solid #eff1f5 } .tile-content { padding: 20px; height: 500px; }

The effect is achieved:

10. Dynamic tooltips

You can use the CSS function attr() to create dynamic pure CSS tooltips.

 HTML/CSS tooltip 
 
 Hover Here to see the tooltip. 
 
 You can also hover here to see another example. 

.tooltip { position: relative; border-bottom: 1px dotted black; } .tooltip:before { content: attr(data-tooltip); position: absolute; width: 100px; background-color: #062B45; color: #fff; text-align: center; padding: 10px; line-height: 1.2; border-radius: 6px; z-index: 1; opacity: 0; transition: opacity .6s; bottom: 125%; left: 50%; margin-left: -60px; font-size: 0.75em; visibility: hidden; } .tooltip:after { content: ""; position: absolute; bottom: 75%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; opacity: 0; transition: opacity .6s; border-color: #062B45 transparent transparent transparent; visibility: hidden; } .tooltip:hover:before, .tooltip:hover:after { opacity: 1; visibility: visible; }

Achieve the effect:

##11. Circular gradient border

 炫酷渐变边框 

.gradient-border { border: solid 5px transparent; border-radius: 10px; background-image: linear-gradient(white, white), linear-gradient(315deg,#833ab4,#fd1d1d 50%,#fcb045); background-origin: border-box; background-clip: content-box, border-box; } .box { width: 350px; height: 100px; display: flex; align-items: center; justify-content: center; margin: 100px auto; }

Achieve the effect:

12. Grayscale image

You can use the grayscale() filter function to convert the input image to grayscale.

(Learning video sharing:

Web front-end introductory tutorial

)

The above is the detailed content of Share 12 practical CSS tips (come and collect them). For more information, please follow other related articles on the PHP Chinese website!