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

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が利用できるスマートフォンサイトでは簡単に使える部分ですね。

2018年7月
« 2月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

* RSS FEED

このサイトのトップへ