column

2014年気になった度肝級のCSS3ギミックを集めてみた、やってみた！

CATEGORY CSS PC & Web お勉強 TAG,

投稿日：2014年12月10日 更新日：

執筆者：

CSS3だけで出来るギミックを兎に角集めてやってみた！

animals1

2014年はCSS3の大躍進とでも言いましょうか、兎に角ギミックはCSS3で出来る限り作って行こうと言う動きが活発化された年でした。

 

とくに画像付きボタンとテキストの併用が目立っています。

フワッとしたフェードイン・アウトやラインを使ったギミックが特に格好いいと思います。

imgが大きくなったり、動いたりととても目に付くギミックになっていて、情報と上手くかみ合った広告展開がしやすくなってきたのかもしれません。

 

テキストとimgが重なることでSEO的にもテキストを隠さなくても良いし、正攻法のSEO対策もしやすく、尚かつ画像を使ったリッチコンテンツを上手く活用できる。

プラステキストが綺麗なまま表示出来るし、スマホ対策もCSSで移動できるのでスマホ専用コンテンツ的な扱いにもできるでしょう。

 

その中で気になるものを実際にやってみました！

 

Hover Effect Ideas

http://tympanus.net/Development/HoverEffectIdeas/index.html

lily

cssDemo
Tokyo Q Studio

マウスhoverで画像が右に、Textが下から

 

 

HTML


<div class="grid col-xs-24 col-sm-24 col-md-24 col-lg-24">
<figure class="effect-lily">
<img src="http://placeimg.com/530/397/people" alt="cssDemo">
<figcaption>
<div>
<h6>Tokyo Q <span>Studio</span></h6>
<p>マウスhoverで画像が右に、Textが下から</p>
</div>
<a href="http://tympanus.net/Development/HoverEffectIdeas/index.html" target="_blank" class="article_linker"></a>
</figcaption>
</figure>
</div>
<div class="clearfix"></div>

CSS


figure.effect-lily img {
  max-width: none;
  width: -webkit-calc(100% + 50px);
  width: calc(100% + 50px);
  opacity: 0.7;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px,0, 0);
  transform: translate3d(-40px,0,0);
}

figure.effect-lily figcaption {
  text-align: left;
}

figure.effect-lily figcaption &gt; div {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2em;
  width: 100%;
  height: 50%;
}

figure.effect-lily h6,
figure.effect-lily p {
  -webkit-transform: translate3d(0,40px,0);
  transform: translate3d(0,40px,0);
}

figure.effect-lily h6 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-lily p {
  color: rgba(255,255,255,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
  transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily:hover img,
figure.effect-lily:hover p {
  opacity: 1;
}

figure.effect-lily:hover img,
figure.effect-lily:hover h6,
figure.effect-lily:hover p {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

 

layla

cssDemo
Tokyo Q Studio

白線ギミックが格好いい！

 

 

 

HTML


<div class="grid col-xs-24 col-sm-24 col-md-24 col-lg-24">
<figure class="effect-layla">
<img src="http://placeimg.com/733/397/people" alt="cssDemo">
<figcaption>
<h6>Tokyo Q <span>Studio</span></h6>
<p>白線ギミックが格好いい！</p>
<a href="http://tympanus.net/Development/HoverEffectIdeas/index.html" target="_blank" class="article_linker"></a>
</figcaption>
</figure>
</div>
<div class="clearfix"></div>

CSS


figure.effect-layla {
  background: #18a367;
}

figure.effect-layla img {
  height: 390px;
}

figure.effect-layla figcaption {
  padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
  position: absolute;
  content: '';
  opacity: 0;
}

figure.effect-layla figcaption::before {
  top: 50px;
  right: 30px;
  bottom: 50px;
  left: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
  top: 30px;
  right: 50px;
  bottom: 30px;
  left: 50px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1,0);
  transform: scale(1,0);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

figure.effect-layla h6 {
  padding-top: 26%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-layla p {
  padding: 0.5em 2em;
  text-transform: none;
  opacity: 0;
  -webkit-transform: translate3d(0,-10px,0);
  transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h6 {
  -webkit-transform: translate3d(0,-30px,0);
  transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
  opacity: 0.7;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure.effect-layla:hover h6,
figure.effect-layla:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h6,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

 

zoe

cssDemo
Tokyo Q Studio

blogのサムネイルにも使えそう。
そうDesignが格好いいモノは機能性も高いのです！

 

HTML


<div class="grid col-xs-24 col-sm-24 col-md-24 col-lg-24">
<figure class="effect-zoe">
<img src="http://placeimg.com/733/397/people" alt="cssDemo">
<figcaption>
<h6>Tokyo Q <span>Studio</span></h6>
<p class="icon-links">
<a href="#"><i class="fa fa-google-plus-square"></i></a>
<a href="#"><i class="fa fa-facebook-square"></i></a>
<a href="#"><i class="fa fa-twitter-square"></i></span></a>
</p>
<p class="description">blogのサムネイルにも使えそう。<br>そうDesignが格好いいモノは機能性も高いのです！</p>
</figcaption>
</figure>
</div>
<div class="clearfix"></div>

CSS


figure.effect-zoe figcaption {
  top: auto;
  bottom: 0;
  padding: 1em;
  height: 3.75em;
  background: #fff;
  color: #3c4a50;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

figure.effect-zoe h6 {
  float: left;
}

figure.effect-zoe p.icon-links a {
  float: right;
  color: #3c4a50;
  font-size: 1.4em;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
  color: #252d31;
}

figure.effect-zoe p.description {
  position: absolute;
  bottom: 8em;
  padding: 2em;
  color: #fff;
  text-transform: none;
  font-size: 90%;
  opacity: 0;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h6,
figure.effect-zoe p.icon-links a {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,200%,0);
  transform: translate3d(0,200%,0);
}

figure.effect-zoe p.icon-links a span::before {
  display: inline-block;
  padding: 8px 10px;
  font-family: 'feathericons';
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-eye::before {
  content: '\e000';
}

.icon-paper-clip::before {
  content: '\e001';
}

.icon-heart::before {
  content: '\e024';
}

figure.effect-zoe h6 {
  display: inline-block;
}

figure.effect-zoe:hover p.description {
  opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h6,
figure.effect-zoe:hover p.icon-links a {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h6 {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

 

Oscar

cssDemo
Tokyo Q Studio

グラデーションがかかって画像に色気が出ます。

 

 

HTML


<div class="grid col-xs-24 col-sm-24 col-md-24 col-lg-24">
<figure class="effect-oscar">
<img src="http://placeimg.com/733/397/people" alt="cssDemo">
<figcaption>
<h6>Tokyo Q <span>Studio</span></h6>
<p>グラデーションがかかって画像に色気が出ます。</p>
<a href="http://tympanus.net/Development/HoverEffectIdeas/index.html" target="_blank" class="article_linker"></a>
</figcaption>
</figure>
</div>

CSS


figure.effect-oscar {
  background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
  background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}

figure.effect-oscar img {
  opacity: 0.9;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-oscar figcaption {
  padding: 3em;
  background-color: rgba(58,52,42,0.7);
  -webkit-transition: background-color 0.35s;
  transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #fff;
  content: '';
}

figure.effect-oscar h6 {
  margin: 20% 0 10px 0;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0);
  transform: scale(0);
}

figure.effect-oscar:hover h6 {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure.effect-oscar:hover figcaption {
  background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
  opacity: 0.4;
}

 

Roxy

cssDemo
Tokyo Q Studio

画像動くし枠が付いたテキストで分かりやすい

 

 

HTML


<div class="grid col-xs-24 col-sm-24 col-md-24 col-lg-24">
<figure class="effect-roxy">
<img src="http://placeimg.com/733/397/people" alt="cssDemo">
<figcaption>
<h6>Tokyo Q <span>Studio</span></h6>
<p>画像動くし枠が付いたテキストで分かりやすい</p>
<a href="http://tympanus.net/Development/HoverEffectIdeas/index.html" target="_blank" class="article_linker"></a>
</figcaption>
</figure>
</div>

CSS


figure.effect-roxy {
  background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
  background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}

figure.effect-roxy img {
  max-width: none;
  width: -webkit-calc(100% + 60px);
  width: calc(100% + 60px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-50px,0,0);
  transform: translate3d(-50px,0,0);
}

figure.effect-roxy figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #fff;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-20px,0,0);
  transform: translate3d(-20px,0,0);
}

figure.effect-roxy figcaption {
  padding: 3em;
  text-align: left;
}

figure.effect-roxy h6 {
  padding: 30% 0 10px 0;
}

figure.effect-roxy p {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
}

figure.effect-roxy:hover img {
  opacity: 0.7;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

 

Romeo

cssDemo
Tokyo Q Studio

ラインがクロスに変化するギミック・・・
格好いい！！

 

 

HTML


<div class="grid col-xs-24 col-sm-24 col-md-24 col-lg-24">
<figure class="effect-romeo">
<img src="http://placeimg.com/733/397/people" alt="cssDemo">
<figcaption>
<h2>Wild <span>Romeo</span></h2>
<p>ラインがクロスに変化するギミック・・・<br>格好いい！！</p>
<a href="http://tympanus.net/Development/HoverEffectIdeas/index.html" target="_blank" class="article_linker"></a>
</figcaption>
</figure>
</div>

 

CSS


figure.effect-romeo {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

figure.effect-romeo img {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,0,300px);
  transform: translate3d(0,0,300px);
}

figure.effect-romeo:hover img {
  opacity: 0.6;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 1px;
  background: #fff;
  content: '';
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
}

figure.effect-romeo:hover figcaption::before {
  opacity: 0.5;
  -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
  transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure.effect-romeo:hover figcaption::after {
  opacity: 0.5;
  -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
  transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure.effect-romeo h6,
figure.effect-romeo p {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-romeo h6 {
  -webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
  transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure.effect-romeo p {
  padding: 0.25em 2em;
  -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
  transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}

figure.effect-romeo:hover h6 {
  -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
  transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure.effect-romeo:hover p {
  -webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
  transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}

 

Lexi

cssDemo
Tokyo Q Studio

サークルギミックが新鮮。これも使えそう！

 

 

HTML


<div class="grid col-xs-24 col-sm-24 col-md-24 col-lg-24">
<figure class="effect-lexi">
<img src="http://placeimg.com/733/397/people" alt="cssDemo">
<figcaption>
<h6>Tokyo Q <span>Studio</span></h6>
<p>サークルギミックが新鮮。これも使えそう！</p>
<a href="http://tympanus.net/Development/HoverEffectIdeas/index.html" target="_blank" class="article_linker"></a>
</figcaption>
</figure>
</div>

CSS


figure.effect-lexi {
  background: -webkit-linear-gradient(-45deg, #000 0%,#fff 100%);
  background: linear-gradient(-45deg, #000 0%,#fff 100%);
}

figure.effect-lexi img {
  margin: -10px 0 0 -10px;
  max-width: none;
  width: -webkit-calc(100% + 10px);
  width: calc(100% + 10px);
  opacity: 0.9;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(10px,10px,0);
  transform: translate3d(10px,10px,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-lexi figcaption::before,
figure.effect-lexi p {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-lexi figcaption::before {
  position: absolute;
  right: -100px;
  bottom: -100px;
  width: 300px;
  height: 300px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
  content: '';
  opacity: 0;
  -webkit-transform: scale3d(0.5,0.5,1);
  transform: scale3d(0.5,0.5,1);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

figure.effect-lexi:hover img {
  opacity: 0.6;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-lexi h2 {
  text-align: left;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(5px,5px,0);
  transform: translate3d(5px,5px,0);
}

figure.effect-lexi p {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 1.5em 1.5em 0;
  width: 140px;
  text-align: right;
  opacity: 0;
  -webkit-transform: translate3d(20px,20px,0);
  transform: translate3d(20px,20px,0);
}

figure.effect-lexi:hover figcaption::before {
  opacity: 1;
  -webkit-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
}

figure.effect-lexi:hover h2,
figure.effect-lexi:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

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

http://commte.net/blog/archives/4887

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

SAMPLE

HTML


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

CSS


.fixed-header {
  background: url(https://placeimg.com/733/397/people) 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;
color: #fff;
}

 

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

HTML

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で円と矢印を同時に作る

  • xxxx
  • xxxx
  • xxxx
  • xxxx
  • xxxx

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

後書き

と言った具合に矢継ぎ早にまとめてみました。

２つのサイトからの引用ですがとてもまとめられており本当に勉強になりました。

こういったギミックを装備することで1段階上のサービスを提供できるようになるでしょう。

 

まだまだまとめたいモノがありますが、それらは次回の講釈で・・・。

コメントを残す

関連記事

PREV

1分でポリゴンデザイン！誰にでも出来る簡単無料アプリ「DMesh」を使ってみた

NEXT

ロシア製マルウェア「SoakSoak」がWordpressのサイトを襲撃！Slider Revolution使ってる人は注意

2014年気になった度肝級のCSS3ギミックを集めてみた、やってみた！

side bar

メニューはこちら

メニューはこちら