Share 12 practical CSS tips (come and collect them)

青灯夜游
Release: 2022-03-07 19:39:17
forward
2296 people have browsed it

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 小技巧
Copy after login
.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 } }
Copy after login

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
Copy after login
.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); }
Copy after login

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
Copy after login
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; }
Copy after login

Achieve effect:

4. Custom Cursor

We can use custom images or even emojis as cursors.

Default
Image
Emoji
Copy after login
.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; }
Copy after login

Achieve the effect:

Share 12 practical CSS tips (come and collect them)

5. Truncate text

One line of text overflows and hides:

白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
Copy after login
div { width: 200px; background-color: #fff; padding: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
Copy after login

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; }
Copy after login

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.

默认高亮

自定义高亮

Copy after login
.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; }
Copy after login

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.

 
Copy after login
.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; }
Copy after login

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:

白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
Copy after login
.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; }
Copy after login

The effect is achieved:

Share 12 practical CSS tips (come and collect them)

9. Create a custom scroll bar

默认滚动条
自定义滚动条
Copy after login
.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; }
Copy after login

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.

Copy after login
.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; }
Copy after login

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

炫酷渐变边框
Copy after login
.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; }
Copy after login

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!

Related labels:
css
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!