Tag Archives: CSS3

1

おさらいを兼ねてCSS3を試してみる①

no image

CSS3で出来る事をおさらいを兼ねて、試してみることにします。頻繁に使える物もあるので、是非参考にして頂ければと思います。RGBA色やHSLA色の設定は難しいですね。 sample：おさらいを兼ねてCSS3を試してみる ※実際のコードは下記になります。

1

HTML5とCSS3の参考サイト

no image

HTML5とCSS3に対応するサイトやブラウザも増えてきているので、参考になるサイトをまとめてみました。 株式会社あゆた HTML5サンプル集です。サンプルページを確認する事ができる上にダウンロードもできます。 CodeZine HTML5で進化したフォーム機能について説明してくれています。 かちびと. net HTML5のサンプルいくつか紹介してくれています。 NAVER まとめ HTML5×CSS3のサンプル＆ダウンロード25選 Html5 Collect Google I/O 2011のHTML5デモについて紹介。このデモは凄いです。 面白法人カヤック：HTML5の実力診断テスト HTML5とCSSの基本問題がクイズ形式で出題されます。 HTML5の基礎を学んだ方は是非トライしてみては如何でしょうか？

1

カヤックサイトで使用している CSS3テクニック

no image

css3で検索していると下記サイトがヒット！面白そうなので、早速実践してみました。 いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！（1/3）- ＠IT <style type=”text/css”> body { padding-top: 30px; background: white; } img { vertical-align: bottom; } #wrap2 { width: 500px; margin: 0 auto; } #wrap { width: 200px; margin: 0 auto 20px; } .box { position: relative; margin-bottom: … Continue reading →

1

css3でボタンを作成

no image

これからはちょっとしたボタン程度なら画像は使わなくてもいいかもしれませんね。表示確認したブラウザはFirefox、Chrome、Safariです。 <div id=”wrap”> <div class=”button aqua”> <div class=”glare”> <a href=”http://www.vi-de-bu.com/” target=”_blank”>美デブ</a> </div> </div> </div> <style type=”text/css” media=”screen”> #wrap { margin: 20px; } a { color: #FFF; text-decoration: none; display: block; } .button { width: 120px; height: 24px; padding: 5px 16px … Continue reading →

1

css3で角丸とフォーカス

css3で角丸とフォーカス

フォーム入力を見栄えよく、カスタマイズしちゃいましょう。 下記のスタイルを指定します。 [if lt IE 9]　 はIE9以降のIEにcss3の記述を適応させるためのjavascriptです。 :focus　でフォーム部分の背景色を指定します。 .cross　はフォーム入力箇所の角を角丸を指定します。 <!–[if lt IE 9]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]–> <style type=”text/css”> /*　フォーム入力：背景の色が変わります */ #focus input:focus{ background-color: #EAEDDE;  } /*　角丸にしてみました */ .cross{ -moz-border-radius: 4px;/*for Firefox*/ -webkit-border-radius: 4px;/*for Safari and chrome*/ border-radius: 4px;behavior: url(border-radius.htc);/*for IE*/ … Continue reading →