WEBデザインのパソコンスクールのディーシーエスは生徒2人へのライブ授業

css3が使えるブラウザが増え、wordpressもHTML5+css3をつかったテーマが増えてきました。
さて、前回 border-radius を使って、ボタンを角丸にしましたね。
それでは、今回は
・角丸
・グラデーション
・リンクにする
をやってみますね。

ボタン

これでいかがですか?
いろいろとお試しください。

グラデーションを入れ、角丸にして、あとは、4つが繋がった角丸ボタンでしょうか。
また次回書きますね。

css3を使って、角丸にすることは有名ですね。
以前までは、ボタン画像で制作して利用していた頃に比べると、大変さは激減しましたね。

以前なら、角丸にしても背景色に気をつかって…なんてやっていたころがありましたね。
まだ、PCサイトではすべてのブラウザに対応するために、ボタンも画像で制作しているでしょうが、スマートフォンサイトは大丈夫ですね。

スマホサイトを制作するのに、最初にcss3を試すのが、グラデーションでしょうか。
やはりグラデーションを自由に使えるのは嬉しいですね。
そして2番目に、この border-radius を使う角丸を表現することでしょうね。

私もそうでした。

では、早速

ボタン

見えていますか?

ブラウザが古い方は見えてないですかね。


こんな感じに見えているはずです。
(画像を貼り付けています。)

p.demo0510{
width:40px;
padding:5px;
color:#FFFFFF;
font-weight:bold;
background: -webkit-gradient(linear, left top, left bottom, from(#fb9ca3), to(#fe7c88));
background: -moz-linear-gradient(center top , #fb9ca3, #fe7c88);
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

border-radius:5px;を使うと角丸が表現できます。
css3が利用できるスマートフォンサイトでは簡単に使える部分ですね。

本日よりスマートフォンサイトが公開されました。
HTML5とcss3を利用したスマホサイトですね。
新しいタグの登場により、簡単に表示をされるようにしてあるというのが実際のところですね。

グラデーションをうまく利用して、丸みを帯びたデザインにすることができるので、どのスマホサイトもグラデと角丸が多いですね。
アコーディオンとトップイメージをスライドしています。
開校時期に合わせて制作していたので、小技は仕込んでいませんが、これから新しい機能を入れてみたいですね。
ご興味があれば、スマホサイト制作に挑戦してみて下さい。

劇的な変化は感じられないと思いますが、おもしろいと思います。
スマホサイトはこちら
(パソコンでも横長になりますが、見えるようになっています。)

http://dcs-nagoya.com/sp/

2012年5月
« 4月   2月 »
 123456
78910111213
14151617181920
21222324252627
28293031  

* RSS FEED

このサイトのトップへ