ITブログ

CSS3を使った「IT東京」のロゴの作り方

こんにちはみなさん、

今日はCSS3を使った「IT東京」のロゴの作り方を説明します。

1)まずは、普通のHTMLファイルで始めましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>IT-Tokyo</title>
    <link rel="stylesheet"href="it-tokyo.css"type="text/css" /> 
  </head>
  <body>
    <div id="header">
      <h1><a href="http://www.it-tokyo.com/blog"></a><span></span></h1>
    </div>
  </body>
</html>

ここまでは簡単ですね。ここでは、実は「header」が2つの平面で構成されています。

最初の部分は静的な部分です。この部分で静止画像が表示されます

<div id="header">
        ....                            
</div>

2つ目は動的な部分です

<h1><a href="http://www.it-tokyo.com/blog"></a><span></span></h1>

2)CSSで分かりやすくなると思います。

body {
  background:rgba(56, 102, 99, 0.99);
}

#header h1{
  width:277px;
  height:50px;
  padding:0;
  margin:250px auto;
  background:url(itt.png) no-repeat right top;
}

このCSSで「header」の静止画像の位置を定義します。

#header h1 a, #header h1 span{
  width:277px;
  height:50px;
  float:left;
  position:absolute;
  z-index:2;
}

これで「spanとリンク」の位置を定義します。

#header h1 span{
  background-position:left top;
  position:absolute;
  background:url(itt.png) no-repeat right top;
  -webkit-transition:all 300ms ease-in-out;
  -moz-transition:all 300ms ease-in-out;
  -o-transition:all 300ms ease-in-out;
  transition:all 300ms ease-in-out;
}

このCSSはアニメーション画像の特性を定義しますアニメーションを実現するために前と同じ画像を使用しています。

#header h1:hover span{
  -moz-transform:scale(1.2);
  -webkit-transform:scale(1.2);
  -o-transform:scale(1.2);
  -ms-transform:scale(1.2);
  transform:scale(1.2);
  opacity:0;
  z-index:1;
}

CSS3transformのscaleこの画像に効果が適用されます

 

ダウンロードしていただけますので、ぜひ試してみて下さい!

ITTokyo_logo.zip

お疲れ様でした。ご質問等あればコメントして下さい。

ITブログにTOP戻る           

comments powered by Disqus

最新の記事