Multiple background effects and border effects using CSS2.1

Source: Internet
Author: User

Web page Production WEBJX article introduction: use CSS2.1 's multiple background effects and border effects.

Use the CSS2.1 implementation on a single HTML element to have 3 background pictures and 2-piece content graph effects, or multiple border effects. This incremental approach applies to all browsers that support CSS2.1 pseudo elements and their positioning properties. There is no need for CSS3 support.

Demo: Using multiple backgrounds for CSS2.1

Demo: Using CSS2.1 's multilateral box

Supported browsers: Firefox 3.5+, Safari 4+, chrome4+, opera10+, ie8+

How did it happen?

Essentially, the artifacts we create (: Before and: After) are the same as the nested relationships we are dealing with HTML elements. But they have a unique advantage over nested HTML elements-not semantically.

When using multiple backgrounds or multiple borders, we need to secure the content of the pseudo element layer with absolute positioning behind the content of the HTML element.

Not true content is positioned by pseudo elements. This means that they can stretch freely within the range of "parent" elements without affecting their content. This can be any combination of absolute positioning of the top, right, bottom, left, width and height values, the key is that their combined performance is flexible.

What effect can be achieved?

Just rely on an HTML element and related pictures to create a background-like color, multiple backgrounds, background picture clips, picture flips, expandable box models using picture borders, floating fake columns (small notes: three-column high effects that are mentioned later), pictures outside the box model, and multiple borders displayed outside, and other popular effects. You may need 2 additional content pictures in the generated content.

The use of CSS2.1 background and the CSS2.1 of the Multilateral Box demo page will show how to use the CSS2.1 pseudo object technology to achieve these popular effects.

Most of the structures contain child elements. Therefore, often, you will have the possibility to show more effects through the pseudo elements of the first child element of the parent element (the last child element is set). In addition, you can also use: hover to create some complex interaction effects on styles.

[1] [2] [3] [4] Next page



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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.