preface
Any application that can be written in JavaScript will be written in JavaScript. – Atwood’s law
Anything that can be implemented in CSS will be implemented in CSS. — Author’s law
See students’ own use habits specifically. However, with good CSS, you can still improve a lot of development efficiency, at least to replace many JavaScript scenarios, reduce JavaScript code.
In my last article, I mentioned several common scenarios that can be implemented using CSS instead of JavaScript. This time, I will share a few more scenarios that can be implemented using CSS instead of JavaScript. I hope you can use it in your daily development.
Pick color
Color picker is a JavaScript high-frequency use scenario, if you develop one is also very complex, looking for a third party plug-in with a certain cost of learning. The type field of the input tag provides the Color type, which makes it easy to use the Color picker, which can also absorb the Color of the entire computer table.
<input type="color" value="#0000ff">img { height: 100%; width: 100%; object-fit: cover; } input { padding: 0; border: none; position: absolute; width: 100%; height: 100%; mix-blend-mode: hue; // Cursor: pointer; }CSS3 has an interesting new property called mix-blende-mode, which translates to “blend” in Chinese. Mix -blend-mode is used to blend multiple different labels. In this case, adjust the hue of the car to represent the hue mode. Mix-blast-mode there are other modes, so if you’re interested you can check out the mix-Blast-mode documentation.
Full code demo
Shuffling figure
Carousel diagrams are a well-worn feature, most of which are JavaScript solutions. This CSS solution is also a lot of code, which one to use will be weighed according to the actual situation.
Full code demo
The accordion
Full code demo
A magnifying glass
The Vue3 magnifying glass component is written in Vue3. The amount of code is not much, but it is certainly more complex than CSS. It involves handling coordinate values, handling boundary positions, etc., so the magnifying glass for CSS solution is still a good choice.
Full code demo
Effect of typing
If you’re writing an animation in JavaScript you need to use a timer with a truncated string.
<h1>Welcome to GuangZhou</h1>@-webkit-keyframes typing { from { width: 0; } } @-webkit-keyframes blink-caret { 50% { border-color: transparent; } } h1 { font: bold 300% Consolas, Monaco, monospace; border-right: .1em solid black; Width: 16.5 em. width: 21ch; margin: 2em 1em; white-space: nowrap; overflow: hidden; -webkit-animation: typing 7s steps(21, end), blink-caret .5s step-end infinite alternate; }remlayout
In the past, when using REM layout on mobile devices, we had to use JavaScript to set different font sizes for different screen widths.
For example, set the root node to 100px and set the DPR to 2
JavaScript solution
Document.queryselector (' HTML ').style.fontsize = '${window.innerWidth / 7.5}px';CSS scheme
html{
font-size: 100vw / 750
}Truncated text
Truncated text is also a very common front end usage scenario, and I’m sure many of you have already used it. In the past is through the interception of the background, but this method is easy to lose data, is not conducive to SEO, and through CSS truncation is flexible, can be unified in the entire project.
This technology mainly uses the text-overflow property, which is new to CSS3, but is compatible with all major browsers.
A single line of truncated text
.ellipsis {
display: inline-block;
width: 40px;
white-space: nowrap;
text-overflow :ellipsis;
overflow: hidden;
}
Multiple lines of truncated text
.ellipsis {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
The custominputColor of the focus cursor
Sometimes designers have tricky requirements, such as the color of the input cursor is not consistent with the overall style. In this case, we can set the caret-color property to meet this requirement.
<input class="custom" value=" color = red "/>input.custom {
caret-color: red;
}
Viscous navigation
In the past, this function also required using offsetTop and window.scrolly. CSS3 new position:sticky let us very easy to achieve this function, I believe many students also began to use this attribute. An element with sticky positioning will act as a relative positioning element until it reaches a given point on the viewport and then becomes a fixed positioning element. Browsers using the -webkit prefix support up to 92%.
.nav {
position: sticky;
top: 0;
}Buried some statistical
When the scale of a website or App reaches a certain extent, it is necessary to analyze the corresponding operations of users in the App or statistical website, and it is necessary to bury the statistics of user behavior, which goes without saying. In fact, we can also do buried point statistics in the content attribute of CSS.
.link:active::after { color: red; Content: URL (" interface to fill in statistics "); }Of course, this approach uses a simpler event burial point. Complex words or need JavaScript operation, JavaScript buried point statistics users can be disabled through the browser, CSS words can not be disabled.
There are also some interesting ways to use the Content property, such as the loading animation shown below.
<h1 data-text=" <h1 data-text=" > < span style = "box-sizing: border-box; color: RGB (255, 255, 255); </h1>h1 { position: relative; color: rgba(0, 0, 0, .3); font-size: 5em } h1:before { content: attr(data-text); position: absolute; overflow: hidden; max-width: 7em; white-space: nowrap; color: #fff; animation: loading 8s linear; } @keyframes loading { 0% { max-width: 0; }}More interesting spotlight effects
Use the clip-path to mask the ellipse(100px 100px at 0% 50%). The first two arguments are the x-length and y-height of the ellipse. The second two arguments are the x-position and y-position of the ellipse relative to the element itself.
Note: When using this attribute, you need to pay attention to the compatibility of the browser. For example, Safari uses the prefix -webkit- when using the compatibility prefix, you must keep the original CSS (non-prefix) code and cannot delete it.
When setting the background for text, the default is to override the background for the block-level elements in which the text is located. If you want the background to only apply to the text, like color, you can use the background-clip: text mask.
<h1 dot-light="LIZHENWEN">LIZHENWEN</h1>h1 { font-size: 9rem; font-family: Helvetica; letter-spacing: -.3rem; color: #333; position: relative; } h1::after { content: attr(dot-light); position: absolute; top: 0; left: 0; color: transparent; clip-path: ellipse(100px 100px at 0% 50%); animation: SpotLight 5s infinite; background-size: 150%; background-position: center center; -webkit-background-clip: text; background-clip: text; } @keyframes SpotLight { 0% { clip-path: ellipse(100px 100px at 0% 50%); } 50% { clip-path: ellipse(100px 100px at 100% 50%); } 100% { clip-path: ellipse(100px 100px at 0% 50%); }}Full code demo
With the use of pseudo elements ::marker, it is interesting that ::marker can still dynamically change, using this point, can simply make some interesting hover effects.
li { color: #000; transition: .2s all; } li:hover { color: #ff6000; } li::marker {content: '😩'; } li:hover::marker {content: '😁'; }Cool fire effect
When seeing this flame effect, many students thought of using three. js to realize it at the first time, but it is actually realized with CSS. When I see this CSS effect is also amazed, refresh the cognition of CSS, feel to relearn CSS rhythm. Σ (even though del it’s “a
To achieve this flame effect, use the filter: contrast() and filter: blur(). It is a new filter attribute added to CSS3. Those of you who are familiar with Photoshop will understand this property very easily.
Full code demo
The last
Although the new generation of CSS can adapt to many scenarios, but don’t get drunk!! Many of the attributes are still experimental, and compatibility is questionable. Students should use them according to the actual situation. The next generation of CSS will bring more features and ease of development as it continues to evolve.