SegmentFault Technology Weekly -- How do programmers use programming to show art?

The editor of this issue of Technology Weekly will show you how Kangkang programmers use programming to show art~

文章推荐

Handwriting an interesting elevator applet

1. Click on the floor to drive the elevator up or down
2. When the elevator arrives at the corresponding floor, the left and right doors of the elevator open
3. After the door opened, the beautiful woman inside came out
4. Reminder: This beauty is coming out soon, please come to meet me quickly
5. The button will have a click-selected effect

According to the above analysis, we can implement the elevator applet very well. Next, let us enter the coding stage.

PS: The number of floors here is dynamically generated, but it is recommended not to set the value too large, you can limit it in the code.

CSS Custom Shape Grid Layouts You Don't Know

In normal development, we will encounter many requirements for the alignment of element blocks, such as lottery draws in the nine-square grid, preview of the layout in equal parts after uploading multiple pictures, and display of multiple pictures in WeChat Moments. This is a normal square very neat layout.

What if the image is not exactly square, but shaped like a hexagon or a rhombus? How do we do it. In fact, we're going to combine the CSS grid techniques we've already looked at and throw in some CSS clip-path and mask magic to create beautiful image grids for any shape you can imagine!

Advanced slicing skills! Arbitrary color conversion based on a single image

Today, I'm going to introduce an advanced technique based on CSS mask-composite.
By mastering it, we can get various transformations about it through a picture, and even get various color transformations.

How to beautify the Windows scroll bar like macOS?

Considering that the desktop side is now the world of -webkit-, the following customizations take chrome as an example. Two key pseudo-elements are needed to customize the scrollbar: ::-webkit-scrollbar and ::-webkit-scrollbar-thumb

1. ::-webkit-scrollbar scroll container style
2. ::-webkit-scrollbar-thumb slider style

Wonderful! Pure CSS implements jigsaw puzzle

In this article, I will introduce you to a technique that uses several CSS techniques to the extreme, using pure CSS to implement a jigsaw puzzle.
Let's disassemble the core difficulties:

1. How to make an element draggable?
2. How to drag and drop an element from a fixed position to another position?
3. The most difficult thing is that based on (2), drag the element and release it. Only when it is released at a specific position, the element will be fixed to the new position, otherwise, it will return to the original position.

Oh No, the above (2) and (3) don't seem like problems that simple CSS can solve.
So, in the end is how clever collocation, combination, can finally use CSS to achieve such an effect? Let's break down the process step by step.

Improve the web input experience! How does JS automatically pair punctuation?

The principle is actually very simple and can be divided into the following steps

1. Detect the input content, if it is the above punctuation mark, go to the next step
2. According to the input punctuation, automatically complete the corresponding second half
3. Move the cursor between two punctuation marks

Is it very easy to understand? However, the details are far more than these, involving a lot of relatively uncommon native methods, let's take a look at how to achieve it

Interesting exploration of mouse pointer interaction

One thing to note is that when you use the simulated mouse pointer to Hover and Click elements, you will find that these events cannot be triggered.

This is because, under the hidden pointer at this time, we simulate the mouse pointer floating, so all Hover and Click events are triggered on this element.

Of course, this is also very easy to solve. We only need to add pointer-events: none to the element that simulates the pointer, block the default mouse event, and let the event pass through:

 {
    pointer-events: none;
}

achieve focus effect

This is a function that a friend asked me before: he thinks that sometimes his attention will be diverted when he is looking at web pages, and he hopes that there can be a mask to help him concentrate.

Backhand I used box-shadow to write the function.

JavaScript, CSS to achieve the effect of mouse following flowers

This effect is inspired by some websites. When the mouse is moved, a diffuse pattern of bubbles, red hearts or water waves appears around the mouse arrow. This effect has a strong visual appeal to the visitors of the webpage.

We can achieve this effect with plain HTML, JavaScript and CSS

本周活动推荐

Those who have observed carefully may have discovered that a brand new section has been quietly launched on the Homepage of SegmentFault ☕ Extremely Objective .

Different from technical Q&A, discussions on non-specific technical issues in the community can be initiated here, but the "extremely objective point" is not a watering or fishing area. We hope that everyone will focus on topics such as technical direction and programmer career development, and initiate Valuable discussions and output of valuable opinions , I hope this can become a position to accompany everyone to grow together. 🤗️

🌟 🌟 🌟 Here comes the point! ! ! "Miss Sifu" has launched a new challenge for everyone! By the end of this month, complete the " Extremely Objective Point " check-in event to get rare and limited peripherals~

Come check in to receive rare and limited peripherals, one-click delivery: https://segmentfault.com/a/1190000042331835

活动奖品概览：

---

# SegmentFault Technology Weekly#

"Technology Weekly" is a series of technical content specially launched by the community, with a weekly theme.

Update every Tuesday, welcome to " follow ". You can also leave a message on the topic you are interested in in the comments, and recommend excellent articles related to the topic.

If you have any questions, you can add Ms. WeChat~