With nickname, the official HTML logo was born with gorgeous and gorgeous colors. You can list the official logo page (click here) to watch it.
The above picture is a screenshot, and the screenshot is also a picture. The picture below is its 128 Kawaii pocket version:
The following picture is the 256 vigorous and vibrant teenager version:
The following picture is the standard 256*256 background index transparent masculine teenager version:
HTML5 has released this logo, which is of great significance. I think this marks that HTML5 has developed to a new level, and its development and progress are unstoppable, revealing the ambition and domineeringness of HTML5.
This logo looks a bit like a 360 security guard logo:
Does it imply that it is a defense that resists the invasion of flash or other miscellaneous technologies? Who knows? Anyway, it has nothing to do with the topic of this article, so I hope to answer it myself.
You have to admire some people who always like to try new technologies and make new things. For example, Eric, this time, shortly after the HTML5 logo came out, he vividly portrayed the new HTML logo with a purer CSS than Zhou Dongyu.
Want to see the effect? You can click here: New logo demo for implementing HTML5 with CSS
In terms of implementation, a lot of CSS3 things are used, mainly used to achieve rotation effect. Then, the elements are crazy about using absolute element positioning. Then, little by little, it's done. Because CSS3 is used, this logo is seriously disfigured under IE browser. See the picture below (screened from IE7 browser):
Therefore, you need to move to modern browsers to view the effects. If you want to rank each browser according to the effects, it should be: Chrome ≈ Safari > FireFox > Opera
This is roughly what the content of using CSS3 in this logo effect is:
-webkit-transform: skewX(-5deg);
-moz-transform: skewX(-5deg);
-o-transform: skewX(-5deg);
-ms-transform: skewX(-5deg);
transform: skewX(-5deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
Among them, the -ms- prefix, which I often call cat shit prefix, is targeted at IE9 browsers. After all, foreign browsers are much ahead of us. I have not yet grasped the little hand of IE9!
This article is a simple display. The large amount of CSS code and the absolute positioning of flying snow all over the sky make this effect basically have no prospects for application in actual projects. So, I am too lazy to say more, so I should just leave some time to watch the Japanese drama "Ady's Last Crime Portrait", and love Keiko Kitagawa. So, that's all.
Reference page:http://www.w3.org/html/logo/
CSS3 in HTML5? HTML5 in CSS3!
HTML5 and the New W3C-Endorsed Logo