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: 10px 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;
}

※ソースコードはサンプルよりも見た目のサイズが小さくなります

シャドウを使った2重枠線

サマーバーゲン開催中

ソースを表示

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><span class="blue last">ン</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%;
}

Firefoxではご利用いただけません。

※ソースコードはサンプルよりも見た目のサイズが小さくなります

丸いワッペンのような表現

おうちで作れる和雑貨特集

ソースを表示

HTML
<div class="patch">
  <div class="patch_inner">
    <span class="catch">おうちで作れる</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: "Shin Maru Go Line", 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;
}

※ソースコードはサンプルよりも見た目のサイズが小さくなります

スーパーのチラシのような価格表示

山形県産

桃

398 円

ソースを表示

HTML
<ul class="price_lists">
  <li class="price_list">
    <div class="area">
      山形県産
    </div>
    <div class="product">
      桃
    </div>
    <div class="price">
      <span class="num">
        398
      </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: 'Jun 501', 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 Heavy KL", serif;
  font-size: 24px;
  margin: 0;
  padding: 20px;
}

※ソースコードはサンプルよりも見た目のサイズが小さくなります

マウスオーバーでスライドしてキャプション表示

植物図鑑

イカリソウ

花は赤紫色で春に咲き、4枚の花弁が距を突出し錨のような特異な形をしているためこの名がある。葉は複葉で、1本の茎に普通1つ出るが、3枚の小葉が2回、計9枚つく2回3出複葉であることが多い。東北地方南部以南の森林に自生し、園芸用や薬用に栽培されることもある。

ソースを表示

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>花は赤紫色で春に咲き、4枚の花弁が距を突出し錨のような特異な形をしているためこの名がある。葉は複葉で、1本の茎に普通1つ出るが、3枚の小葉が2回、計9枚つく2回3出複葉であることが多い。東北地方南部以南の森林に自生し、園芸用や薬用に栽培されることもある。</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: "Nachin", 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: "Nachin", serif;
  font-size: 48px;
  margin: 0 20px 10px 20px;
  padding-bottom: 10px;
}

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

※ソースコードはサンプルよりも見た目のサイズが小さくなります

マウスオーバーで回転してキャプション表示

植物図鑑

スズラン

強心配糖体のコンバラトキシン、コンバラマリン、コンバロシドなどを含む有毒植物。有毒物質は全草に持つが、特に花や根に多く含まれる。摂取した場合、嘔吐、頭痛、眩暈、心不全、血圧低下、心臓麻痺などの症状を起こし、重症の場合は死に至る。

ソースを表示

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>強心配糖体のコンバラトキシン、コンバラマリン、コンバロシドなどを含む有毒植物。有毒物質は全草に持つが、特に花や根に多く含まれる。摂取した場合、嘔吐、頭痛、眩暈、心不全、血圧低下、心臓麻痺などの症状を起こし、重症の場合は死に至る。</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: "Shin Maru Go Regular", 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: "Shin Maru Go Bold", serif;
  font-size: 48px;
  margin: 100px 20px 10px 20px;
  padding-bottom: 10px;
}

.photo_container.turn .description p{
  font-family: "Shin Maru Go Regular", serif;
  font-size: 24px;
  margin: 0;
  padding: 20px;
}

※ソースコードはサンプルよりも見た目のサイズが小さくなります