CSS3で簡単グラデーションボタン

CSS3 HTML5

うーん、HTML5はまだよくわからないけど、CSS3は簡単で面白かったのでメモ

とりあえずCSS3使って今日やってみたこと

  • 角を丸くする
  • テキストに影
  • グラデーション

結果としてはこんな風になります

http://kouichi0413.web.fc2.com/test/

FirefoxかSafariかGoogleChromeあたりで見れます。CSS3に対応したブラウザで見てください。

微妙に広告のせいでうまく動かないので広告の「閉じる」を押してください。

HTMLソース

とりあえず以下のようなHTMLを作成

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>CSS3</title>
<link href="css3.css" rel="stylesheet" type="text/css" />
</head>

<body>

<header>
	<h1>CSS3</h1>
	<span><a href="#" class="btn">ボタン</a></span>
</header>

</body>
</html>

CSSソース

btnクラスにボタンのデザインをCSSのみで実現

.btn {
	display: block;
	text-align: center;
	width: 190px;
	height: 20px;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid #dea304;
	padding: 5px;
	color: #fff;
	border-radius: 5px;/* ここからCSS3新機能 角を丸くします */ 
	-webkit-border-radius: 5px;/* 角丸Firefox用 */
	-moz-border-radius: 5px;/* 角丸Safari,Google Chrome用 */
	text-shadow: 1px 1px 1px #be7301;/* テキストにシャドウを指定 */
	background: -moz-linear-gradient(top, #fce5a7,  
		#fcce50 50%,  
		#f8b501 51%,  
		#fbde91);/* グラデーションFirefox用 */  
	background: -webkit-gradient(linear, left top, left bottom, from(#fce5a7),  
		color-stop(50%, #fcce50),  
		color-stop(51%, #f8b501),  
		to(#fbde91));/* グラデーションSafari,Google Chrome用 */
}
.btn:hover {/* こっちはロールオーバーした時の指定です。色以外は同じです。 */ 
	display: block;
	text-align: center;
	width: 190px;
	height: 20px;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid #ef9404;
	padding: 5px;
	color: #fff;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-shadow: 1px 1px 1px #be7301;
	background: -moz-linear-gradient(top, #fcdeaf,  
		#fcc15b 50%,  
		#fd9f0c 51%,  
		#fbd496);/* Firefox用 */  
	background: -webkit-gradient(linear, left top, left bottom, from(#fcdeaf),  
		color-stop(50%, #fcc15b),  
		color-stop(51%, #fd9f0c),  
		to(#fbd496));/* Safari,Google Chrome用 */
}

ふむ、なかなかソースの量は増えるけど、画像使わなくていいのはかなり武器になるかも。楽だし

次はHTML5のCANVASとか、試してみよう。