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;
}