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

This article will explain in detail how to use CSS 3 to take your design level to the next level. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Use browser-specific properties

In order to use most of the CSS3 features, we had to use manufacturer-specific extensions with the original properties. The reason is that until now, most browsers only support some CSS3 attributes. And unfortunately, some attributes may not even be recommended by the W3C, so by specifying browser-specific properties, it is important to distinguish them from standard attributes (and then override them with standards-compliant styles when they are redundant).

Of course, the disadvantage of this approach is that it will result in a cluttered stylesheet and an inconsistent performance of the site between browsers. After all, we don't want to regain the need for a private browser, hack, in our stylesheet. InternetExplorer's infamous marquee, blink and other tags were used in a large number of stylesheets and became a legend in the 1990s; they still make many existing websites (in other browsers) inconsistent or even difficult to read. And we don't want to put ourselves in the same position now, do we?

However, websites do not need to look strictly consistent in all browsers. Sometimes it is possible to use private properties in a browser to achieve a specific effect.

The most common private properties are for Webkit core browsers (for example, Safari), which start with-webkit-, and Gecko core browsers (for example, Firefox) start with-moz-, and Konqueror (- khtml-), Opera (- o -), and Internet Explorer (- ms-) all have their own property extensions (currently only IE8 supports the-ms- prefix).

As professional designers, we have to note that using these private properties will make our stylesheet fail validation. So it is rare to put them in the final version of the style at present. But in some cases, such as experimentation or learning, we can at least consider writing them into a stylesheet along with the standard CSS attribute.

1. Selector

CSS selectors are incredibly powerful tools: they allow us to specify specific HTML elements in tags without having to use extra class, ID, or JavaScripts. And most of them are not new to CSS3, but are not as widely used as they should be. Advanced selectors are very useful if you are trying to achieve a clean, lightweight tag and a better separation of structure and performance. They reduce the number of class and ID in tags and make it easier for designers to maintain stylesheets.

Attribute selector

Three new property selectors are added to CSS3:

◆ de > [att^ = "value"] de >

Match elements that contain attributes that start with a specific value

◆ de > [att$= "value"] de >

Matches elements that contain attributes that end with a specific value

◆ de > [att*= "value"] de >

Match elements that contain attributes with specific values

The element of the attribute of the value

TweetCC uses a property selector to specify links that have a title attribute and end with the character "tweetCC":

A [title$= "tweetCC"] {position: absolute; top: 0; right: 0; display: block; width: 140px; height: 140px; text-indent:-9999px;}

Browser support: only IE6 does not support CSS's property selector. IE7 and browsers with IE8, Opera, Webkit core and Gecko core all support it. So it's safer to use property selectors in your style.

Hyphen

The only new hyphen introduced in CSS3 is the generic sibling selector (sibling). It targets all sibling elements of an element that have the same parent node. For example, to add a gray border to a sibling picture of a particular div (the div and the picture should have the same parent node), it is sufficient to define the following style in the stylesheet:

Div~img {border: 1px solid # ccc;}

Browser support: all major browsers support this universal sibling selector except our IE6!

Pseudo class

Perhaps the most added to CSS3 are the new pseudo-classes, and here are some of the most interesting and useful:

◆: nth-child (n)

Lets you specify an element based on the list position of the element's child elements in the parent node. You can use numbers, numeric expressions, or odd and even keywords (for zebra style lists). So if you want to match a grouping of three elements after the fourth element, you can simply use:

◆: nth-child (3n+4)

{background-color: # ccc;} / * matches 4, 7, 10, 13, 16, 19. Elements * /

◆: nth-last-child (n)

The idea is the same as the previous selector, but match the elements (in reverse order) from behind. For example, to specify two paragraphs in a div, we can use the following selector:

◆ div p:nth-last-child (- nasty 2): last-child

Matches a child element under a parent node, which is equivalent to: nth-last-child (1)

◆: checked

Match selected elements, such as check boxes

◆: empty

Match empty elements (no child elements)

◆: not (s)

Matches all elements that do not match the specified declaration (s). For example, if you want all paragraphs that do not use the "lead" class to appear in black, you can write:

◆ de > p:not ([class*= "lead"]) {color: black;} de >

Andrea Gandino uses on his website: last-child specifies a paragraph of each post for the selector and sets its outer spacing (margin) to 0:

# primary .text p:last-child {margin: 0;}

Browser support: Webkit core and Opera browsers support all new CSS3 pseudo-classes, Firefox 2 and 3 (Gecko core) only support: not (s),: last-child,: O nly-child,: root,: empty,:target,: checked,: enabled and: disabled, but Firefox 3.5 will support CSS3 selectors more widely. The Trident core browser (Internet Explorer) does not actually support these pseudo selectors.

Pseudo element

The only pseudo element introduced in CSS3 is:: selection. It allows you to specify elements that are highlighted (selected) by the user. Browser support: currently no Internet Explorer or Firefox browser supports:: selection pseudo elements. Safari, Opera and Chrome are all supported.

2. RGBA and transparency

RGBA allows you to set not only the color, but also the transparency of the element. Some browsers don't support it yet, so * set the non-transparent color attribute supported by other browsers in front of RGBa. Tim Van Damme uses RGBA for the hover effect of the link, and on this site, Tim Van Damme uses RGBa; for the mouse over effect, for example, on the network link on his home page:

# networks li a:hover, # networks li a:focus {background: rgba (164,173,183, .15);}

When setting a RGBA color, we must set the values of red, blue, and green in turn, which can be 0-255 or a percentage. The transparency value should be between 0.0 and 1.0, for example, 0.5 represents 50% transparency.

The difference between RGBA and opacity is that the former applies only to specified elements, while the latter affects our specified elements and their children. Here's an example of how we can add 80% transparency to a div:

Div {opacity: 0.8;}

Browser support: RGBA is supported by Webkit kernel browsers. All versions of IE are not supported. Firefox2 does not support it either, but both Firefox 3 and Opera 9.5 support it. Opacity is supported by browsers in Opera, Webkit core, and Gecko core. All versions of IE are also not supported. IE only supports its own damn filter (filter).

3. Multi-column layout

This is a new CSS3 selector that allows you to implement a multi-column layout without using multiple div tags. The browser interprets this property and generates multiple columns, allowing the text to implement a multi-column structure that mimics a newspaper. TweetCC uses the CSS3 multi-column selector on its home page, and tweetCC displays the introduction text as four columns on its home page. These four columns are not floating div;. Instead, designers use the following CSS3 multi-column layout:

.index # content div {- webkit-column-count: 4;-webkit-column-gap: 20px;-moz-column-count: 4;-moz-column-gap: 20px;}

We can define three things through this selector: the number of columns (column-coun), the column width (column-width, not used in the example), and the white space / spacing between columns (column-gap). If column-count is not set, the browser will include as many columns as possible in the allowed width.

To add a numeric separation in each column time, we can use the column-rule property, which is similar to the border property:

Div {column-rule: 1px solid # 00000;}

The above property, the browser will not see any effect, because it does not have columns, if with the above example on it. Related attributes: column-break-after, column-break-before, column-span, column-fill.

Browser support: multi-column layouts are currently supported by Safari 3 colors and Firefox 1.5 +.

4. Multi-background map

CSS3 allows you to add multiple layers of background images to an element using multiple attributes such as background-image, background-repeat, background-size,background-position,background-originandbackground-clip, etc.

The easiest way to add multiple backgrounds to an element is to use shorthand code, where you can specify all the above attributes into a declaration, but the most common ones are image, position, and repeat:

Div {background: url (example.jpg) top left no-repeat, url (example2.jpg) bottom left no-repeat, url (example3.jpg) center center repeat-y;}

* the picture will be the one "closest" to the user. A more complex version of this property could look like this:

Div {background: url (example.jpg) top left (100% 2em) no-repeat, url (example2.jpg) bottom left (100% 2em) no-repeat, url (example3.jpg) center center (10em 10em) repeat-y;}

In this case, (100% 2em) is the value of background-size; * background images will appear in the upper left corner and will be stretched to 100% width of the div and height of the 2em.

Because only a few browsers support it, and because not displaying the background on the site harms the visual effect of the site, this is not a widely used attribute. However, it is clear that it can greatly improve the designer's workflow and significantly reduce the number of tags-as opposed to achieving the same effect in other ways.

Browser support: currently, multi-background images are only valid in Safari/chrome and Konqueror

5. Word Wrap

The word-wrap property is used to prevent overflows of too long strings. You can use two property values, normal and break-word. The normal value (default) only truncates text, such as hyphens, at allowed breakpoints. If break-word is used, the text can be truncated wherever needed to match the allocated space and prevent overflow.

WordPress background uses word-wrap in the data table. In the control panel of WordPress, the word-wrap attribute is used for elements in the table; for example, in the list of logs and pages:

.widefat * {word-wrap: break-word;}

Browser support: word-wrap is supported by Internet Explorer and Safari/chrome. Firefox will support it in version 3.5.

6. Text shadow

Although it already exists in CSS2, text-shadow is a CSS attribute that is not widely used. But it will be widely used in CSS3. This property gives the designer a new cross-browser tool to add a dimension to the design to make the text stand out.

However, you need to make sure that the text in your design is readable in case the user's browser does not support CSS3 advanced properties. Give enough contrast to the text and background colors in case the text-shadow property is not rendered or understood correctly by the browser.

Beakapp uses the text-shadow attribute: content area in its website.

BeakApp.com uses the text-shadow attribute for the content area, adding depth and dimension to the text and making it stand out-- instead of using some kind of image replacement technique. This attribute is currently only available in Safari and Chrome. The main menu of the site uses the following CSS:

.signup _ area p {text-shadow: rgba (0mem0re0mem.8) 0 1px 0;}

Here we use the shadow color (using RGBA, described earlier), followed by the right (x coordinate) and bottom (y coordinate) offset, and * * is the blur radius. If you want to use multiple shadows on a text, you can separate them with commas. For example:

P {text-shadow: red 4px 4px 2px, yellow-4px-4px 2px, green-4px 4px 2px;}

Browser support: Webkit core browsers and Opera 9.5 support text-shadow. Internet Explorer does not support it, and Firefox will support it in the upcoming 3.5 release.

7. @ font-face attribute

Although it is the most anticipated CSS3 feature (even it has been introduced in CSS2), @ font-face is still not as widely used on the site as other CSS3 attributes. This is mainly due to font licensing and copyright issues: embedded fonts are easy to download from the website, which is a major concern for font manufacturers.

In spite of this, it seems that the improvement of my appearance has already begun to be solved. TypeKit promises to develop a plan to make it easier for designers and font manufacturers to unify licensing issues, which will significantly enrich typesetting in website design and make the @ font-face attribute available in practice.

The Mozilla Lab JetPack website uses font-face rules to use DroidSans fonts. One of the few websites that use this attribute is the newly launched JetPack MozillaLabs.

@ font-face {font-family: 'DroidSans'; src: url ('.. / fonts/DroidSans.ttf') format ('truetype');}

To use embedded fonts in your site, you must live each style independently (for example, normal, bold and italic). Be sure to use only fonts that are authorized to use the site and give some praise to the font designer if necessary. After defining the @ font-face rule, you can reference the font with the normal font-family property:

P {font-family: "DroidSans";}

If a browser does not support @ font-face, it uses the next font specified in the font-family (CSS font library) property. For supported browsers, if the @ font-face font is a luxury (only a few elements are used), this is possible for some sites; but if the font plays a major role in the design or is part of the company's visual features, you may want to use other solutions, such as sIFR or Cuf ó n. Keep in mind, however, that these tools are more suitable for titles or shorter text, and that copying and pasting such content is difficult and unuser-friendly.

Wouldn't it be nice to use this kind of font on a website? Dave Shea used Cuf ó n and Museo Sans to do the experiment. It's beautiful! Browser support: @ font-face is supported by Safari 3.1 + and chrome. Internet Explorer supports EOT fonts. It will be supported by Opera 10 and Firefox 3.5.

8. Fillet (border radius)

Border-radius can fillet HTML elements without the need for background images. Now, it's probably the most frequently used CSS3 attribute, simply because rounded corners are better and don't conflict with design and usability.

Instead of adding Javascript or more HTML tags, you just need to add some CSS attributes and think on the bright side. This solution is clear and effective, and frees you from spending hours looking for clever browser solutions and Javascript-based fillets. Sam Brown's blog uses border-radius in headings, categories, and links.

Sam Brown makes extensive use of the border-radius attribute in his blog title, category, link, and div. Using pictures to achieve this effect will be time-consuming, which is one of the reasons why using the CSS3 property in a project is an important step to improve development efficiency

To fillet category links, Sam uses the following CSS snippet:

H3 span {color: # 1a1a1a; padding: .5em;-webkit-border-radius: 6px;-moz-border-radius: 6px;}

We can go a step further by adding the original CSS3 property and the Konqueror property extension, as follows:

H3 span {color: # 1a1a1a; padding: .5em;-webkit-border-radius: 6px;-moz-border-radius: 6px;-khtml-border-radius: 6px; border-radius: 6px;}

If we want to apply this attribute to a particular corner in our element, we can specify each corner individually:

Div {- moz-border-radius-topright: 6px;-moz-border-radius-topleft: 6px;-moz-border-radius-bottomright: 6px;-moz-border-radius-bottomleft: 6px;-webkit-border-top-right-radius: 6px;-webkit-border-top-left-radius: 6px;-webkit-border-bottom-right-radius: 6px;-webkit-border-bottom-left-radius: 6px Border-top-right-radius: 6px; border-top-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;}

Browser support: border-radius is only supported by all versions of IE browsers and Opera, and is supported by Webkit and Gecko core browsers.

9. Border picture

The border-image attribute allows you to set an image on the border of an element, freeing you from the usual solid, dotted, and other border styles. This attribute gives the designer a better tool to easily define the border style of the design element, which is better than the background-image attribute (for advanced design) or the boring default border style. We can also clearly define how a border can be scaled or tiled.

The SpoonGraphics blog uses the border-image attribute for its picture frame. In SpoonGraphis blog, border-image is used for picture frames, as shown below:

# content .post img {border: 6px solid # f2e6d1;-webkit-border-image: url (main-border.png) 6 repeat;-moz-border-image: url (main-border.png) 6 repeat; border-image: url (main-border.png) 6 repeat;}

To define border-image, we must specify the address of the image, that part of the image will be cut and used on each side of the element, and whether the picture will be scaled or tiled. To make a div that uses the following image as a border, we should use the following code (we will add Opera and Konqueror support for this example):

Div {border-width: 18px 25px 25px 18px;-webkit-border-image: url (example.png) 18 25 25 18 stretch stretch;-moz-border-image: url (example.png) 18 25 25 18 stretch stretch;-o-border-image: url (example.png) 18 25 25 18 stretch stretch;-khtml-border-image: url (example.png) 18 25 25 18 stretch stretch; border-image: url (example.png) 18 25 25 18 stretch stretch;}

The * value of this property can be stretch (the default), round (only an image with an integer multiple of tiles is populated where allowed), or repeat. In our example, the top, bottom, left and right border images are stretched. If we only want the top and bottom borders to be stretched, we can use the following CSS:

Div {(...) Border-image: url (example.png) 18 25 25 18 stretch repeat;}

We can specify each corner individually if we want to use a different picture for each corner:

Div {border-top-image: url (example.png) 55 stretch; border-right-image: url (example.png) 55 stretch; border-bottom-image: url (example.png) 55 stretch; border-left-image: url (example.png) 55 stretch; border-top-left-image: url (example.png) 55 stretch; border-top-right-image: url (example.png) 55 stretch Border-bottom-left-image: url (example.png) 5 5 stretch; border-bottom-right-image: url (example.png) 5 5 stretch;}

If the browser does not support border-image attributes, it will ignore them and apply only other defined border properties, such as border-width and border-color. Browser support: border-image is currently only supported by Webkit core browsers. I'm not sure if the next version of Firefox will support it.

10. Box shadow

The box-shadow attribute can add shadows to HTML elements without additional tags or background images. Similar to the text-shadow property, it enhances the details of the design; and because it does not affect the readability of the content, it can be a good way to add that extra feel / effect.

10to1 uses the box-shadow attribute for its navigation Beijing and hover status.

10to1 adds a simple shadow to its navigation area and applies this attribute to the hover effect of the navigation link:

# navigation {- webkit-box-shadow: 00 10px # 000;-moz-box-shadow: 00 10px # 000;} # navigation li a:hover, # navigation li a:focus {- webkit-box-shadow: 00 5px # 111;-moz-box-shadow: 00 5px # 111;}

The box-shadow property can have multiple values: horizontal offset, vertical offset, blur radius, extension radius, and shadow color. Horizontal and vertical offsets and shadow colors are used most. Apply a red shadow on a div, offset the 4px on the right and below, without blur, we can use the following code:

Div {- moz-box-shadow: 4px 4px 0 # f00;-webkit-box-shadow: 4px 4px 0 # f00; box-shadow: 4px 4px 0 # f00;}

Browser support: box-shadow is currently only supported by Webkit core browsers, but the upcoming release of Firefox 3.5 will also provide good support.

11. Box size

According to the CSS 2.1specification, the border and padding of the element should be added to the width and height when calculating the total size of the box. But it is well known that old browsers interpret the specification in their own very "creative" ways. The box-sizing attribute allows you to specify how the browser calculates the width and height of an element.

WordPress uses the border-box attribute in all input box elements in the control panel. The WordPress background area uses this attribute on all its input and textarea tags of type text:

Input [type= "text"], textarea {- moz-box-sizing: border-box;-webkit-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;}

The third attribute (- ms-box-sizing) is valid only under Internet Explorer 8. The WordPress stylesheet also adds the Konqueror attribute:-khtml-box-sizing through other selectors.

The box-sizing property can have one of two values: border-box and content-box. Content-box renders the width as defined in CSS2.1. Border-box deducts padding and borders from the set width and height (as in older browsers). .

Browser support: box-sizing is supported by IE8, Opera, Gecko core and Webkit core browsers.

twelve。 Media inquiry

Media query (media queries) allows you to define different styles for different devices based on their capabilities. For example, when the visual area is less than 480 pixels, you might want the sidebar of the site to be displayed below the main content, so that it should not float and appear on the right:

# sidebar {float: right; display: inline; / * IE Double-Margin Bugfix * /} @ media all and (max-width:480px) {# sidebar {float: none; clear: both;}}

You can also specify devices that use color-sensitive screens:

A {color: grey;} @ media screen and (color) {a {color: red;}}

The potential is unlimited. This attribute is useful because you no longer need to write separate stylesheets for different devices, and you no longer need to use JS to determine the properties and functions of each user's browser. A more popular Javascript-based solution to achieve a flexible layout is to use an intelligent fluid layout to make the layout more flexible for the user's browser resolution.

Browser support: media queries are supported by browsers and Opera based on the webkit core. Firefox will support it in version 3.5. IE does not currently support these attributes and there are no plans to support them in future releases.

13. voice

CSS3's voice module CSS3 allows you to specify voice styles for screen readers. You can control different voice settings, such as:

◆ voice-volume

Use numbers from 0 to 100 (0 is mute), percentages, or keywords (silent,x-soft,soft,medium,loud, x-loud, etc.) to set the volume.

◆ voice-balance

Controls which channel it comes from if the user's speaker system supports stereo.

◆ Speak

Instruct the screen reader to read the relevant text, numbers, or punctuation. The available keywords are none, normal, spell-out, digits, literal-punctuation, no-punctuation and inherit.

◆ Pauses and rests

Pause or stop is set before or after an element has been read. You can use time units (for example, "2s" for 2 seconds) or keywords (none,x-weak, weak, medium, strong and x-strong).

◆ Cues

Use sound to limit specific elements and control volume.

◆ voice-family

Set specific sound types and sound synthesis (like font-family).

◆ voice-rate

Control the speed of reading. Can be set to percentage or keywords: x-slow, slow,medium, fast and x-fast.

◆ voice-stress

Indicate any stress (strong tone) that should be used, using different keywords: none, moderate,strong and reduced. For example, tell the screen reader to use the male voice to read all the h3 tags, use the left speaker, and use the soft tone to follow the specified sound, and you can specify the style as follows:

H3 {voice-family: female; voice-balance: left; voice-volume: soft; cue-after: url (sound.au);}

Unfortunately, this attribute has very little support right now, but it is obviously worth paying attention to because we can improve the ease of use of our site in the future. Browser support: currently, only Opera browsers (Windows XP and 2000) support some of the attributes of the voice module. To use them, you need to use the-xv- prefix, such as-xv-voice-balance: right.

This is the end of this article on "how to use CSS 3 to take your design level to the next level". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.