Web Front-End development: a preliminary discussion on the application details of Sina Weibo CSS3

Source: Internet
Author: User

Browser, as an artifact, to help us Open a myriad of web world window. And she has developed to this day, but also the birth of one after another version of the Bosom God, someone may love her fancy, someone obsessed with her speed ... We, as restructuring engineers, must pay more attention to his behind the technological innovation, that is CSS3 support! Last time, Garfield has shown us the exaggerated CSS3 animation. And this time, we start from the details, see CSS3 Encounter Weibo, will give people what to expect.

Of course, before this, we must first understand the next visit to the weibo.com of the artifacts accounted for:

PS: (data from Sina Weibo, "Product data analysis backstage" January 2012 browser ratio)

The icon can be seen, IE6, and support CSS3 browser, also occupies a considerable share, it means that we can have more choice to give up the compatibility of IE6, in addition, can also support the CSS3 of the high version of the browser to do more consideration.

and specifically in what detail can consider the icing on the cake? This article only to do a discussion of what CSS3 effect can be in the product details, and we will be in this article, as soon as possible in the micro-Bo optimization, the mention of these step-by-step online!

Use pseudo class to promote user experience

For example, the text, when browsing the Web page, often use the mouse to reverse the selection of some text content, used to facilitate reading. At this time, the page text is usually presented with a highlight white text + blue background color display. The following figure:

But the Micro Bo main station has the different skin, deep shallow. When encountered a dark skin background, still show the blue bottom white, the effect is not particularly handsome. At this time, in fact, you can consider using pseudo-class selection for the Web page text highlighting to provide a design, to change the effect of the reverse election display. The mouse selects the text to set the corresponding background color and text color, even transparent. Simple a property reflects the product of the user's concern for the operation, thereby enhancing user experience.

Enhance the visual impact with gradient character color

With the wide use of CSS3, text color gradient effect is more and more favored by designers and front-end engineers. A good gradient allows the text to look textured, as if engraved on paper, giving the user a good visual feel. We can simulate text gradients by using CSS3-supported text transparency and displaying a background gradient. Plus some transition animation effects, we can even simulate a simple horse-lamp effect. The following figure:

Ha ha. But don't be serious about this design. This is just a demonstration, does not represent our UDC taste.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.