CSS範例集

使用陰影做出立體的效果

本日
推薦套餐

顯示原始碼

HTML
<div class="todays_pickup">
  本日<br />推薦套餐
</div>CSS
.todays_pickup {
  color: #ff0042;
  font-family: "Harucraft", sans-serif;
  font-size: 68px;
  line-height: 1.1;
  padding: 20px 0;
  text-align: center;
  text-shadow: 0px 0px 0 rgb(235,235,235),1px 1px 0 rgb(228,228,228),2px 2px 0 rgb(222,222,222),3px 3px 0 rgb(215,215,215),4px 4px 0 rgb(209,209,209), 5px 5px 0 rgb(203,203,203),6px 6px 5px rgba(0,0,0,0.25),6px 6px 1px rgba(0,0,0,0.5);
  width: 280px;
}

※本原始碼的實際顯示尺寸會比範例要小一些

使用陰影做出立體的效果

PLAY

顯示原始碼

HTML
<div class="play">
  <span class="yellow">P</span><span class="blue">L</span><span class="pink">A</span><span class="green">Y</span>
</div>CSS
.play {
  color: #ffba16;
  font-family: 'FB Condor Bold', sans-serif;
  font-size: 100px;
  letter-spacing: 0.2em;
  padding: 10px 0;
  -moz-transform: skew(-25deg) rotate(5deg);
  -ms-transform: skew(-25deg) rotate(5deg);
  -webkit-transform: skew(-25deg) rotate(5deg);
  transform: skew(-25deg) rotate(5deg);
  text-shadow:
    0 1px #ff9b0d,
    1px 0 #f79100,
    1px 2px #ff9b0d,
    2px 1px #f79100,
    2px 3px #ff9b0d,
    3px 2px #f79100,
    3px 4px #ff9b0d,
    4px 3px #f79100,
    4px 5px #ff9b0d,
    5px 6px #f79100,
    6px 7px 5px #ff9b0d;
  -webkit-text-stroke: 0.5px #ffcf5d;
}

.play .pink {
  letter-spacing: -1px;
  color: #ff539f;
  text-shadow:
    0 1px #f7046f,
    1px 0 #e50568,
    1px 2px #f7046f,
    2px 1px #e50568,
    2px 3px #f7046f,
    3px 2px #e50568,
    3px 4px #f7046f,
    4px 3px #e50568,
    4px 5px #f7046f,
    5px 6px #e50568,
    6px 7px 5px #f7046f;
  -webkit-text-stroke: 0.5px #ff9cc8;
}

.play .blue {
  color: #19a0ee;
  text-shadow:
    0 1px #0096ec,
    1px 0 #0087d4,
    1px 2px #0096ec,
    2px 1px #0087d4,
    2px 3px #0096ec,
    3px 2px #0087d4,
    3px 4px #0096ec,
    4px 3px #0087d4,
    4px 5px #0096ec,
    5px 6px #0087d4,
    6px 7px 5px #0096ec;
  -webkit-text-stroke: 0.5px #68c8ff;
}

.play .green {
  color: #07ed1c;
  text-shadow:
    0 1px #02d315,
    1px 0 #00bb12,
    1px 2px #02d315,
    2px 1px #00bb12,
    2px 3px #02d315,
    3px 2px #00bb12,
    3px 4px #02d315,
    4px 3px #00bb12,
    4px 5px #02d315,
    5px 6px #00bb12,
    6px 7px 5px #02d315;
  -webkit-text-stroke: 0.5px #5efd6d;
}

※本原始碼的實際顯示尺寸會比範例要小一些

使用陰影做出雙重框線效果

夏日全館酬賓實施中

顯示原始碼

HTML
<div class="summer_bargain">
  <div class="summer_bargain_inner">
    <span class="blue">夏</span><span class="green">日</span><span class="blue">全</span><span class="green">館</span><span class="blue">酬</span><span class="green">賓</span><strong>實施中</strong>
  </div>
</div>CSS
.summer_bargain {
  margin: 0 auto;
  width: 310px;
}

.summer_bargain_inner {
  border-radius: 3px;
  color: #37bcf2;
  font-family:"Maru Folk Heavy", sans-serif;
  font-size: 42px;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 3px 0;
  text-shadow: 2px 2px 0 #fff, 5px 5px 0 #dfe8f1;
  text-align: center;
}

.summer_bargain_inner .green{
  color: #06d9a5;
}

.summer_bargain_inner .last{
  letter-spacing: 10px;
}

.summer_bargain_inner strong {
  display: block;
  color: #e97792;
  font-size: 24px;
  font-family: "Maru Folk Medium", sans-serif;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #fff, 3px 3px 0 #f1e3df;
}

※本原始碼的實際顯示尺寸會比範例要小一些

使用鏡射與漸層做出的效果

滋潤美白化妝水

顯示原始碼

HTML
<div class="reflect_body">
  <div class="reflect_title" title="滋潤美白化妝水">
    滋潤美白化妝水
  </div>
</div>CSS
.reflect_body {
  height: 80px;
  position: relative;
}

.reflect_title {
  color: #c5f7fe;
  font-family: 'A1 Mincho', serif;
  font-size: 42px;
  left: 0;
  letter-spacing: -0.05em;
  line-height: 1;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  -webkit-box-reflect: below 0 -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.4, transparent), to(rgba(0,0,0,0.5)));
}

.reflect_title:before {
  color:#72d0df;
  content: attr(title);
  display: block;
  position: absolute;
  left: 0;
  text-align: center;
  top: 0;
  -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
  width: 100%;
}

此CSS在Firefox中不可用。

※本原始碼的實際顯示尺寸會比範例要小一些

類似圓形臂章的效果

能在家裡DIY的手製雜貨

顯示原始碼

HTML
<div class="patch">
  <div class="patch_inner">
    <span class="catch">能在家裡DIY的</span>
    手製雜貨
  </div>
</div>CSS
.patch {
  background: #2b292a url(bg1.png?fug);
  border-radius:125px;
  color: #fff;
  font-family: "Moaria Regular", sans-serif;
  font-size: 32px;
  height: 220px;
  letter-spacing: 5px;
  margin: -10px auto 0 auto;
  padding-top: 1px;
  text-indent: 6px;
  text-shadow: 1px 1px 1px #2b292a;
  width: 220px;
}

.patch_inner {
  border: 1px dashed #fff;
  border-radius: 200px;
  display: block;
  height: 210px;
  margin: 3px 4px;
  width: 210px;
}

.patch_inner .catch{
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  color:#2b292a;
  display: block;
  font-size: 16px;
  letter-spacing: 0;
  margin: 50px auto 15px auto;
  padding: 2px 0;
  text-align: center;
  text-indent: 0;
  text-shadow: none;
  width: 130px;
}

※本原始碼的實際顯示尺寸會比範例要小一些

使用陰影做出發光般的效果

★ 浪漫的滿天星空 ★ 絕景飯店特輯

顯示原始碼

HTML
<div class="glow_banner">
  <span class="catch">★ 浪漫的滿天星空 ★</span>
  絕景飯店特輯
</div>CSS
.glow_banner {
  background: #1e3971;
  background: -moz-linear-gradient(top, #091938, #1e3971);
  background: -webkit-gradient(linear,
    left top,
    left bottom,
    from(#091938),
    to(#1e3971));
  border-radius: 3px;
  color: #fff;
  font-size: 36px;
  font-family:"Haruhi Gakuen", sans-serif;
  height: 95px;
  letter-spacing: 2px;
  margin: 0 auto;
  padding: 10px;
  text-shadow: 0 0 15px #ffdd65, 0 0 10px #ffdd65,0 0 5px #fff;
  width: 250px;
}

.glow_banner .catch {
  display: block;
  font-size: 16px;
  margin-top: 10px;
  padding: 0 0 10px 0;
}

※本原始碼的實際顯示尺寸會比範例要小一些

類似包裝紙的傾斜條狀設計

生日快樂
記得請客喔
Happy Birthday!

顯示原始碼

HTML
<div class="skew_banner">
  <div class="skew_banner_inner">
    <div class="line line1">生日快樂</div>
    <div class="line line2">記得請客喔</div>
    <div class="line line3">Happy Birthday!</div>
  </div>
</div>CSS
.skew_banner {
  background: #fdcb04;
  border-radius: 3px;
  font-family: "AR PShinChanPOP B5 Heavy", sans-serif;
  height: 180px;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  width: 270px;
}

.skew_banner_inner {
  color: #fff;
  font-size: 20px;
  -moz-transform: rotate(-45deg) translate(-12px, -45px);
  -ms-transform: rotate(-45deg) translate(-12px, -45px);
  -webkit-transform: rotate(-45deg) translate(-12px, -45px);
  transform: rotate(-45deg) translate(-12px, -45px);
  width: 340px;
}

.skew_banner_inner .line{
  border-top: 7px solid #f45775;
  border-bottom: 3px solid green;
  height: 50px;
  line-height: 50px;
}

.skew_banner_inner .line1{
  background: #c03935;
  border-top: 10px solid #ff6501;
  border-bottom: 4px solid #fff;
  height: 35px;
  line-height: 35px;
  margin-left: -90px;
}

.skew_banner_inner .line2{
  background: #8ca702;
  border-top: 20px solid #fdcb04;
  border-bottom: 8px solid #fff;
}

.skew_banner_inner .line3{
  background: #ff6501;
  border-bottom: 30px solid #8ca702;
  border-top: 12px solid #c03935;
  margin-left: 55px;
}

※本原始碼的實際顯示尺寸會比範例要小一些

直條紋設計

鰻魚丼新鮮上市

顯示原始碼

HTML
<div class="stripe_banner">
  <div class="stripe_banner_inner">
    <span>鰻魚丼</span>新鮮上市
  </div>
</div>CSS
.stripe_banner {
  background: #f2bc02;
  background: -moz-linear-gradient(left, #f2bc02,
    #f2bc02 10%,
    #060606 10%,
    #060606 20%,
    #3d640b 20%,
    #3d640b 30%,
    #f2bc02 30%,
    #f2bc02 40%,
    #060606 40%,
    #060606 50%,
    #3d640b 50%,
    #3d640b 60%,
    #f2bc02 60%,
    #f2bc02 70%,
    #060606 70%,
    #060606 80%,
    #3d640b 80%,
    #3d640b 90%,
    #f2bc02 90%,
    #f2bc02);
  background: -webkit-gradient(linear,
    left top,
    right top,
    from(#f2bc02),
    color-stop(0.1, #f2bc02),
    color-stop(0.1, #060606),
    color-stop(0.2, #060606),
    color-stop(0.2, #3d640b),
    color-stop(0.3, #3d640b),
    color-stop(0.3, #f2bc02),
    color-stop(0.4, #f2bc02),
    color-stop(0.4, #060606),
    color-stop(0.5, #060606),
    color-stop(0.5, #3d640b),
    color-stop(0.6, #3d640b),
    color-stop(0.6, #f2bc02),
    color-stop(0.7, #f2bc02),
    color-stop(0.7, #060606),
    color-stop(0.8, #060606),
    color-stop(0.8, #3d640b),
    color-stop(0.9, #3d640b),
    color-stop(0.9, #f2bc02),
    to(#f2bc02));
  );
  border-radius: 3px;
  font-family:"Kanteiryu", sans-serif;
  font-size: 32px;
  height: 160px;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  text-shadow: 1px 1px 0 #f9e18f;
  width: 270px;
}

.stripe_banner_inner {
  background: #f2bc02;
  border: 3px solid #060606;
  margin: 30px auto 0 auto;
  width: 180px;
}

.stripe_banner_inner span{
  display: block;
  font-size: 42px;
  margin-bottom: -5px;
  text-indent: -3px;
}

※本原始碼的實際顯示尺寸會比範例要小一些

類似超市傳單的特賣價顯示效果

麻豆產

文旦

98 元

顯示原始碼

HTML
<ul class="price_lists">
  <li class="price_list">
    <div class="area">
      麻豆產
    </div>
    <div class="product">
      文旦
    </div>
    <div class="price">
      <span class="num">
        98
      </span>
      <span class="unit">
        元
      </span>
    </div>
  </li>
</ul>CSS
.price_lists {
  list-style: none;
  margin: 0;
  padding: 0;
}

.price_list {
  border: 1px solid #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  height: 80px;
  margin: 0 auto 7px auto;
  position: relative;
  text-align: right;
  width: 280px;
}

.price_list .area {
  display: inline-block;
  font-family :"Shin Go Light", sans-serif;
  font-size: 14px;
  left: 7px;
  padding: 3px 8px;
  position: absolute;
  top: 4px;
}

.price_list .product {
  font-family :"Shin Go DeBold", sans-serif;
  font-size: 35px;
  left: 7px;
  padding: 5px 8px;
  position: absolute;
  top: 16px;
}

.price_list .price {
  color: red;
  font-family :"Harucraft", sans-serif;
  font-size: 60px;
  font-style: italic;
  letter-spacing: -8px;
  text-shadow: 3px 3px 1px yellow, -3px 3px 1px yellow, 3px -3px 1px yellow, -3px -3px 1px yellow;
}

.price_list .price .unit {
  font-size: 24px;
  margin-left: -6px;
  margin-right: 20px;
}

※本原始碼的實際顯示尺寸會比範例要小一些

使用CSS繪製長條圖

顯示原始碼

HTML
<div class="line_graph">
  <div class="line1 line">
    <div class="line_body">
      <div class="line_inner">
        <div class="line_count">6</div>
      </div>
      <div class="line_label">
        橘子
      </div>
    </div>
  </div>
  <div class="line2 line">
    <div class="line_body">
      <div class="line_inner">
        <div class="line_count">3</div>
      </div>
      <div class="line_label">
        蘋果
      </div>
    </div>
  </div>
  <div class="line3 line">
    <div class="line_body">
      <div class="line_inner">
        <div class="line_count">5</div>
      </div>
      <div class="line_label">
        香蕉
      </div>
    </div>
  </div>
  <div class="line4 line">
    <div class="line_body">
      <div class="line_inner">
        <div class="line_count">7</div>
      </div>
      <div class="line_label">
        芭樂
      </div>
    </div>
  </div>
  <div class="line5 line">
    <div class="line_body">
      <div class="line_inner">
        <div class="line_count">10</div>
      </div>
      <div class="line_label">
        草莓
      </div>
    </div>
  </div>
</div>CSS
.line_graph {
  border-bottom: 1px solid #eee;
  border-left: 1px solid #eee;
  font-family: 'AR Yenti B5 Bold', sans-serif;
  height:160px;
  margin: 0 auto -20px auto;
  padding-left: 10px;
  text-align: center;
  width: 270px;
}

.line_graph .line {
  float: left;
  margin: 0 2%;
  width: 16%;
}

.line_graph .line .line_body{
  height: 160px;
  margin: 0 5px;
  position: relative;
}

.line_graph .line .line_inner{
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
}

.line_graph .line .line_inner .line_count{
  color: #fff;
  font-size: 10px;
  margin-top: 5px;
}

.line_graph .line .line_label{
  background: #fff;
  bottom: -20px;
  font-size: 8px;
  left: 0;
  padding-top: 5px;
  position: absolute;
  text-align: center;
  width: 100%;
}

.line_graph .line1 .line_inner{
  background: #ff8a00;
  height: 60%;
}

.line_graph .line2 .line_inner{
  background: #fb6464;
  height: 30%;
}

.line_graph .line3 .line_inner{
  background: #ffe400;
  height: 50%;
}

.line_graph .line4 .line_inner{
  background: #91ce00;
  height: 70%;
}

.line_graph .line5 .line_inner{
  background: #ff4c7a;
  height: 100%;
}

※本原始碼的實際顯示尺寸會比範例要小一些

模擬木頭雕刻的效果

公休

造成不便，敬請見諒。

顯示原始碼

HTML
<div class="wood_emboss">
  <span class="first">公</span>
  <span class="last">休</span>
  <div class="date">造成不便，敬請見諒。</div>
</div>CSS
.wood_emboss {
  background: #d1ac70;
  border: 10px solid #000;
  border-bottom: 5px solid #aa9170;
  border-right: 5px solid #aa9170;
  border-top: 5px solid #ebc993;
  border-left: 5px solid #ebc993;
  box-shadow: 0 2px 5px #ccc;
  color: #945d2d;
  font-family:"Kaisho MCBK1", serif;
  font-size: 80px;
  height: 150px;
  line-heihgt: 1;
  margin: 20px auto 0 auto;
  padding: 0;
  position: relative;
  text-align: center;
  text-shadow: 1px 1px 1px #f3e9da, -1px -1px 1px #957035;
  width: 260px;
}

.wood_emboss span{
  display: inline-block;
  position: absolute;
}

.wood_emboss .first{
  left: 55px;
  top: 0;
}

.wood_emboss .last{
  top: 25px;
  left: 130px;
}

.wood_emboss .date {
  bottom: 5px;
  font-size: 12px;
  left: 10px;
  position: absolute;
  text-shadow: 1px 1px 0 #f3e9da, -1px -1px 0 #957035;
}

※本原始碼的實際顯示尺寸會比範例要小一些

以CSS做出的時鐘

16時45分

顯示原始碼

HTML
<div class="clock">
  <div class="frame">
    <div class="hour"></div>
    <div class="minute"></div>
  </div>
  <div class="time">
    16<span class="unit">時</span>45<span class="unit">分</span>
  </div>
</div>CSS
.clock {
  color: #7c785a;
  font-family: "UD Shin Go Light", sans-serif;
  font-size: 46px;
}

.clock .frame {
  border: 3px solid #7c785a;
  border-radius: 50px;
  display: block;
  height: 94px;
  margin: 0 auto 5px auto;
  position: relative;
  width: 94px;
}

.clock .frame:after {
  background: #7c785a;
  border-radius: 5px;
  content: "";
  display: block;
  height: 10px;
  left: 42px;
  position: absolute;
  top: 42px;
  width: 10px;
}

.clock .frame div {
  border-radius: 3px;
  display: block;
  height: 72px;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 3px;
}

.clock .hour {
  background: -moz-linear-gradient(top, #fff,
      #fff 10%,
      #7c785a 10%,
      #7c785a 52%,
      #fff 52%,
      #fff);
  background: -webkit-gradient(linear,
    left top,
    left bottom,
    from(#fff),
    color-stop(0.1, #fff),
    color-stop(0.1, #7c785a),
    color-stop(0.52, #7c785a),
    color-stop(0.52, #fff),
    to(#fff));
  left: 45px;
  top: 11px;
  -moz-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.clock .minute {
  background: -moz-linear-gradient(top, #7c785a,
      #7c785a 52%,
      #fff 52%,
      #fff);
  background: -webkit-gradient(linear,
    left top,
    left bottom,
    from(#7c785a),
    color-stop(0.52, #7c785a),
    color-stop(0.52, #fff),
    to(#fff));
  left: 45px;
  top: 11px;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.clock .time {
  text-align: center;
}

.clock .time .unit {
  font-size: 28px;
  margin: 0 5px;
}

※本原始碼的實際顯示尺寸會比範例要小一些

滑鼠經過時文字大小會變化的按鈕

寄出信件

顯示原始碼

HTML
<a class="button">
  <span class="button_inner">
    寄出信件
  </span>
</a>CSS
.button {
  background: #5b9507 ;
  background: -moz-linear-gradient(top, #a3ea3f, #5b9507);
  background: -webkit-gradient(linear,
    left top,
    left bottom,
    from(#a3ea3f),
    to(#5b9507));
  border: 1px solid #487606;
  border-radius: 28px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 1px #fff;
  color: #fff;
  display: inline-block;
  font-family: "Jun 501", sans-serif;
  font-size: 26px;
  height: 56px;
  line-height: 56px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 1px #487606;
  width: 200px;
}

.button_inner {
  display: block;
  height: 56px;
  line-height: 56px;
  opacity: 0.9;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.button.hover .button_inner,
.button:hover .button_inner{
  opacity: 1;
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

※本原始碼的實際顯示尺寸會比範例要小一些

滑鼠經過時浮現說明文字的效果

植物圖鑑

虎耳草

原產於中國與日本，多生長在林下、灌叢、陰濕的岩石之地。在台灣亦多見於觀賞植物等。
葉狀似圓形（腎圓形），背面帶有紅色。作為中藥可祛風、清熱、涼血解毒。能治風疹、濕疹、中耳炎、咳嗽吐血等。

顯示原始碼

HTML
<div class="photo_container fade">
  <div class="label">植物圖鑑</div>
  <div class="photo">
    <img src="photo1.jpg" />
  </div>
  <div class="description">
    <div class="photo_title">虎耳草</div>
    <p>原產於中國與日本，多生長在林下、灌叢、陰濕的岩石之地。在台灣亦多見於觀賞植物等。<br />葉狀似圓形（腎圓形），背面帶有紅色。作為中藥可祛風、清熱、涼血解毒。能治風疹、濕疹、中耳炎、咳嗽吐血等。</p>
  </div>
</div>CSS
.photo_container.fade{
  background: #334006;
  border: 10px solid #000;
  border-radius: 6px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 500px;
}

.photo_container.fade *{
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.photo_container.fade img {
  height: 520px;
  margin: -10px 0 0 -10px;
  width: 520px;
}

.photo_container.fade.hover .photo img,
.photo_container.fade:hover .photo img{
  height: 500px;
  margin: 0 ;
  opacity: 0.5;
  width: 500px;
}

.photo_container.fade .label {
  color: #fff;
  font-family: "Ryumin Ultra KL", serif;
  font-size: 28px;
  left: 20px;
  letter-spacing: 6px;
  opacity: 1;
  position: absolute;
  top: 14px;
  z-index: 999;
}


.photo_container.fade .description {
  color: #fff;
  left: 0;
  opacity: 0;
  position: absolute;
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  text-align: left;
  top: 100px;
  transform: scale(0.95);
  width: 500px;
}

.photo_container.fade.hover .description,
.photo_container.fade:hover .description {
  opacity: 1;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
 transform: scale(1);
}

.photo_container.fade .description .photo_title{
  border-bottom : 4px solid #fff;
  font-family: "Ryumin Ultra KL", serif;
  font-size: 48px;
  margin: 0 20px 10px 20px;
  padding-bottom: 10px;
}

.photo_container.fade .description p{
  font-family: "Ryumin Medium", serif;
  font-size: 24px;
  margin: 0;
  padding: 20px;
}

※本原始碼的實際顯示尺寸會比範例要小一些

滑鼠經過時說明文字滑入的效果

植物圖鑑

三枝九葉草

小蘗科淫羊藿屬，多年生草本。莖高一尺餘，葉為二回掌狀複葉，自九小葉而成，故得其名。味辛、甘，性溫。有補腎助陽、袪風濕的功能。用於腎虛陽痿、腰膝無力、風寒、腎虛水腫、婦女更年期高血壓症等。

顯示原始碼

HTML
<div class="photo_container slide">
  <div class="label">植物圖鑑</div>
  <img src="photo3.jpg" class="front" />
  <div class="description">
    <div class="photo_title">三枝九葉草</div>
    <p>小蘗科淫羊藿屬，多年生草本。莖高一尺餘，葉為二回掌狀複葉，自九小葉而成，故得其名。味辛、甘，性溫。有補腎助陽、袪風濕的功能。用於腎虛陽痿、腰膝無力、風寒、腎虛水腫、婦女更年期高血壓症等。</p>
  </div>
</div>CSS
.photo_container.slide{
  background: #430b1d;
  border: 10px solid #000;
  border-radius: 6px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 500px;
}

.photo_container.slide .label {
  color: #fff;
  font-family: "AR Sinsu B5 Medium", serif;
  position: absolute;
  top: 14px;
  left: 20px;
  font-size: 32px;
  letter-spacing: 6px;
  opacity: 1;
  z-index: 999;
}

.photo_container.slide img {
  height: 540px;
  margin: -20px 0 0 -20px;
  width: 540px;
}

.photo_container.slide .description {
  color: #fff;
  left: 0;
  opacity: 0;
  position: absolute;
  text-align:left;
  top: 80px;
  -moz-transform: translate(100px, 0);
  -ms-transform: translate(100px, 0);
  -webkit-transform: translate(100px, 0);
  transform: translate(100px, 0);
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 500px;
}

.photo_container.slide .front {
  opacity: 1;
  -moz-transform: translate(10px, 0);
  -ms-transform: translate(10px, 0);
  -webkit-transform: translate(10px, 0);
  transform: translate(10px, 0);
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.photo_container.slide.hover .front,
.photo_container.slide:hover .front {
  opacity: 0.2;
  -moz-transform: translate(-20px, 0);
  -webkit-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
}

.photo_container.slide.hover .description,
.photo_container.slide:hover .description {
  opacity: 1;
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.photo_container.slide .description .photo_title{
  border-bottom : 4px solid #fff;
  font-family: "AR Sinsu B5 Medium", serif;
  font-size: 48px;
  margin: 0 20px 10px 20px;
  padding-bottom: 10px;
}

.photo_container.slide .description p{
  font-family: "AR Sinsu B5 Medium", serif;
  font-size: 26px;
  line-height: 1.35;
  margin: 0;
  padding: 20px;
}

※本原始碼的實際顯示尺寸會比範例要小一些

滑鼠經過時翻轉出現說明文字的效果

植物圖鑑

鈴蘭

含有強心苷類有毒物質Convallatoxin、Convallamarin和Convalloside的有毒植物，全草有毒，花、根毒性比較強。服用時可能造成噁心、嘔吐、腹瀉、頭暈、頭痛、心律不整、心衰竭等病症，嚴重時甚至可能致死。

顯示原始碼

HTML
<div class="photo_container turn">
  <div class="label">植物圖鑑</div>
  <img src="photo2.jpg" class="front" />
  <div class="description back">
    <div class="description_container">
      <div class="photo_title">鈴蘭</div>
      <p>含有強心苷類有毒物質Convallatoxin、Convallamarin和Convalloside的有毒植物，全草有毒，花、根毒性比較強。服用時可能造成噁心、嘔吐、腹瀉、頭暈、頭痛、心律不整、心衰竭等病症，嚴重時甚至可能致死。</p>
    </div>
  </div>
</div>CSS
.photo_container.turn {
  perspective: 800px;
  position: relative;
}

.photo_container.turn{
  background: #084138;
  border: 10px solid #000;
  border-radius: 6px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  width: 500px;
}

.photo_container.turn .label {
  color: #fff;
  font-family: "Outai Kaisho", sans-serif;
  font-size: 28px;
  left: 20px;
  letter-spacing: 6px;
  opacity: 1;
  position: absolute;
  text-shadow: 0 0 10px #000;
  top: 14px;
  z-index: 9999;
}

.photo_container.turn img {
  height: 520px;
  margin: -10px 0 0 -10px;
  width: 520px;
}

.photo_container.turn .front,
.photo_container.turn .back{
  left: 0;
  position: absolute;
  top: 0;
}

.photo_container.turn .front{
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  z-index: 999;
}

.photo_container.turn .back{
  opacity: 1;
  position: relative;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.photo_container.turn .description_container {
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn.hover .front,
.photo_container.turn:hover .front{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn.hover .back,
.photo_container.turn:hover .back{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn .description {
  color: #fff;
  text-align: left;
}

.photo_container.turn .description .photo_title{
  border-bottom: 4px solid #fff;
  font-family: "AR Leisu B5 Bold", serif;
  font-size: 48px;
  margin: 100px 20px 10px 20px;
  padding-bottom: 10px;
}

.photo_container.turn .description p{
  font-family: "AR Lishu U30 Medium", serif;
  font-size: 24px;
  margin: 0;
  padding: 20px;
}

※本原始碼的實際顯示尺寸會比範例要小一些