HTML 5 技術體系中的 CSS
簡介
在 HTML 5 當中,CSS 的改良主要集中在 Typography、Visuals、Transitions、transforms 與 animations 等方面,最主要的改變是增加了許多動態的效果。
CSS Selectors
Selectors
.row:nth-child(even) {
background: #dde;
}
.row:nth-child(odd) {
background: white;
}
Image-like display
div {
display: inline-block;
}
Specific attributes
input[type="text"] {
background: #eee;
}
Negation
:not(.box) {
color: #00c;
}
:not(span) {
display: block;
}
More specific targetting
h2:first-child { ... }
div.text > div { ... }
h2 + header { ... }
New Font Support
@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}
@font-face {
font-family: 'Droid Sans';
src: url(Droid_Sans.ttf);
}
header {
font-family: 'LeagueGothic';
}
Text Wrapping
div {
text-overflow: ellipsis;
}
Columns
-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
Text Stroke
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.00px;
}
Opacity
color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);
Hue/saturation/luminance color model
color: hsla(128, 75%, 33%, 1.00);
Rounded corners
border-radius: 22px;
Gradients
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00))
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
Shadows
text-shadow:
rgba(64, 64, 64, 0.5)
5px
0px
0px;
box-shadow:
rgba(0, 0, 128, 0.25)
0px
0px
0px;
Instant Web 2.0 (just add sliders)
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background:
-webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0.88)), to(rgba(255, 255, 255, 0.88)));
border-radius: 11px;
-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.75)));
Background enhancements
Background sizing
#logo {
background: url(logo.gif) center center no-repeat;
background-size:
;
}
Multiple backgrounds
div {
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 10px center repeat-x;
}
Transitions
#box.left {
margin-left: 0;
}
#box.right {
margin-left: 1000px;
}
document.getElementById('box').className = 'left';
document.getElementById('box').className = 'right';
#box {
-webkit-transition: margin-left 1s ease-in-out;
}
document.getElementById('box').className = 'left'; Left
document.getElementById('box').className = 'right'; Right
Transforms
-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)
#threed-example {
-webkit-transform: rotateZ(5deg);
-webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
-webkit-transform: rotateZ(-5deg);
}
Animations
@-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}
div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
page revision: 5, last edited: 10 Aug 2010 09:26
Post preview:
Close preview