Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

Hi, I’m the watermelon guy.

Today I opened Stack Overflow as usual.

Stack Overflow is a q&A community for programmers who run into problems during development, look for answers, and then copy and paste them to get their work done.

This time I opened it and went blind.

This is what douyin filter, cool world in front of my tears (eyes hurt).

Then I noticed that there were other styles at the bottom of the page: Facebook style, Terminal style, Windows 3.1 style, Top Secret style, Mario style. You can try it out for yourself. It’s fun.

But I still think the style of Douyin is the coolest, because it’s really stylized to the extreme, I don’t know, it’s kind of, yeah, fresh and ethereal.

Your inability to read properly proves it.

Tiktok style is actually a special filter effect called 3D glasses: the images are projected in red and cyan in different directions to create a screen effect similar to that of a 3D movie, which requires wearing 3D glasses to see the stereo effect.

The realization of 3D glasses filter

I opened the browser console and found that it used the following CSS styles for text.

body.theme-custom.theme-3d h1.body.theme-custom.theme-3d h2.body.theme-custom.theme-3d h3.body.theme-custom.theme-3d h4.body.theme-custom.theme-3d h5.body.theme-custom.theme-3d h6.body.theme-custom.theme-3d p.body.theme-custom.theme-3d a.body.theme-custom.theme-3d li.body.theme-custom.theme-3d span.body.theme-custom.theme-3d label.body.theme-custom.theme-3d button.body.theme-custom.theme-3d div.body.theme-custom.theme-3d input.body.theme-custom.theme-3d select, body.theme-custom.theme-3d textarea.body.theme-custom.theme-3d ::before.body.theme-custom.theme-3d ::after {
    text-overflow: clip;
    letter-spacing: 3px;
    text-shadow: -3px 0 1px cyan, 3px 0 1px red;
}
Copy the code

Text-shadow: -3px 0 1px cyan, 3px 0 1px red; .

-3px 0 1px Cyan apply a cyan shadow with a blur radius of 3px 3px to the left. 3px 0 1px red is red to the right, resulting in a red and blue shadow on the text.

Then use letter-spacing: 3px; The spacing, originally 0, is increased so that the shadows do not overlap and cause visual clutter.

Finally, text-overflow: clip; Truncating the text at the limit of the content area feels useless.

We can use text-shadow for text, but it has no effect on images. Let’s go back to the console and see what Stack Overflow does with images.

body.theme-custom.theme-3d img.s-avatar--image.body.theme-custom.theme-3d .gravatar-wrapper-24.body.theme-custom.theme-3d img {
    filter: grayscale(80%) brightness(1.75) drop-shadow(4px 0 0 red) drop-shadow(-4px 0 0 cyan) ! important;
    opacity:.75;
}
Copy the code

The Fiter attribute is used here, and the filters applied in sequence are as follows:

  • grayscale(80%): Set the gray value to 80%, which is closer to the gray effect of black and white.
  • Brightness (1.75): Increase image brightness.
  • drop-shadow(4px 0 0 red): Add the red projection to the right of the picture. The projection can only be on the edges of the image, so the image should be a PNG image with edges.
  • drop-shadow(-4px 0 0 cyan): Same as above, cyan this time.

Opacity is then reduced using opacity:.75, making it whiter to blend better with other elements.

You can see the head square JPG, can not do a good red and blue shadow filter effect.

PNG with edges works better.

Some SVG and image ICONS use similar filters as images.

body.theme-custom.theme-3d svg, body.theme-custom.theme-3d .icon-bg.body.theme-custom.theme-3d .wmd-button.body.theme-custom.theme-3d input[type=radio].body.theme-custom.theme-3d input[type=checkbox] {
    filter: grayscale(80%) saturate(.1) drop-shadow(-4px 0 0 cyan) drop-shadow(4px 0 0 red);
}
Copy the code

Apply it to your own website

I tried to apply these styles to my personal blog site to see how they worked.

All right, it’s pretty grim. Forget it.

The last

In fact, it is not as difficult as imagined to achieve simple 3D glasses effect, as long as we use text-shadow and filter to add red and cyan projection to our elements, there is a big difference.

I lost my eye writing this article, so give me a thumbs up.

This article was first published on my personal public account: “Front-end watermelon brother”