calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

[続編] 効率的になった！最近のサイトで使われていたCSS小技集

  • 作成：2014/12/1
  • 更新：2014/12/01
  • Web制作 >
css_interactive_trends

前回（あのサイトでさりげなく使われていたCSS小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりとCSSのみで実現できる方法を書いておきます。

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

インタラクティブ

ボックス

UI

マウスオーバーとキャプション

インタラクティブ

１．マウスオーバーで自動スクロールさせる

autoscroll_m

最近、マウスオーバーで縦長のページを部分的に見せるWordPressテーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。

html

<div class="box-fixed">
  <div class="field-wrap">
    <div class="field-detail">
      <img src="img/long.png" >
    </div>
  </div>
</div>

css

.box-fixed {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.field-wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.field-detail {
  transition: all 1s;
}

.field-detail img {
  width: 100%;
}

.field-detail:hover {
  margin-top: -2000px;
  transition: all 15s;
  -webkit-transition: all 15s;
}

２．背景を固定し、ゴーストボタンを天地中央に配置

ghostbtn_m

画像を背景いっぱいまで広げ固定させ、天地中央に配置したゴーストボタンを配置する見せ方が近年では多くなってきました。background-attachment: fixed;で背景を固定しbackground-size: cover;で背景をピッタリ配置します。天地中央にしたいのでdisplay: table;を使います。ボタンの視認性を高めるために画像の上に透過色をのせています。

html

<div class="fixed-header">
  <p><span>SAMPLE</span></p>
</div>

css

.fixed-header {
  background: url(img/long.png) 0 0 no-repeat;
  background-attachment: fixed;
  background-size: cover;
  display: table;
  height: 200px;
  width: 100%;
}

.fixed-header p{
  background: rgba(0,0,0,.5);
  color: #fff;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.fixed-header span {
  border: 1px solid #fff;
  padding: 10px 20px;
}

上を利用して、WordPressのアイキャッチ画像を記事ごとに取得し背景に使うことも出来ます。background:url()は記事ごとに変更する必要があるので直接ソース内に記述してもいいですね。

<div style="background: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>) 0 0 no-repeat; background-attachment: fixed; background-size: cover; background-position: center; opacity: 0.9;">

ボックス

３．ボックスを左右中央に配置し、中を等幅にする

box-center_css3

floatを使わず横並びと均等配置させたいのでフレキシブルボックスレイアウトを使います。横並びは要素にdisplay: flex;と記述するだけで実現可能でしたよね！後は、justify-content: center;で中央に詰めて配置、後はwidthで横幅を指定すれば等幅になります。モバイル時にはdisplay: block;などで解除します。

html

<ul class="fbox">
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>

css

ul.fbox {
  display: flex;
  display: -webkit-box;/* Safari */
  list-style: none;
  padding: 0;
  justify-content: center;
  -webkit-box-pack: center;
}
  
ul.fbox li {
  background: #ccc;
  margin: 10px;
  padding: 10px;
  width: 20%;
  word-wrap: break-word;
}

４．ページネーション：中を等間隔にする

pagination-middle_css3

こちらもdisplay: flex;で横並び、justify-content: space-around;を使い等間隔にしています。justify-contentは詰め方を指定するプロパティです。

html

<ul class="pagination">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

css

ul.pagination {
  display: flex;
  list-style: none;
  justify-content: space-around;
  padding: 0;
  /* Safari 6.1+*/
  display: -webkit-flex;
  -webkit-justify-content: space-around;
  text-align: center;/*旧ブラウザ用*/
}
  
ul.pagination li {
  background: #ccc;
  display: inline-block;/*旧ブラウザ用*/
  margin: 10px;
  padding: 10px;
  word-wrap: break-word;
}

５．自動計算させる

auto-calculation_css3

割り切れないような中途半端な数字に対してはcalcで自動計算するという方法もあります。以下の例だと合計2%だけマージンを取って、width: calc(98% / 3);といった感じで、残りの98%を３分割します。両端にマージンを入れたくない時や、ボーダー分の幅を引きたい時に。

html

<ul class="cal">
  <li></li>
  <li></li>
  <li></li>
</ul>

css

.cal {
  list-style: none;
  padding: 0;
  overflow: hidden;
  zoom: 1;
}

.cal li {
  background: #222;
  margin-right: 1%;
  height: 30px;
  float: left;
  width: 32.6%;/*非対応ブラウザ用*/
  width: calc(98% / 3);
}

.cal li:last-child {
  margin-right: 0;
}

UI

６．ナビゲーション：下線を中心から開く

underscore-center

transformプロパティは拡大・縮小・回転などの変形処理を行うことができます。こちらはマウスオーバー時に中心からアンダーラインが広がっていくように見える方法です。ボーダーを使わず、要素を拡大・縮小させるtransform: scale();を使って開閉させます。

html

<nav class="gn">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

css

.gn ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav.gn li {
  display: inline-block;
  margin: 10px;
  padding: 10px;
}

nav.gn li a {
  color: #222;
  letter-spacing: 2px;
  position: relative;
  text-decoration: none;
}

nav.gn li a:hover:before {
  visibility: visible;
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}

nav.gn li a:before {
  background-color: #222;
  bottom: -5px;
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  visibility: hidden;
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transition: all .2s ease-in-out 0s;
  -webkit-transition: all .2s ease-in-out 0s;
}

７．カテゴリリスト：CSSで円と矢印を同時に作る

category-list_css3

before要素で円、transform: rotate(45deg)で矢印をつくり円の上に乗せます。矢印はborder-radiusで滑らかにします。同じスピードで戻るようにtransitionをhover以外にも指定します。

html

<ul class="arrow">
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>

css

.arrow li{
  background: #ddd;
  color: #9E9E9E;
  list-style: none;
  margin: 0 0 1px 0;
  padding: 15px;
  position: relative;
  transition: .5s linear;
}

.arrow li::before {
  background: #eee;
  border-radius: 50%;
  content: "";
  padding: 14px;
  position: absolute;
  right: 11px;
  top: 10px;
  width: 1px;
}

.arrow li::after{
  border-right: 4px solid #9E9E9E;
  border-top: 4px solid #9E9E9E;
  border-radius: 2px;
  content: "";
  margin: 0 0 0 10px;
  height: 10px;
  right: 20px;
  position: absolute;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 17px;
  width: 10px;
}

.arrow li:hover {
  background: #bbb;
  color: #fff;
  transition: .5s linear;
}

８．タグクラウド：CSSで三角形と円を同時に作る

tag-cloud_css3

擬似要素を使いbeforeで三角形、afterで円をつくりタグクラウドを作ります。

html

<div class="tagcloud">
  <a href="#">テキスト</a>
  <a href="#">テキスト</a>
  <a href="#">テキスト</a>
</div>

css

.tagcloud a {
  background-color: #ccc;
  border-radius: 2px 0 0 2px;
  color: #222;
  display: inline-block;
  height: 30px;
  margin: 5px 10px;
  line-height: 1.8;
  padding: 0 15px;
  position: relative;
  text-decoration: none;
  transition: all 1s linear;
}

.tagcloud a:hover {
  color: #3498db;
}

.tagcloud a:after {
  background: #eee;
  border-radius: 50%;
  content: "";
  padding: 5px;
  position: absolute;
  right: 0;
  top: 10px;
  width: 1px;
}

.tagcloud a:before {
  border: 15px solid transparent;
  border-left: 15px solid #ccc;
  content: "";
  position: absolute;
  right: -30px;
}

マウスオーバーとキャプション

９．グラデーションのキャプションを出す

gradient-caption_m

マウスキャプションの種類の中でもグラデーションをオーバーレイするのは、まだ少ないかなと思ったので。translateY()でY軸方向に移動させます。通常時はtranslateY(100%)で外に出し、マウスオーバー時に元の位置に戻しています。

html

<figure class="overray">
  <img src="img/test004.jpg" >
  <figcaption class="overray-cap"><p>キャプション</p></figcaption>
</figure>

css

figure.overray {
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

figcaption.overray-cap {
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8));
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transition: all .35s;
  width: 100%;
  -webkit-transition: all .35s;
}

figure.overray:hover .overray-cap {
  transition-delay: .1s;
  -webkit-transition-delay: .1s;
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

figure.overray img {
  vertical-align: bottom;
  width: 100%;
}

figcaption.overray-cap p {
  padding: 25% 0;
}

１０．一旦モノクロに変更し、マウスオーバー時に色をつける

gradient-caption_css3

横並びを実現するdisplay:boxを使い横に並べます。画像をグレースケールにする-webkit-filter: grayscale()の値をマウスオーバー時に0%に変更しグレーを解除させます。

html

<div class="sample-filter">
  <img src="img/test004.jpg" >
  <img src="img/test004.jpg" >
  <img src="img/test004.jpg" >
</div>

css

.sample-filter img {-webkit-filter: grayscale(100%);}
.sample-filter img:hover{
  filter: none;
  -webkit-filter: grayscale(0%);
}
.sample-filter {
  display: box;
  display: -webkit-box;
}
.sample-filter img{width: 30%; transition: .4s;}

１１．テキストと下線を中心から開く

underlinescale_m

マウスオーバー時に要素を拡大・縮小させるtransform: scale();を使って開閉させます。

html

<figure class="txline">
  <img src="img/test004.jpg" >
  <figcaption class="txline-cap">
    <p><span>CAPTION</span></p>
  </figcaption>
</figure>

css

figure.txline {
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

figcaption.txline-cap {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  transition: all .35s;
  -webkit-transition: all .35s;
  transform: scaleX(0); 
  width: 100%;
  -webkit-transform: scaleX(0); 
}

figure.txline:hover .txline-cap {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}

figure.txline img {
  vertical-align: bottom;
  width: 100%;
}

figcaption.txline-cap p {
  font-size: 2em;
  margin: auto;
  height: 10%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

figcaption.txline-cap span {
  border-bottom: 1px solid #fff;
  border-top: 1px solid #fff;
  padding: 10px;
}

以上、近い将来使う頻度が高くなるかもしれないCSS小技集でした。

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。