セールスプロモーション & Webトレンド最新情報
通常、ブロック要素を横並びにしたいときは『float』を使うことが多いと思います。しかしfloatには
といった面倒がつきまといますよね。そんな時は『display: inline-block;』の出番です。block要素のように高さや縦方向のpadding、marginが指定できる上に、inline要素のように横並びができ、しかも高さが異なるボックスがあってもレイアウトが崩れません。
CSS3でボタンを作るシリーズ最終回。
対応ブラウザ：Chrome, Safari, Firefox5+
今回はダメ押しの『animation』について。CSS3でのアニメーションといえば前回紹介した『transition』がありますが、『transition』で作成できるアニメーションは状態A→状態Bのような単純なものです。『animation』はキーフレームを使用してより複雑なアニメーションを作成できます。正直ボタン作るのにここまでする必要は無いと思いますが、いい機会なのでまとめて学んじゃいましょう。
CSS3でボタンを作るシリーズ第三回です。これまでに角丸、テキストシャドウ、ボックスシャドウ、グラデーションを使ってボタンを作成してきました。
過去記事
第一回：入門編（border-radius、text-shadow）
第二回：初級編（box-shadow、gradient）
今回はさらに
を使ってみましょう。まずは前回のおさらいから。
<a href="#" class="button">Button</a>
a.button{
display: inline-block;
padding: 0.5em 1em;
background: #cccccc;
border: 1px solid #666666;
border-radius: 10px;
color: #000000;
font-size: 30px;
line-height: 1;
text-shadow: 0px 1px 1px #ffffff;
-webkit-box-shadow: 0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
-moz-box-shadow: 0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
box-shadow: 0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#888888));
background-image: -moz-linear-gradient(top, #dddddd, #888888);
background-image: -o-linear-gradient(top, #dddddd, #888888);
}
CSS3でボタンを作るシリーズ第二回です。
前回は角丸ボックスとテキストシャドウを使いました。
前回記事
CSS3でかっこいいボタンを作ろう【第一回：入門編（border-radius、text-shadow）】
今回は少しだけレベルアップして
を使ってみたいと思います。
まずは前回の状態をおさらいしておきましょう。
<a href="#" class="button">Button</a>
a.button{
display: inline-block;
padding: 0.5em 1em;
background: #cccccc;
border: 1px solid #666666;
border-radius: 10px;
color: #000000;
font-size: 30px;
line-height: 1;
text-shadow: 0px 1px 1px #ffffff;
}
角丸ボックスとテキストシャドウでデザインされたシンプルな状態です。
それでは早速、このボタンに磨きをかけていきます。
