8個你必須熟悉的 CSS3 的屬性
CSS3 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.
1. border-radius
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, border-radius property introduced which enable us to create rounded-corner easily. And this is the most popular property in CSS3.
To create border-radious in CSS3 which comptable with various browsers, we need to apply the following codes:
-moz-border-radius: 4px;
border-radius: 4px;
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.
-webkit-border-radius: 50px;
border-radius: 50px;
View demo here..
Incompatibility with Internet Explorer 8 or before
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 tutorial to talk about this.
2. box-shadow
Other than border-radius, box-shadow is a very useful CSS3 property. To get it work, it is very simple, just apply the code as below:
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
However, you may not know that we can apply multiple box-shadows at a time. And it would create a very interesting effect as below:
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
box-shadow: 1px 1px 3px green, -1px -1px blue;
View demo here.
Advanced box-shadow example
If we apply the ::before and ::after pseudo-classes, there is some very special thing can be created.
HTML Code:
<div class="box"><img src="images/tuts.png" alt="Tuts" />
</div>
CSS:
position: relative;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
/* Kodakify */
padding: 10px;
background: white;
}
/* Just making the image fit the box */
.box img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
.box:after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
/* The Shadow */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% (see width above) */
height: 100px;
bottom: 0;
}
To view the demo, click here..
3. text-shadow
Another great property is text-shadow which allows you to create a shadow under text; i.e. a slightly moved, slightly blurred copy of a text.
And text-shadow accepts four parameters:
- x-offset
- y-offest
- blur
- color of shadow
text-shadow: 0 1px 0 white;
color: #292929;
}
Here is an example of text-shadow:
View demo here.
Text-Outline
By apply multiple shadows using a comma as the seperator, we can create text-outline effect as well.
body { background: white; }
text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
color: white;
}
View demo here.
4. Multiple Backgrounds
In CSS3, multiple backgrounds are allowed. And here is an simple example to illustrate.
.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
It would be render like this.
Click here to view demo.
On the above example, using a comma as the separator, we are including two seperate background images. And the first image placed in the top left (0 0), while the second image placed at top right (100% 0).
Incompatibility with Internet Explorer 7 or before
Like IE7, do not support CSS3, it cannot render this property. The solution is to declare the background property twice:
/* fallback */
background: url(image/path.jpg) no-repeat;
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
5. background-size
If you have an background image would like to take up all available space regardless of browser windows's width, background-size property can do it.
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
}
The background-size property accept two parameters: the x and y widths, respectively.
View demo here.
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:
background: url(path/to/image.jpg) no-repeat;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
Click here to see the demo
6. text-overflow
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 text-overflow. This property has been supported since IE6. Did you know??
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.
box {
text-overflow:ellipsis;
-o-text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
border: 1px solid black;
width: 400px;
padding: 20px;
-webkit-transition: all .5s;
color: rgba(0,0,0,.7);
cursor: pointer;
}
</div>
box:hover {
white-space: normal;
color: rgba(0,0,0,1);
background: #e3e3e3;
border: 1px solid #666;
}
</div>
View demo here.
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.
7. box-flex
The box-flex property which allow to create flexible box model. Let illustrates with a simple example:
</div> </div>
Apply the CSS as follow:
width: 960px;
height: 500px; /* just for demo */
background: #e3e3e3;
margin: auto;
display: -moz-box;
display: -webkit-box;
display: box;
}
#main {
background: yellow;
}
aside {
background: red;
}
At this point, you would see like this.
After, we update the "#main" property as below:
main {
background: yellow;
width: 800px;
}
</div>
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 box-flex property to instruct the red part take up remaining space dynamically.
display: block; /* cause is HTML5 element */
background: red;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
View demo here..
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 ).
8. Transaction
This is most exciting property introduced in CSS3. This enable the ability to apply animations to elements, without the use of JavaScript
HTML
<li>
<a href="#"> Hover Over Me </a>
</li>
<li>
<a href="#"> Hover Over Me </a>
</li>
<li>
<a href="#"> Hover Over Me </a>
</li>
<li>
<a href="#"> Hover Over Me </a>
</li>
</ul>
CSS
-webkit-transition: padding .4s;
-moz-transition: padding .4s;
-o-transition: padding .4s;
transition: padding .4s;
}
padding-left: 6px;
}
To view demo online.
And the transaction property would accept the following parameters:
- The property to transition. (Set this value to all if needed)
- The duration
- The easing type
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.