Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about the visual effects that can be achieved by HTML 5 code, which may not be well understood by many people. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

HTML 5 ~ = HTML + CSS + JS APIs, there is already some code in the Html5 engine that combines html with css and jsapi. Many of the effects that previously require stickers or very jumbled code segments can be easily achieved with Html5 development with only a few lines of code, greatly reducing the pressure on traffic. All in all, Html5 is really awesome, so as a mobile wise designer, you have to understand the visual effects that Html5 can easily achieve.

Show fonts that are not available locally

The default fonts that can be supported by various mobile platforms are limited. If you need good visual effects, it is common to turn text into pictures, but for mobile devices, pictures mean a lot of traffic. in today's mobile network era, which is still charged by traffic, it is obviously not a practice to blindly pursue results and use pictures. But with Html5 development, you only need to set the font you want to display in the code, so some individual fonts can be easily displayed without pictures. The effect is shown in the red square area above.

Fillet effect

As shown in the hao123 home page and hao123.tuan home page effect above, various rounded corners play a very important role in improving the popularity of users and beautifying the effect of the page. Nowadays, you can also design the fillet boldly on the mobile wise, because Html5 supports the fillet very well, and the code can control the radius of the fillet as needed and display it.

Translucent effect

In the design, in order to make the combination between layers not stiff, the use of translucent effect, has been one of the commonly used techniques of designers. Html5 is also ideal for translucent effect support, and the code can control the transparency of the layer as needed.

Gradient effect (linear gradient, radial gradient)

Support for linear gradients was implemented before Html5, but radial gradients still require mapping. The picture is satisfied with the visual effect for the mobile traffic or the current situation of the mobile network which is very limited. Traffic fee payment? Users still care, but Html5 has solved this problem. Apart from the linear gradient shown on the left, is the radial gradient in the center area of the right also ideal:)

Text Stroke

In fact, the effect of text stroke can be easily achieved before Html5, but it is not often used, so it is also mentioned here that text stroke can be easily realized under Html5, and you can control the text color, text stroke color, and the width of the text stroke according to your needs, and the width can even be accurate to 0.00px.

The effect of text shadow is horizontal, vertical and virtual.

As shown in the image above, Html5 can not only easily achieve the text stroke effect, but also easily achieve the shadow angle and direction of the text. You can freely control the angle, distance, color and projection size of shadows. By freely combining these factors, it becomes easy to achieve many effects that require picture support.

In the image above, the shadow + virtual effect, which seems to be achieved only through pictures, is actually achieved through Html5.

Text external glow effect

The visual effects that often manipulate the text also include: glowing outside the text. Html5 can also support the text external glow effect, and you can set the color, transparency, extended range, size, and so on.

Reflection

Just talked about a lot of text can achieve visual effects, in fact, for graphics is the same, graphics shadow, virtual, external luminous effects can also be achieved. In addition, graphics can also achieve the reflection effect, as shown above, the reflection effect before Html5 technology requires mapping to achieve, and Html5 can be easily achieved with code.

To sum up: the visual effects that Html5 can easily achieve are amazing! There are too many effects that need to be mapped by mapping software to achieve the effect of mapping in the code, showing special fonts that do not exist locally to achieve visual effects of art words; support for various fillet effects; translucent effects: linear gradient, and breakthrough radial gradient support; modification of various effects of text and graphics, strokes, shadows, illusions, external glow, and graphic reflection effects, etc. All in all, the above visual effects can be realized, so in the future wise web design, designers will no longer have to tie their hands and feet, no longer have to design monotonous interfaces, many effects can be tried, and will not bring too much page volume cost:)

After reading the above, do you have any further understanding of the visual effects that can be achieved by HTML 5 code? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.