CSS 3 + HTML 5 are the future of the Web. They have not officially arrived yet, although many browsers have begun to provide partial support for them. This article introduces 5 CSS3 techniques that can help you achieve the future of the Web. Currently these techniques should not be used on formal client projects; they are more suitable for your personal blog site, the web design community, or situations where you won't have clients complaining to you.
1. Rounded corners effect
One of the most commonly used new features of CSS3 is the rounded corner effect. The standard HTML square object has 90-degree square corners. CSS3 can help you achieve rounded corners.
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Even a single corner can be rounded, but the syntax of Mozilla and Webkit is slightly different.
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft
: 10px; -moz-border-radius-bottomright: 10px;
-webkit-border-top -rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px
; -webkit-border-bottom-rightright-radius: 10px;
Supported browsing Server: Firefox, Safari, Chrome
2. Graphical borders
As the name suggests, the graphical border is the border that allows the use of images as objects. The syntax is as follows:
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border- image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
Here, border: 5px sets the width of the border, and then, each The border image definition tells the browser how much of the image to use as the border. The border image can also be set individually for each edge:
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top -rightright-image
border-right-image
supported browsers: Firefox 3.1, Safari, Chrome.
3. Block shadow and text shadow
Shadow effects were once something web designers both loved and hated. Now, with CSS3, you no longer need Photoshop. There are already websites using this feature, such as 24 Ways website.
-webkit-box-shadow: 10px 10px 25px #ccc ;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
The first two properties set the X / Y displacement of the shadow, here they are 10px, and the third property defines the blur of the shadow Degree, the last one sets the color of the shadow. Text shadow can also be set like this:
text-shadow: 2px 2px 5px #ccc;
Supported browsers: Firefox 3.1, Safari, Chrome (only supports Box shadow), Opera (only supports text shadow). The first 3 numbers represent red and green The last value of the three blue colors represents transparency. In addition, we can also use opacity to achieve transparency (currently, this technique is mostly used for light box effects - Translator)
4. Use RGBA to achieve transparency effects
At present, the transparency effect in Web design is mainly achieved by PNG images (but it is not well supported in IE browser - translator). In CSS3, the transparency effect can be directly achieved.
rgba(200, 54, 54, 0.5);
background: rgba(200, 54, 54, 0.5);
color: rgba(200, 54, 54, 0.5);
color: #000;
opacity: 0.5;
Supported browsers : Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes).
5. Use @Font-Face to implement customized fonts
There are several fonts that are relatively safe in web design, such as Arial, Helvetica, Verdana, Georgia, and Comic Sans (Chinese, generally speaking, Song Dynasty is the only safe one - translator). Now, using CSS3's @font-face can I specify the fonts myself, but because of copyright issues, the actual fonts that can be used are limited (in addition, the huge Chinese fonts are also a difficult problem to solve - translator).
The syntax is as follows:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
Supported browsers: Firefox 3.1, Safari, Opera 10 and IE7 (it takes some trouble, if you are not afraid of trouble, you can implement this function in IE, please refer to: make font-face work in IE)
Although CSS3 is still under development, these functions mentioned above are already available in some browsers Used, especially Safari. Unfortunately, Safari is not a mainstream browser.
Firefox currently has a large user base. In addition, the upcoming Firefox 3.1 supports many CSS3 effects. Because Firefox users are highly motivated to upgrade, many users can experience the new features of CSS3 in advance.
Google Chrome was just released this year. It is based on the Webkit engine, so it is very similar to Safari. Because Safari is mainly used in the Mac market, Chrome can just fill the gap in the Windows market.
According to statistics, as of November 2008, 44.2% of users used Firefox, 3.1% used Chrome, and 2.7% used Safari, which means that some functions of CSS3 can already support nearly half of Internet users. In the Web design circle, this proportion may Higher, about 73.6% (data provided by Blog.SpoonGraphics)
6. Negative factors
The CSS3 features described above will bring excellent results to your website, but there are still some negative factors that must be considered:
Internet Explorer: 46 % of the Internet cannot see these effects, so don't use these things for important designs. Also ensure that where these effects do not work, alternative designs are available.
CSS validation issues: These CSS3 features are not the final version. Currently, different browsers use different tags to implement these features, which may cause validation issues for your Style Sheet.
Bloated code: Because different browsers use different definition syntax, your CSS code will eventually become very bloated.
Improper use: Improper use of these effects may bring some adverse consequences, especially for shadow effects.
International source of this article: http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
Chinese translation source: COMSHARP CMS official website (35km translation )