CSS3でロゴを動かす。

css3 html5

会社のコーポレートサイト作成の際、ロゴ部分に動きを持たせたい。
という要望を頂きました。
前回のブログと同じクライアント様です。

jQueryやその他のJavascriptで作る事も考えたのですが、
今回はCSS3で簡単な動きを実装してみる事にしました。

キーワードとしては、CSS3、hoverエフェクトです。

※IE8以前には対応していません。
　一応、動きはなしで同じように見えるよう作っています。

transformのscaleプロパティとborder-radiusを駆使する

調べてみると、今回はCSS3のscaleとborder-radiusの2つをメインに作っていけそうです。

と言っても、実際の手順としては
「CSS3 hoverエフェクト」のような単語で検索して、
SIMPLE ICON HOVER EFFECTSというサイトを見つけました。

ソースをダウンロードしてそこから不要なソースを検証しながら削除していくという順番でやっています。

今回のまとめは出来上がってから各ソースについて調べて書いたものです。

HTMLとCSSでロゴを表示

まずは、HTMLと通常のCSSでサイトを作ります。


HTMLはこんな感じで作りました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="component.css" />
</head>
<body>
<header>
<hgroup>
<h1 class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2a">
<a href="http://******.****.jp/" target="_blank" class="hi-icon hi-icon-cog">************</a>
</h1>
</hgroup>
</header>
</body>
</html>

記述としてはHTML5ですが、機能はほぼ使っていません。
記述が短くなるのと、headerぐらいです。

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="component.css" />
この部分がCSSへのリンクです。

component.cssが今回のメイン、動きの部分です。

まずはstyle.cssで基本的な作り。

body {
background:#eeeeee;
}
header {
width: 243px;
height: 243px;
margin:auto;
background:url("logo.png");
}
h1 a {
text-indent: -9999px;
display: block;
width: 243px;
height: 243px;
}

ここでもCSS3の機能はほぼ使っていません。
body {
background:#eeeeee;
}
#eeeeeeとしてますが、実際には背景画像がrepeatで入っています。

ではいよいよ、動きをつくって行きます。

CSS3でhoverエフェクトを追加

できあがりはこんな感じになります。


component.cssの中身はこうなっています。

.hi-icon-wrap {
text-align: center;
width: 243px;
height: 243px;
background:#f5f0cf;
border-radius: 50%;
behavior:url("0814_PIE.htc");
}
.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #f5f0cf;
}
.hi-icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.hi-icon:before {
font-family: 'ecoicon';
speak: none;
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hi-icon-cog:before {
content: "\e003";
}
/* Effect 2 */
.hi-icon-effect-2 .hi-icon {
color: #eea303;
box-shadow: 0 0 0 1px #37231a;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.hi-icon-effect-2 .hi-icon:after {
top: 0px;
left: 0px;
z-index: -1;
background:url("logo.png") no-repeat center top;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
}
/* Effect 2a */
.hi-icon-effect-2a .hi-icon:hover {
color: #eea303;
}
.hi-icon-effect-2a .hi-icon:hover:after {
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
}
/* Effect 2b */
.hi-icon-effect-2b .hi-icon:hover:after {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
-moz-transition: -moz-transform 0.4s, opacity 0.2s;
transition: transform 0.4s, opacity 0.2s;
}
.hi-icon-effect-2b .hi-icon:hover {
color: #f5f0cf;
}

イメージとしては、
背景色の上に画像を重ね、border-radiusで丸くします。
それをtransform:scaleで小さくするのをhoverとして組み込むと、
ポインタを置くとロゴが小さくなるという動きをします。

それぞれの機能は
border-radius→border-radius－CSS3リファレンス - HTMLクイックリファレンス
transform:scale→transform:scale()－CSS3リファレンス - HTMLクイックリファレンス
を参照。

まだまだ分かっていない部分でもあるので、
無駄な記述も多いはずですが…

と言うわけで今回は、
ロゴにCSS3で動きをつけるを実装しました。

TOPへ戻る

TOP