CSS3 屬性

  1. border-radius

    圓角 ( 50% 會變成橢圓 )

    .target {
       -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
       border-radius: 10px;
    }
    
    

    指定其中一個角的用法:

    .target {
       -webkit-border-top-right-radius: 8px;
       -moz-border-radius-topright: 8px;
       border-top-right-radius: 8px;
       -webkit-border-bottom-left-radius: 8px;
       -moz-border-radius-bottomleft: 8px;
       border-bottom-left-radius: 8px;
    }
    
    .target {  /* 左上 右上 右下 左下 */
       -webkit-border-radius: 8px 6px 4px 8px;
       -moz-border-radius:8px 6px 4px 8px; 
       border-radius:8px 6px 4px 8px; 
    }
  2. text-shadow

    文字陰影
    參數: <X軸>  <Y軸>  <模糊半徑>  <顏色>

    .target {
       -webkit-text-shadow: 0 -1px 1px #000;
       -moz-text-shadow: 0 -1px 1px #000;
       text-shadow: 0 -1px 1px #000;
    }
  3. box-shadow

    非文字元素陰影
    參數: <(inset)>  <X軸>  <Y軸>  <模糊半徑>  <擴散半徑>  <顏色>

    .target {
       -webkit-box-shadow: 3px 4px 5px #000;
       -moz-box-shadow: 3px 4px 5px #000;
       box-shadow: 3px 4px 5px #000;
    }

    如果加了 inset 可以在 box 內加陰影,可以用 , 分隔產生兩個以上的 box-shadow

    box-shadow的示範:
    http://codepen.io/bphillips201/details/JygKB

  4. box-sizing

    box model 模式
    參數: content-box or padding-box or border-box
    content-box:width, height = content width, height
    padding-box:width, height = content width, height + padding
    padding-box:width, height = content width, height + padding +border

    .box {
      -webkit-box-sizing: padding-box;
      -moz-box-sizing: padding-box;
      box-sizing: padding-box;
      width: 318px;
      padding: 9px;
    }
  5. RGBa / SHLa

    RGBa 是在 Red, Green, Blue 顏色的調整外再多了Alpha透明度

    .target { color: rgba( 120, 135, 60, .5);}

    HSLa是在 Hue(色調)、Saturation(飽和度)、Light(亮度)調整外再多了Alpha(透明度)

    .target { color: hsla( 214, 58, 80, .5);}

    透明度

    .target {opacity: .6;}

    要把 HEX 轉成 RGB 可以用這個
    http://hex2rgba.devoth.com/

  6. transform

    變形

    .target a:hover {
       -webkit-transform: scale(1.5) rotate(-20deg);
       -moz-transform: scale(1.5) rotate(-20deg);
       -o-transform: scale(1.5) rotate(-20deg); 
       transform: scale(1.5) rotate(-20deg);
    }

    形式有:
    scale(1.5)
    改變大小
    rotate(-20deg)
    旋轉
    skew(-15deg, 10deg)
    傾斜
    translate(25px, 50px)
    位移

  7. transition

    漸變
    參數: <屬性> <時間> <類型> <延遲>

    .target {
       -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
       -e-transition: all .3s ease-in-out;
       transition: all .3s ease-in-out;
    }
    

    類型
    https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

  8. gradients

    漸層
    linear-gradient
    參數:<角度> to <邊或角>, <顏色點>…

    .box {
      background: linear-gradint(180deg, red, yellow);
    }

    radial-gradient
    參數:<形狀> <大小> at <位置>, <顏色點>…

    .box {
      background: radial-gradint(circle at top left, red, yellow);
    }

    可以用這個工具來調整
    http://westciv.com/tools/gradients/

  9. multi-background

    多張背景圖
    background-image, background-position, background-repeat

    body {
       background: url(../bp.png) center top no-repeat,             url(../bp2.png) center top no-repeat; 
    }
  10. real fonts

    內嵌字體有三種檔案類型
    .OTF(OpenType)
    .TTF(TrueType)
    .WOFF

    可以設定 font-style, font-weight 來設定粗體字等等

    @font-face{
       font-family: "League Gothic";
       src: url("fonts/LeagueGothic.ttf");
       format:("TrueType");
    }
    h1{font-family: "League Gothic", Arial, sans-serif ;}

    可以在這個網站找字體
    http://www.fontsquirrel.com/

    還有這幾個也都很多字體
    https://typekit.com/
    http://www.fonts.com/
    http://www.google.com/fonts/

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s