Several CSS3 tips you should know

Many of you may have heard many rumors about CSS3, but what about the CSS3 skills we can actually use now? In this article, I will show you someDistinctive CSS3 skillsThese skills are excellent in some major browsers (such as Firefox, Chrome, Safari, and operabrowser ). These effects will downgrade rendering (such as IE) in unsupported browsers ). Using browser-specific declarations, many proposed CSS3 styles can be used immediately.

If you don't know what the browser's specific declaration is, you just need to remember that they are all specific prefixes related to the kernel provider before the CSS style attributes. Because CSS3 is not fully supported yet, we need to use these specific statements. The specific form is as follows:

• Mozilla/Firefox/Gecko browser Prefix:-moz-
• Webkit (Safari/Chrome) browser Prefix:-webkit-(NOTE: Some Wbkit prefixes can only be used in Safari, but not Chrome .)

As you may have seen, one disadvantage of using these declarations is that if we want to get CSS3 in Firefox, Safari, and Chrome, we need to use all the prefixes above. Don't be surprised. ie does not support CSS3, so it is not like other major browsers that have a specific prefix declaration.

Well, we have already mentioned enough. Let's try it now. Note: removing these prefixes in the style declaration is the actual specification proposal of the W3 standard.

Demo (Instance) Description on this page

All these examples are on this page. If you cannot view the effect of the Instance (or you can only view some), it means that the browser you are using does not support these CSS3 effects.

Shadow Effect

The shadow effect accepts multiple parameter values. The first is the color of the shadow. It also accepts four other lenght values. The first two values are determined by the X (horizontal) offset and Y (vertical) offset. The next parameter is the value that reflects the Blur. The fourth and last value is used to define the degree of fuzzy distribution.

Box-shadow: #333 3px 3px 4px;
-Moz-box-shadow: #333 3px 3px 4px;
-Webkit-box-shadow: #333 3px 3px 4px; shadow effect demonstration

<! DOCTYPE html> 





Tip: the code can be modified before running!

 
 
 
  
Four pages in total:
 
  
Previous Page
 
  
1
 
  
2
 
  
3
 
  
4
 
  
Next Page