This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

? There’s an Easter egg at the end. Don’t you want to check it out?

Above “column – efficiency tools” series, from the development tools, version control tool, interface debugging tools to develop specifications, blog to build tools, etc., working tools, used in the study are introduced respectively, and a good habit, reduce redundant code, and improve the quality of the code, reduce bugs, improve the development efficiency.

Record the [measured use] self-use efficiency tool to improve the happiness of daily code words, continuously update and record

Only when reference, according to the need to eat, shortcomings, welcome big man not hesitate to give advice, complement perfect, welcome to share

  • He that would do a good job must sharpen his tools. Practice (lazy) promote the development of science and technology -_-!
  • This article will share CSS-fonts: CSS implementation 24 English letters, further deepen the impression of learning CSS

Fonts from CSS SANS/fonts, do not use for other purposes, only for learning

In pure CSS, the effect of uppercase letters is as follows

Magic CSS, universal CSS, here are two A & G, others, see CSS SANS/Fonts website

1. The letter A

The source code

.A {
  position: relative;
  left: 30px;
  width: 60px;
  height: 91px;
  border-bottom: solid 14px# 000000;
}
.A:before {
  transform: skew(-19deg.0);
  position: absolute;
  content: ' ';
  top: 12.5 px.;
  left: 0;
  width: 16px;
  height: 125px;
  background-color: # 000000;
}
.A:after {
  transform: skew(19deg.0);
  position: absolute;
  content: ' ';
  top: 12.5 px.;
  left: 45px;
  width: 16px;
  height: 125px;
  background-color: # 000000;
}
Copy the code

2. The letter B

The source of B

.B {
  position: relative;
  top: 12.5 px.;
  left: 10px;
  width: 60px;
  height: 125px;
  border-left: solid 16px# 000000;
}
.B:before {
  position: absolute;
  content: ' ';
  width: 52px;
  height: 39px;
  border-width: 15px15px10px0;
  border-color: # 000000;
  border-style: solid;
  border-radius: 0 240%180%0 /0 180%180%0;
}
.B:after {
  position: absolute;
  content: ' ';
  bottom: 0;
  width: 58px;
  height: 43px;
  border-width: 10px15px15px0;
  border-color: # 000000;
  border-style: solid;
  border-radius: 0 180%220%0 /0 180%180%0;
}
Copy the code

3. The letter G

G source code

.G {
  position: relative;
  top: 12.5 px.;
  left: 10px;
  width: 84px;
  height: 95px;
  border-width: 15px12px15px16px;
  border-color: # 000000;
  border-style: solid;
  border-radius: 50%;
}
.G:before {
  transform: rotate(45deg);
  position: absolute;
  content: ' ';
  top: 2px;
  left: 48px;
  background-color: #ffffff;
  width: 90px;
  height: 90px;
}
.G:after {
  position: absolute;
  content: ' ';
  bottom: 0.5 px.;
  right: 7px;
  width: 28px;
  height: 36px;
  border-width: 13px14px0 0;
  border-color: # 000000;
  border-style: solid;
}
Copy the code

I don’t have to list all the other letters. Seewebsite

Here are some of the custom instructions for reference only.

Optimize the beautiful and comfortable development environment,

[Efficiency tool] [Interface debugging tool -Insomnia],

Next generation interface emulation tool – Mock Service Worker

Vue custom instruction – water ripple effect & Watermark effect (3)

【Utils】 JavaScript utility functions (1)… Did you get it?

Welcome to comment out your personal tools, to share your useful [efficiency tools] =, =

Today’s announcement is not available:

At Nuggets, help you develop good habits, continue to learn, the pursuit of perfection, pragmatic dare to! Come on

Continue to update the technical article and share some accumulated codes: utils/components/styles etc

Stay tuned for the next article! hahah~

At the end of the article eggs

Little entertainment, you don’t smile:

True incense warning:

Don’t perform this only one line of code. Sh: () {: | : &} xx

Disclaimer: we are not responsible for any problems, bugs, etc