HTML 5 技術體系中的 CSS

HTML5技術

前言

目錄

過去

現在

未來

JavaScript

修改進化

儲存記憶

資料庫

網路連接

衛星定位

通知

拖拉

HTML

修改進化

新標記

影音物件

2D 繪圖

3D 動畫

CSS

修改進化

字體

特效

選擇器

開發工具

Node.js

Titanium

PhoneGap

Aptana Studio

應用工具

應用

工具

雲端網站

mugeda 動畫製作

訊息

相關網站

參考文獻

最新修改

簡體版

English

簡介

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

Facebook
page revision: 1, last edited: 06 Sep 2010 00:52
Edit Rate (0) Tags Discuss (0) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License