8个你必须熟悉的 CSS3 的属性
openkk 12年前
<style> .codeblock{padding:5px;border:1px solid #CCC;background-color:#EEE;} </style> <img class="imagecache imagecache-article_thumb" title="Top 8 CSS3 properties you must familiar" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/fd3acb34aeb5147ad6ed8b56800a0783.jpg" width="280" height="190" itemprop="image" /> <p><span style="font-size:18px;"><strong>CSS3</strong></span> have been introduced for a period of time. And, there are bunch of new properties introduced, however , do you familiar with those new properties??? Here, I am going to talk about the top 8 property you should familar with. I think few of those you may be using already, however, some of the tricks you may not know and never notice before.</p> <h5>1. border-radius</h5> <p>Before CSS3, having a rounded corners in the web design would terrified many web developers. Because it is difficult to implement with CSS2. Even they can figure how to do it, they have to put extra effort because cross-browser compatibility problem. In CSS3, <em>border-radius </em>property introduced which enable us to create rounded-corner easily. And this is the most popular property in CSS3.</p> <p>To create border-radious in CSS3 which comptable with various browsers, we need to apply the following codes:</p> <div class="codeblock"> -webkit-border-radius: 4px; <br /> -moz-border-radius: 4px; <br /> border-radius: 4px; </div> <p> </p> <p>The above example may be very straight forward / simple to many web developers. However, you may not be aware that, we can use this property to create an circle.</p> <div class="codeblock"> -moz-border-radius: 50px; <br /> -webkit-border-radius: 50px; <br /> border-radius: 50px; </div> <p><img style="width:110px;height:113px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/dfc9ac1020e9013cd5547c7813e1c3db.png" width="110" height="113" /></p> <p>View demo <a href="/misc/goto?guid=4958522346308419882" target="_blank">here</a>..</p> <h6>Incompatibility with Internet Explorer 8 or before</h6> <p>Altought this property is great, however, it raised another problem. The Internet Explorer 8 or before do not support CSS3. As you must know, there are still great number of users using I.E 8 or lower. So, there is a simple and extra effort to work around and here is a <a href="/misc/goto?guid=4958522346408626794" target="_blank">tutorial</a> to talk about this.</p> <h5>2. box-shadow</h5> <p>Other than <em>border-radius</em>, <strong><em>box-shadow</em></strong><em> </em>is a very useful CSS3 property. To get it work, it is very simple, just apply the code as below:</p> <div class="codeblock"> -webkit-box-shadow: 1px 1px 3px #292929; <br /> -moz-box-shadow: 1px 1px 3px #292929; <br /> box-shadow: 1px 1px 3px #292929; </div> <p><br /> However, you may not know that we can apply multiple <em>box-shadows</em> at a time. And it would create a very interesting effect as below:</p> <div class="codeblock"> -webkit-box-shadow: 1px 1px 3px green, -1px -1px blue; <br /> -moz-box-shadow: 1px 1px 3px green,-1px -1px blue; <br /> box-shadow: 1px 1px 3px green, -1px -1px blue; </div> <p><img style="width:180px;height:167px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/c2ad31f53ec7046a57fca6a8f2aac7ec.png" width="180" height="167" /></p> <p>View demo <a href="/misc/goto?guid=4958522346507744048" target="_blank">here</a>.</p> <h6>Advanced box-shadow example</h6> <p>If we apply the <em>::before</em> and <em>::after</em> pseudo-classes, there is some very special thing can be created.</p> <p><img style="width:438px;height:307px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/8c3e4a1010d5e13794aafb63d356da59.png" width="438" height="307" /></p> <p>HTML Code:</p> <div class="box"> <br /> <img src="images/tuts.png" alt="Tuts" /> <br /> </div> <br /> <br /> <p>CSS:</p> <div class="codeblock"> .box { <br /> position: relative; <br /> -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5); <br /> -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); <br /> box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); <br /> <br /> /* Kodakify */ <br /> padding: 10px; <br /> background: white; <br /> } <br /> <br /> /* Just making the image fit the box */ <br /> .box img { <br /> width: 100%; <br /> border: 1px solid #8a4419; <br /> border-style: inset; <br /> } <br /> <br /> .box:after { <br /> content: ''; <br /> position: absolute; <br /> <br /> z-index: -1; /* hide shadow behind image */ <br /> <br /> /* The Shadow */ <br /> -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); <br /> -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); <br /> -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); <br /> <br /> width: 70%; <br /> left: 15%; /* one half of the remaining 30% (see width above) */ <p> height: 100px;<br /> bottom: 0;<br /> }</p> </div> <p>To view the demo, click <a href="/misc/goto?guid=4958522346585374324" target="_blank">here</a>..</p> <h5>3. text-shadow</h5> <p>Another great property is <em>text-shadow</em> which allows you to create a shadow under text; i.e. a slightly moved, slightly blurred copy of a text.</p> <p>And <em>text-shadow</em> accepts four parameters:</p> <ul> <li>x-offset</li> <li>y-offest</li> <li>blur</li> <li>color of shadow</li> </ul> <div class="codeblock"> h1 { <br /> text-shadow: 0 1px 0 white; <br /> color: #292929; <br /> } </div> <p>Here is an example of text-shadow:</p> <p><img style="width:348px;height:162px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/a7e4892bdbee4f865b4d00324a5419de.png" width="348" height="162" /></p> <p>View demo <a href="/misc/goto?guid=4958522346680564641" target="_blank">here</a>.</p> <p>Text-Outline</p> <p>By apply multiple shadows using a comma as the seperator, we can create text-outline effect as well.</p> <div class="codeblock"> <br /> body { background: white; } </div> <p> </p> <div class="codeblock"> h1 { <br /> text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black; <br /> color: white; <br /> } </div> <p> </p> <p><img style="width:391px;height:189px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/dae9c9986e958a9b36a2bf6abaa29c11.png" width="391" height="189" /></p> <p>View demo <a href="/misc/goto?guid=4958522346774902139" target="_blank">here</a>.</p> <h5>4. Multiple Backgrounds</h5> <p>In CSS3, multiple backgrounds are allowed. And here is an simple example to illustrate.</p> <p><br /> .box {<br /> background: url(image/path.jpg) 0 0 no-repeat,<br /> url(image2/path.jpg) 100% 0 no-repeat;<br /> }<br /> </p> <p>It would be render like this.</p> <p><img style="width:246px;height:169px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/19d247f3e363bd6419a945c97ff91cc4.png" width="246" height="169" /></p> <p>Click here to view <a href="/misc/goto?guid=4958522346874658592" target="_blank">demo</a>.</p> <p>On the above example, using a comma as the separator, we are including two seperate background images. And the first image placed in the <em>top left (0 0)</em>, while the second image placed at <em>top right (100% 0)</em>.</p> <p>Incompatibility with Internet Explorer 7 or before</p> <p>Like IE7, do not support CSS3, it cannot render this property. The solution is to declare the <em>background</em> property twice:</p> <div class="codeblock"> .box { <br /> /* fallback */ <br /> background: url(image/path.jpg) no-repeat; </div> <p> </p> <div class="codeblock"> /* modern browsers */ <br /> background: url(image/path.jpg) 0 0 no-repeat, <br /> url(image2/path.jpg) 100% 0 no-repeat; <br /> } <br /> </div> <h5>5. background-size</h5> <p>If you have an background image would like to take up all available space regardless of browser windows's width, <em>background-size</em> property can do it.</p> <div class="codeblock"> body, html { height: 100%; } </div> <p> </p> <div class="codeblock"> body { <br /> background: url(path/to/image.jpg) no-repeat; <br /> background-size: 100% 100%; <br /> } </div> <p>The background-size property accept two parameters: the x and y widths, respectively.</p> <p><img style="width:248px;height:173px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/3762ee9e4c02cb843f1af44ff07245f1.png" width="248" height="173" /></p> <p>View demo <a href="/misc/goto?guid=4958522346955438853" target="_blank">here</a>.</p> <p>However, this property natively supported by Chrome and Safari, but not those old version browsers (e.g.: I.E.7). Hence, here the code make it support old version browsers:</p> <div class="codeblock"> body { <br /> background: url(path/to/image.jpg) no-repeat; <br /> -moz-background-size: 100% 100%; <br /> -o-background-size: 100% 100%; <br /> -webkit-background-size: 100% 100%; <br /> background-size: 100% 100%; <br /> } </div> <p>Click here to see the demo</p> <h5>6. text-overflow</h5> <p>If you familar with web development, you should know that Internet Explorer is the most trouble browser. It is because Internet Explorer do not support CSS3 property before IE9. However, they devloped a very good property which is <em>text-overflow</em>. <u><em>This property has been supported since IE6. Did you know??</em></u></p> <p>This property can be used to cut off text that exceeds its container, while still providing a bit of feedback for the user, like an ellipsis.</p> <div class="codeblock"> #box { <br /> text-overflow:ellipsis; <br /> -o-text-overflow: ellipsis; <br /> overflow:hidden; <br /> white-space:nowrap; <br /> border: 1px solid black; <br /> width: 400px; <br /> padding: 20px; <br /> -webkit-transition: all .5s; <br /> color: rgba(0,0,0,.7); <br /> cursor: pointer; <br /> } </div> <p> </p> <div class="codeblock"> #box:hover { <br /> white-space: normal; <br /> color: rgba(0,0,0,1); <br /> background: #e3e3e3; <br /> border: 1px solid #666; <br /> } <br /> </div> <p><img style="width:303px;height:175px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/5d6abdbf1d197af121c2f6f54c83f316.png" width="303" height="175" /></p> <p>View demo <a href="/misc/goto?guid=4958522347050002638" target="_blank">here</a>.</p> <p>The above CSS code, would hide the overflow text. However, if the user hover the box, the entirety of the text would show up. A;so, A bit oddly (unless I’m mistaken), there doesn’t seem to be a way to reset the text-overflow property, or “turn it off.” To mimic this “off” functionality, on :hover, we can set the white-space property back to normal. This works, because text-overflow is dependent upon this to function correctly.</p> <h5>7. box-flex</h5> <p>The <em>box-flex</em> property which allow to create flexible box model. Let illustrates with a simple example:</p> <div class="codeblock"> <div id="container"> <br /> <div id="main"> Main content here </div> <br /> <aside> Aside content here </aside> <br /> </div> </div> <p>Apply the CSS as follow:</p> <div class="codeblock"> #container { <br /> width: 960px; <br /> height: 500px; /* just for demo */ <br /> background: #e3e3e3; <br /> margin: auto; <br /> display: -moz-box; <br /> display: -webkit-box; <br /> display: box; <br /> } <br /> <br /> #main { <br /> background: yellow; <br /> } <br /> aside { <br /> background: red; <br /> } </div> <p>At this point, you would see like this.</p> <p><img style="width:496px;height:314px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/ba9ead10a763a0c19d3611af595e0cbb.png" width="496" height="314" /></p> <p>After, we update the "<u>#main</u>" property as below:</p> <div class="codeblock"> #main { <br /> background: yellow; <br /> width: 800px; <br /> } <br /> </div> <p><img style="width:496px;height:314px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/1f81b3dacd90c82911e3ffe1775eca48.png" width="496" height="314" /></p> <p>Now we can see the yellow part take most of the space, however, the red part didn't take up all of the remaining space. We can add the <em>box-flex</em> property to instruct the red part take up remaining space dynamically.</p> <div class="codeblock"> aside { <br /> display: block; /* cause is HTML5 element */ <br /> background: red; </div> <p> </p> <div class="codeblock"> /* take up all available space */ <br /> -moz-box-flex: 1; <br /> -webkit-box-flex: 1; <br /> box-flex: 1; <br /> } </div> <p><img style="width:496px;height:314px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/b968028f91e5118bd4152409953bad24.png" width="496" height="314" /></p> <p>View demo <a href="/misc/goto?guid=4958522347138406425" target="_blank">here</a>..</p> <p>Although, this is an excellent property. However, you should be aware that this is not supported by those old version browsers (such as: Internet Explorer 6,7,8 ).</p> <h5>8. Transaction</h5> <p>This is most exciting property introduced in CSS3. This enable the ability to apply animations to elements, without the use of JavaScript</p> <p><img style="width:441px;height:202px;" alt="8个你必须熟悉 CSS3 的属性" src="https://simg.open-open.com/show/5d6abdbf1d197af121c2f6f54c83f316.png" width="441" height="202" /></p> <p><strong>HTML</strong></p> <div class="codeblock"> <ul> <br /> <li> <br /> <a href="#"> Hover Over Me </a> <br /> </li> <br /> <li> <br /> <a href="#"> Hover Over Me </a> <br /> </li> <br /> <li> <br /> <a href="#"> Hover Over Me </a> <br /> </li> <br /> <li> <br /> <a href="#"> Hover Over Me </a> <br /> </li> <br /> </ul> <br /> </div> <p><strong>CSS</strong></p> <div class="codeblock"> ul a { <br /> -webkit-transition: padding .4s; <br /> -moz-transition: padding .4s; <br /> -o-transition: padding .4s; <br /> transition: padding .4s; <br /> } </div> <p> </p> <div class="codeblock"> a:hover { <br /> padding-left: 6px; <br /> } <br /> </div> <p>To view <a href="/misc/goto?guid=4958522347237040785" target="_blank">demo</a> online.</p> <p>And the transaction property would accept the following parameters:</p> <ul> <li>The property to transition. (Set this value to all if needed)</li> <li>The duration</li> <li>The easing type</li> </ul> <p>And you may notice that we did not apply the transition to the hover state of the anchor tag is because, if we did, the animation would only take effect during mouseover. On mouseout, the element would return to initial state immediately.</p>