Shulou(Shulou.com)06/01 Report--

This article is to share with you what are the practical tips on CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Typing effect

Code implementation:

Interesting and practical CSS tips. 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 results:

two。 Set Shadow

When using a transparent image, you can use the drop-shadow () function to create shadows on the image instead of using the box shadow attribute to create rectangular shadows 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: 2mm;} .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);}

Comparison effect:

3. Smooth scrolling

Smooth scrolling can be achieved without the need for JavaScript, with only one line CSS:scroll-behavior: smooth

Scroll to: A B C A B Chtml {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, 0px 8px 1px rgba; bg-red {background: # de5448;}. Bg-blue {background: # 4267b2;}. Bg-green {background: # 4CAF50;}

Achieve results:

4. Custom cursor

We can use custom images or even emoticons 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: 200pxash display: flex; align-items: center; justify-content: center; background-color: # de5448; margin-right: 10pxscape 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 results:

5. Truncate text

One line of text overflow hides:

On the Stork Tower The sun along the mountain bows; The Yellow River seaward flows. Ascend another storey to have a further sight retrospect and prospect. Div {width: 200px; background-color: # fff; padding: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

Achieve results:

You can also use the "- webkit-line-clamp" attribute to truncate text to a specific number of lines. The text will display an ellipsis where it is truncated:

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

Achieve results:

6. Customize the selected style

CSS pseudo element:: selection, which can be used to customize the highlighting style of the document selected by the user.

Default highlight

Custom highlight

.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;}

Achieve results:

7. CSS modal box

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

Open Modal CSS Modal

Hello world

X.wrapper {height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient (to right, # 834d9b, # d04ed6);} .wrapa {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;}

Achieve results:

8. Empty element style

You can use the: empty selector to style elements that have no child elements or text at all:

On the Stork Tower The sun along the mountain bows; The Yellow River seaward flows. Ascend another storey to have a further sight retrospect and prospect. .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;}

Achieve results:

9. Create a custom scroll bar default 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;}

Achieve results:

10. Dynamic tooltip

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

11. Circular gradient frame cool gradient frame. Gradient-border {border: solid 5px transparent; border-radius: 10px; background-image: linear-gradient (white, white), linear-gradient (315 degmense: 833ab4 border-box; 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 results:

twelve。 Grayscale picture

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

Thank you for reading! This is the end of this article on "what are the practical tips of CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.