Farewell image-compatibility with characters for rounded corner and tip effect Beta

I. Preface

Baidu encyclopedia explains the characters in this way-the characters refer to the letters, numbers, words, and symbols used in the computer, including: 1, 2, 3, A, B, C ,~! · # ￥ % ...... -* () -- + And so on.

I used a software called "Mars input method", which contains many characters, single characters, and character expressions. It is cute, creative, and the crystallization of grassroots wisdom. Generally, the engineers we develop are scholars or talented people. Some people have a taste and do not catch a cold in this kind of non-mainstream things. Perhaps when I saw the characters in the text of Mars, I had nothing to worry about. I thought: This thing is running on the Mars orbit, except for non-Mars hitting the Earth. Otherwise, I would not be able to build a side with me.

However, in fact, the Mars character is not only a non-mainstream patent, but also a need for our front-end page developers to master. It is not to say that adding a few Mars characters on the page attracts several non-mainstream characters, it uses the character-based feature and its unique shape features to optimize the page and reduce development costs.

Take a look at the figure I have taken from the Google Gmail page below (this is the second time I 've been in the same location ):

In the figure, the lower triangle in the red circle is the character used, not a mainstream character. In fact, Google's character is only a small application and its real potential is not shown, in this article, we will explore how to use characters to replace images to achieve the sharp angle effect that only images can achieve, or most of them use the rounded corner effects of images. I have not studied the character flying in depth, so some conclusions or methods are not optimal, and there may be more perfect methods in the future. Therefore, we will add beta words to the questions in this article and test the table. Some methods mentioned in this article may not be practical in actual projects. The key is to help colleagues broaden their thinking and show their potential in Web development.
Note: The "character" in this article focuses on characters that contain special shapes and cannot be directly entered on the keyboard. Although ABC is a character, the meaning of the "character" mentioned in this Article does not include such common characters.

2. understand some character features

1. view the truth
It is similar to Chinese characters, English letters, and other things on the page. First of all, the character pattern is composed of pixels of the same color on the display. It does not have to be in the trouble of sawtooth. If you use Photoshop to create a small triangle image, maybe there will be hateful white borders, and the character will never have this problem. Secondly, the character is essentially a text, restricted by the font-size attribute of CSS, the color attribute, and other attributes that work on the text.

2. Advantages of replacing images with characters
① You don't need to plot the image. How much effort is saved! For page engineers, it greatly reduces the workload. It is time and effort-consuming to deal with smaller pictures than 10 pixels.
② There is no need to worry about the problem of complex edges. The characters are all pixels of solid color, and it is difficult to appear complex edges.
③ Easy to control! To increase the character pattern, Set Font-size to a greater value. To change the color, use color. Therefore, the characters are very good at control. If it's an image, let him change his color. You're not Liu Qian, You're not Harry bit, so you can't.
④ The page size becomes smaller. Computer science should know that one English character, one Chinese character, two bytes. Although I don't know whether the characters of different colors are patriotic or Mei waiyi, in any case, a maximum of two bytes (unit: B). If it is an image, although I have not verified it, however, in terms of experience, it should be larger than the space occupied by characters.
⑤ Theoretically, there are fewer Page Link requests. In theory, why is it because, in fact, all images are integrated into one image (CSS sprite), so even if a small image is missing, the number of images requested on the entire page remains unchanged. But if this small image is independent, will the image request be missing soon? The server is happy!

3. character defects
① Performance in different browsers.
Now let's assume that IE represents China, and Firefox represents Korea. A Chinese female (♀) When I went to South Korea, I got another look. The term is: some characters are inconsistent with the table in different browsers. This type of inconsistency is divided into two categories. One is because of plastic surgery and face change. This is not saved, and it is more difficult to get back to the past than to call Lin Zhiling. The other is beauty, after using Chanel or Estee Lauder's cosmetics for a month of maintenance, Sister Furong turned into an ugly duckling, which was saved for two months.ProgramPersonnel, make sure to go back to the past. Being a programmer is just a joke metaphor. In reality, it is achieved by setting the font-family to achieve consistent performance, which will be discussed later in this article.
② It is difficult to control the occupation and positioning.
The character is essentially different from the image, and there is no clear high width. If you do not know enough about the features of the text on the page, it is not difficult to achieve accurate and compatible positioning. There is also the character encoding method for the page and the font sensitivity. For example, some characters are well displayed in gb3212 Chinese encoding, but in UTF-8 encoding, they are a square frame-Garbled text; in, they are good, and in other fonts, they are another kind of characters.
③ Gradient effect cannot be achieved.

Iii. Examples of the relationship between characters and Fonts

The first part of the demo page shows the performance of some characters related to the subject in common fonts. The following figure shows the differences in representative characters. The differences are caused by the differences in fonts and browsers. Fortunately, we try different fonts to achieve compatibility.

Character Differences in different fonts and in different browsers

4. Use characters to achieve rounded rectangle and sharp corner Effects

To use characters to achieve rounded corners or sharp corners, you can use the following characters:
The sharp angle between the left and right is "<>"; the sharp angle between the top and the left is "yellow"; the sharp angle of the object is "_ yellow ▲ yellow"; the solid circle is"●"; Hollow circle"○"; 1/4 hollow circle" ◆ ╯ ╭ ╮ "and positive edges" ◆ ".

1. Four 1/4 circles are achieved using the entity circle
To achieve four 1/4 circles, you must use characters to achieve rounded corners. This is the effect achieved in IE6, Which is consistent in other browsers:

1/4 of IE6 results

Principle Description: Two-layer labels are used, and the outer layer is limited to 1/4 large and small, and the hidden attributes overflow. The inner layer is located through margin, so that the outer layer shows the 1/4 area to be displayed.

2. Use four 1/4 circles to achieve the rounded Corner Effect
The following figure shows the effect of IE7 (the performance of other browsers is the same, as shown in the figure below ):

Principles: Fill the four 1/4 circles above with the four corners of the rectangle. Pay attention to the parity bug in IE6! For the code, see the source files provided at the end of this Article or view the demo page.

3. achieve the effect of rounded corners and sharp corners
The implementation is actually very simple. Just add the up-pointed character on the basis of the implementation just now, and use absolute positioning to the appropriate position. The result is as shown in the following figure:

4. Practical Application-achieve the rectangular Effect of Sina Weibo's dual-border rounded corners with sharp corners

The following figure shows the result of the Sina Weibo post comment box with a pointed double border rounded rectangle:

If you have used Sina Weibo, you should be familiar with the above figure. I think as long as the page is made, to achieve the above effect, 100% will use the image, obviously it is for the image. However, in fact, you can achieve almost the same effect without using images, and the method is to use what we have discussed over and over again --Character!Here I will use characters and CSS to achieve almost the same effect, without a little bit of images, pure CSS, and no hack, compatible with various browsers. Let's take a look at the final effect I achieved (captured from the Chrome browser, consistent with other browsers ):

To avoid space redundancyCodeSee the source files provided at the end of this article.

I personally evaluate the effect of the Sina bib dialog box implemented by the characters:
① As far as the effect is concerned, the rounded corner will make people feel a little rough, which is inevitable. The rounded corner formed by solid color pixels is like this. Although the rounded corner made by the image looks smooth, in fact, there are complex edges, but the white ones cannot be seen in the same way as the background color.
② Technical tips: if there is always a deviation in different browsers when you locate the character, you can try to set the height or width of the character, and then overflow and hide it, it makes positioning more accurate and compatible, instead of using hack to solve this problem.
③ The angle of the triangle is 90 degrees, which is a right angle. It is different from the 60 degrees angle of Part 3. Therefore, use the positive diamond "◆" to replace the original positive triangle character "▲ ".
④ All things have advantages and disadvantages. Here we use characters to achieve the effect. Although there are fewer images, less link requests, and smaller sizes. However, the consumption of HTML code and CSS code will increase. For example, here we use characters to implement the dialog box Effect of Sina Weibo. Although there are only two-layer labels, there are more than 10 tags in total, and there are many lines in the CSS part. In fact, more HTML code is not the key. The key is that the positioning is very fine and it is difficult for beginners to get started. It is impractical to use it extensively. If I make a choice, I think character implementation and image implementation can be considered as a flat in all aspects. However, in actual projects, I will integrate the two or use other technologies to achieve the same effect. For example, I will use border + margin to achieve the rounded corner, while the pointed corner uses character implementation. Therefore, the character must have a bright future.

PS: Friendly reminder. We do not recommend using CSS and HTML of Sina Weibo as learning materials. Its webpage engineers are far behind some small and medium-sized websites, and there are too many improvements and optimizations!

You can click here: Demo instance page | Source File Download

V. Conclusion
First of all, express my point of view-character is really very practical. It is a powerful tool for high-quality and highly optimized pages. Of course, the use of characters must be realistic. Do not use characters to implement some effects. If you do not want to write a tutorial for demonstration, we recommend that you consider the use of characters. Any method has its advantages and limitations.
Secondly, the application of characters is obviously not only the rounded corners and sharp corners mentioned in this article. The Mars character is actually a profound and profound learning. It is a strange character and has a variety of appearances. You need to have an open mind, this is the key. You must know that characters are both text and graphics. For a long time, you will find your own unique character application.
Finally, I would like to express my other point of view that thinking is more practical than a technology. This is like teaching people to fish instead of teaching people to fish. I want to see this articleArticleIs a kind of consciousness, character is a page element that is more optimized than the image, when you do the page, you can try to use the character as one of the alternative methods. In that case, I think it is worthwhile to write this article.

(This article is complete)

Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 332