Home>Article>Web Front-end> Share 12 practical CSS tips (come and collect them)

Share 12 practical CSS tips (come and collect them)

青灯夜游
青灯夜游 forward
2022-03-03 10:54:13 2298browse

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!

Share 12 practical CSS tips (come and collect them)

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

Share 12 practical CSS tips (come and collect them)

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
Image with box-shadow
drop-shadow
Image with 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:

Share 12 practical CSS tips (come and collect them)

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:

Share 12 practical CSS tips (come and collect them)

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:

Share 12 practical CSS tips (come and collect them)

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:

5-Share 12 practical CSS tips (come and collect them)

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:

Share 12 practical CSS tips (come and collect them)

6-Share 12 practical CSS tips (come and collect them)

##7. CSS modal box

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

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

Share 12 practical CSS tips (come and collect them)

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

Share 12 practical CSS tips (come and collect them)

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:

Share 12 practical CSS tips (come and collect them)

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:

Share 12 practical CSS tips (come and collect them)

10-Share 12 practical CSS tips (come and collect them)##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:

1Share 12 practical CSS tips (come and collect them)12. Grayscale image

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

1Share 12 practical CSS tips (come and collect them)(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!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete