あと一品欲しい時に☆だし卵ボール
★2012.2.28話題入り★
酒のつまみにもピッタリ♪彩りも良く丸くて可愛いだし卵☆冷めても美味しいよ♪ぜひお試しを♡材料 （ 2人分 ）
卵2個カニカマ2本だし汁大さじ１みりん小さじ２醤油小さじ１塩少々小ネギお好みで
1
お鍋に湯を沸かす。
カニカマは小さく切っておく。
小ネギ以外をボールに入れ混ぜておく。
2
湯飲み茶わんやココットなどに、卵液を入れられる様にラップをセットし、均等に卵液を入れる。
3
写真の様に卵液が漏れないよう輪ゴムでとめる。
※なるべく卵液ギリギリで☆
4
沸騰したお湯に入れる。最初表面が少し固まるまではラップの先端を持ちながら茹でる。それ以降は放して8分茹でる。
5
ラップを外し、お好みで小ネギを散らして完成です(^ω^)
冷めても美味しくいただけます♡
CSSでリストをパンくずリストにする【1】
前々回の応用編ということで再びリスト、<ol>と<li>を扱っていきます。
前々回は<li>を横並びに表示するテクニックをご紹介しましたが、これをちょっと応用すればパンくずリストがさくっと作れます。
パンくずリストとはトピックパスとも言われ、Webサイトの構造を表すリストのことで、
「今、自分がサイト内のどこを閲覧しているか」
を簡単に確認できるというメリットがあります。
こういうやつですね。
どの要素でマークアップするのが適当かという議論もありますが、ここでは
<ol>と<li>でやってみたいと思います。<div class="topicpath"> <ol> <li>トップページ</li> <li>講座一覧</li> <li>Dreamweaver</li> <li>CSS</li> </ol> </div>XHTMLの構造は前々回とほとんど同じですが、
<ul>ではなく、<ol>を使っている点が少し違います。<ol>は、順番ありのリストです。サイトの構造を表すという意味では順番がないよりはあったほうがしっくりする気がします（やや弱気）。横並びにするだけであれば
displayプロパティをinlineにするだけで解決ですが、今回はパンくずリストなので要素と要素の間に「 > 」こういう記号を入れたいわけです。XHTML文書内に単純に記述してしまう方法もありますが、記号自体には何ら意味がないので、できればCSSで実現したほうがいいと思います。
ということで今回のポイントは、
『contentプロパティとbefore疑似要素を使って、要素の間に記号を入れる！』
です。
contentプロパティは、要素の前か後に文字や画像（つまりコンテンツ）を追加する、という役割を持っており、beforeまたはafter疑似要素と組み合わせて使います。そのまんまですが、
- beforeであれば要素の前
- afterであれば要素の後
となります。
こうしたい場合、単純に考えると要素の後に「 > 」を加えてやればよさそうなのでやってみます。
.topicpath ol li { /* liを横並び＆ブレットを消す */ display: inline; list-style-type: none; } .topicpath ol li:after { /* liの後に記号追加 */ content:" > "; }
するとだいたいこんな感じになるはずです。問題は最後の要素にも「 > 」が入ってしまう点です。これはヘンなので消したいところですが、残念ながらCSS2.1のセレクタでは「最後の要素だけ」というのが指定できないので す。（CSS3ではできるようになります。）
しかし、「最初の要素だけ」というのはCSS2.1でも指定できるので、先ほどとは逆に要素の前に「 > 」を加えて、先頭のみ消す、という方法をやってみます。
.topicpath ol li { /* liを横並び＆ブレットを消す */ display: inline; list-style-type: none; } .topicpath ol li:before { /* liの前に記号追加 * content: " > "; } .topicpath ol li:first-child:before { /* 最初のliだけcontentを消す */ content: none; }このfirst-childというのは疑似クラスの1つで、ある要素内の最初の要素のみを指します。つまり今回は<ol>の中の一番最初 の<li>を指しています。そして
contentプロパティをnoneとして、「 > 」を消しているわけです。が、一見スマートなこの方法、実は現状では問題だらけです。
- before疑似要素はIE6およびIE7が未対応
- first-child疑似クラスはIE6が未対応（IE7はOK）
- contentプロパティnoneはFirefox3、IE8以外未対応
ということで「使えない！」という結論が出てしまいそうですが、とりあえず最新のブラウザーだけでも何とかするのであれば、
.topicpath ol li { /* liを横並び＆ブレットを消す */ display: inline; list-style-type: none; } .topicpath ol li:before { /* liの前に記号追加 * content: " > "; } .topicpath ol li:first-child:before { /* 最初のliだけcontentを消す */ content:""; }ちょっとかっこわるい？かもしれませんがこのように空白を入れてしまうのが手っ取り早いかもしれません。これで、下記のブラウザーは対応できます。
- Firefox 3
- Internet Explorer 8
- Safari 3
- Google Chrome
- Opera 9
Comments [0]
漂白剤について
漂白剤は大きく分けて、「酸化型漂白剤」と「還元型漂白剤」があり、一般的に酸化系漂白剤があり、家庭用としては主に「酸化型」のものが使われています。この酸化型の中には「塩素系」と「酸素系」がります。酸化漂白は、相手に酸素を与えて色素を破壊し、還元漂白は、相手から酸素を奪って色素を破壊します。
酸素が色素を破壊するイメージ
分類 漂白剤 特徴 酸
化
型塩
素
系次亜塩素酸ナトリウム
・液体で使いやすく、漂白力が強い
・塩素系の家庭用品で多く使用されている
ジクロロイソシアヌル酸塩
・家庭用クレンザーなどに配合される
亜塩素酸ナトリウム
・酸性側使用での繊維の脆化が少ない
・工業的精錬、漂白に使用される
酸
素
系過酸化水素
・繊維に対する影響が少ない。
・毛・絹の漂白や色柄物の漂白に適している。
過炭酸ナトリウム
・毛・絹以外の繊維に使用
・色柄物に使用できる。過ホウ酸ナトリウム
同上
過酢酸
・天然繊維、合成繊維に使用
・漂白力が強く、工業的に使用される
環
元
型ハイドロサルファイト
・天然繊維、合成繊維に使用
・鉄分による黄変、樹脂加工の黄変に効果的
二酸化チオ尿素
同上
酸化型漂白剤
酸化型の中には「塩素系」と「酸素系」がります。
Comments [0]
■アドバイス
貯蓄がないとお悩みの阿部さんも、いよいよ財形貯蓄をスタートさせたのですね。実家暮らしのメリットを生かして、これからコツコツと積立てていきましょう。
そして、貯蓄が不十分なときこそ、いざというときの備えは保険でしっかり準備しておきたいところです。３０代の場合、女性特有の病気も多いことから、男性より女性の方が入院しやすい傾向にあるので、予防や早期発見も心がけましょう。
阿部さんは会社員で健康保険に加入しているので、万一、長期入院などをした場合には高額療養費や傷病手当金など健康保険からの給付が見込めます。医療保険では差額ベッド代や雑費などに備えて入院１日５０００円を目安に準備するといいでしょう。
阿部さんのお悩みは、更新型か終身型のいずれを選択するかという点ですね。まず、それぞれのメリット・デメリットを確認しておきましょう。
５年、10年と一定期間ごとに更新していく更新型は、年齢が若いうちは保険料が安いので、家計が厳しい人には便利です。更新時期に新しい保障に切り替えしやすいメリットもありますが、更新するたびに保険料が高くなることや、最長で80歳または90歳までと期限が設定されているので、長生きすると保障がなくなってしまう点が心配な要素です。
終身型は一生涯の保障が確保でき、保険料が変わらないのがメリットです。しかし、６０歳払込満了のタイプでは、将来の保険料を前払いするので途中で解約すると損をするケースもあります。終身払いのタイプは長生きすればするほど保険料をたくさん支払わなければならなくなります。
また、終身タイプの場合、将来インフレで金銭価値が変わるかもしれない、医学の進歩などで新しい保障が開発されるかもしれないといったことも心配されています。ただ、この点に関しては、将来物価が上がったら保障を増額することで対応可能でしょうし、新しい保障が開発された場合も既存商品の例をみると特約で保障を追加するような対応をとっています。そのため基本となる入院・手術給付金を確保しておけば、その後もニーズに合わせて保障の増額が可能と思われます。
更新型と終身型では、生涯支払う保険終身型では保険料を60歳までに払い終えるタイプとので、それらと更新型の３パターンで比較してみます。
下記は東京海上日動あんしん生命のメディカルミニに30歳で加入した場合の保険料総額です。メディカルミニは日帰り入院から１入院１２０日までの保障で、通算７３０日までの保障です。入院日額５０００円、７０００円、１万円の３タイプがありますが、更新型の入院日額５０００円は４４歳からの加入となるため、今回は入院日額７０００円で比較してみます。支払保険料総額の比較（30歳女性の場合）
保険料参考：東京海上日動あんしん生命メディカルミニ入院日額7,000円タイプ
(1)更新型 (2)終身型（終身払い） (3)終身型（60歳払済） 保険料月額 累計 保険料月額 累計 保険料月額 累計 30-39歳 2121 254,520 3.654 438,480 5,887 706,440 40-49歳 2506 555,240 3,654 846,960 5,887 1,412,880 50-59歳 3458 970,200 3,654 1,315,440 5,887 2,119,320 60-69歳 5887 1,676,640 3,654 1,753,920 0 2,119,320 70-79歳 10115 2,890,440 3,654 2,192,400 0 2,119,320 ３０歳、４０歳の月々の保険料は、(1)更新型が最も安くなっており、(2)終身型終身払いの５８％、(3)６０歳払い済みの３６％の保険料ですみます。６０歳までは更新型が月々、累計とも一番少ない保険料となっています。
しかし、更新型は６０歳になる５０歳のときの保険料よりも１．７倍高くなり、７０歳でもさらに１．７倍と大幅にアップします。
累計保険料では、７０歳の時点で終身払いを追い抜き、７３歳で６０歳払い済みを追い越します。それ以上長生きした場合には保険料累計が最も高くなるというわけです。女性の平均寿命は８５歳。更新型で継続していくと老後の負担が大きくなることは避けられないでしょう。
終身型どうしで比べてみると、(2)終身払いは７７歳で(3)60歳払い済みを追い抜きます。平均並みに生きるなら(3)終身型の６０歳払い済みがもっとも保険料総額が少なくてすむ方法です。ただし、これは同じ保険会社の同じ商品で比較した場合です。同一商品でも加入年齢が遅くなると、追い越す年齢も遅くなります。終身払いしかない商品、解約返戻金のある商品と無い商品、特約が初めからセットされている商品などがありますので、単純な比較は難しいですが、希望の商品の保険料総額を一度計算してから判断するのが望ましいでしょう。
例えば、オリックス生命の入院保険ｆｉｔは、５日以上の入院で５日目から保障、１入院あたりの限度日数は６０歳まで３０日、それ以降は９０日までとなっています。入院日額５０００円、終身払いタイプの保険料は１６１０円（３０歳女性インターネット申込割引適用）、８０歳までの保険料総額は９７万円です。６０歳払い済みタイプでは月々２２９０円、総額では８２万円です。阿部さんの場合、現在家計が厳しいかもしれませんが、終身医療保険も２０００円～３０００円で加入できるので、いまのうちに一生の保障を確保しておくのが安心かと思います。また、貯蓄を増やすこともリスクマネジメントの１つです。保障としては終身医療保険を優先し、ガンの心配等があるなら収入がアップしてきたらガン保険の加入を検討されるといいでしょう。
Comments [0]
簡単缶詰おつまみレシピ 鯖の缶詰 ３種類
2009年12月15日とにかくちょっと飲みたい時に缶詰は非常にありがたい。保存は利くし、工夫をすればかなり美味しくなる。そんな中でおつまみにおすすめな定番といえば、鯖の水煮だ。いやほんと鯖の水煮を甘くみてはいけない。ほんとに美味いのだ。そして何より安くて量がある。そんな鯖の缶詰通称サバ缶にちょっと味付けをしてみたおつまみがこちら。その１ バター醤油味作り方はいたって簡単。電子レンジで温めたサバにバターをのせ醤油をかけるだけ。さらにサバが濃厚になって旨い。缶詰にはいっている汁も一緒にバターに溶かすのがポイント。その２ マヨネーズのせ美味しいことは美味しいけどなんだかツナっぽくなっている。いや美味しいことは美味しいのだけど。その３ ポン酢これが一番美味しいかも！生臭さがなくなってさっぱりと美味い！まさにシンプルイズベスト！そうなのだ。さばの水煮はとくに何もしないで、そのままでも美味しいのだ。ただ冷たいままより温めた方が美味しいのは確か。ちなみに電子レンジであたためるときは油がはねるので注意。そんなサバの缶詰もおつまみと一緒にいただいたのはキリンの大正ビールと明治ビール。大正ビールすっきりとした苦みでキレが良く美味しい。好きな感じ。明治の方は結構酸味が強くなっている。足して２で割ると今のキリン？ちなみにこの３つのおつまみ、１つの缶詰で作れた。一缶で２杯はビールを飲めるほどのおつまみ力のあるサバ缶。これからもいろいろなバリエーションを考えられそうだ。
Comments [0]
せっけん洗濯
洗濯槽のお掃除記事は何度も書いてきましたが
そういえばお洗濯そのものは一度も書いてなかったです。というわけで、私のお洗濯術を記事にしてみました。
まず私が使っているのは純粉せっけんではなく
液体の複合せっけんです。
ミヨシ「洗濯用液体複合せっけん」
「石けん成分を主体にヤシ油石けんカス分散財を配合したもの。」
界面活性剤（３８％）
上記のうち 純石けん分（２７％ 脂肪酸カリウム）
純石けん分以外の界面活性剤（１１％ 脂肪酸アルカノールアミド）アルカリ剤（炭酸塩） 可溶化剤
良い点は複合なだけあってカスが出にくいこと、
液体なので溶け残りの心配がないこと。せっかく純粉せっけんもお掃除用で持っているので
統一すれば無駄がないのですが
以上の点から長年愛用しています。複合石鹸とは、合成と純せっけんの中間みたいな存在かな。
合成洗剤から純せっけんに乗り換える前に
一度お試しされるといいかもしれません。1.クエン酸大匙１を柔軟仕上剤ポケットに投入
ゆりのかさん伝授です。
クエン酸は柔軟剤代わり、またせっけんカスを分解するので
槽のカビ防止、溶け残り防止にもなります。
2．お水を入れます。
私は風呂の残り湯を使っています。
この時、水位は少なめの１７Ｌもしくは３０Ｌに設定します。
洗濯物はまだ入れていません。
お湯を入れている時、ジョロジョローという音から
ジョボジョボというある程度水量が溜まった音に
変わるまで注ぎ続けます。水位が貯まらないうちにせっけんを投入しても
十分に泡立ちません。
バブルバスを作るのと同じ原理。3．洗剤を投入
音がジョボジョボになるくらい溜まったら
キャップ１弱の石鹸を投入。
本来はキャップ１．５杯なのですが、重曹があらかじめ大匙２杯
入っているのでせっけんの量を節約します。
4．泡立て
最低水位で２分ほど運転をして
十分に泡立たせます。
ここまでモコモコに泡立たせます。
この泡立ちが一番のポイントです。人形は顔が命、せっけんは泡が命。
で、ここで面倒ですが
いったん２分ほど運転してしまっているので
スイッチを切ります。６．洗濯物を投入。
再度スイッチを入れなおし、洗濯物を投入します。
大きいもの、重たいものから入れて
小物は一番最後に。
水位は沢山いれたので５１Lです。
自動水位だと既に水が入っているので
有無をいわさず５１Lになるので
少なめのときは目分量で４１Lにしたりします。
（下着類などありませんので安心してご覧ください。）
投入後も泡が消えていないので合格。
泡立たせ方がハンパだと、この時に全部泡がなくなってしまいます。
この後は普通に脱水までおまかせ。
それから、週に１（今の季節は２回）回は
洗濯槽そのものを乾かすために、何もいれない状態で
風乾燥をします。
これ、無駄なようでいてやるのとやらないのとでは
ニオイ対策に大きな違いがあることが
皆さんとのコメントのやりとりでわかりました。もしも乾燥機能がない場合は、何も入れずに脱水数分でも
やると違うと思います。
（機種によってはカラ脱水は火災になるかもしれないので、よくお調べください。）時間も手間もかかりますが
仕上がりや、洗濯槽のカビやニオイなどなど
総合的に考えると今の方法が一番自分に合ってると思います。アワアワ洗濯はせっけんに限らず、合成洗剤でも
有効な方法だと思います。お洗濯にスランプの方にちょっとは
ヒントになるとよいのですが・・・ランキングに参加しています。よろしければ応援の投票（クリック）をお願いし
Comments [0]
・ ガラス絵の具
・ LEDキャンドル
・ アクリル容器
・ 黒いビニールテープ←手持ち
ガラスの器を使った方が
より素敵にできると思いますが、
うちの３歳児も扱う事を考えて
今回はアクリル容器を使うことにしました。
これで
子供に落とされても安全～♪ｗ
●作り方
１ ： 黒のビニールテープを細長く切って
アクリル容器に貼る
好みの大きさに貼っちゃってください。
私はフリーハンドで適当に切っちゃいました。
ランダム具合も
いい味になってくれる・・・ハズ！ｗ
２ ： ガラス絵の具で好みの色を塗る
塗ったった！！
一気にガラスチック！(°∀°)b
塗ってすぐは透明感はありません。
乾くと透明になります。
ただ、色によっては
透明にならないタイプもありました。
私の購入したガラス絵の具だと
白・黒・青は
透明になりませんでした。
でも他の絵の具にちょっと混ぜたりすると
半透明にできたりするので
お好みで調合できますよー。
はい、点灯～☆
キャンドル出来上がり～☆
Comments [0]
KDDIは1月16日、通信サービスのブランド「au」のロゴを一新すると発表した。各サービス名の変更も行う。
新ロゴは、従来のオレンジ色を継承しつつ、筆記体を採用した。「今までのオレンジを継承し、力強く、ダイナミックでかつ洗練された筆記体のデザインを採用した」という。
これまで「au one ○○」としていたサービス名称は「au ○○」に変更する。「au one ID」は「au ID」となる。
CMキャラクターとして伊勢谷 友介さん、井川 遥さん、剛力 彩芽さん、「巨人の星」の星飛雄馬を起用し、1月21日から新CMを放映する。
Comments [0]
5つの効果で作る、よく使うCSS3ボタンデザインサンプル集
CSS3によって、グラデーションや角丸などの様々なデザイン表現を、画像で書き出すことなく表現出来るようになりました。
ここではボタンデザインの際に役立つ5つの効果をご紹介します！
当記事のサンプルについて
すべてのサンプルは下記のHTMLを使用しております。
1aclass="btn"href="#">LinkTexta>また、全てのサンプルに共通で下記のスタイルを適用しております。
1.btn {
2text-decoration: none;
3font-weight: bold;
4text-align: center;
5font-size: 13px;
6display: block;
7}1.線
ボタンを枠で囲むことができます。
太さ、線種、色を上下左右で個別に指定できるので、線だけで立体感を出すことができます。
※1.線に関してはcss2で表現可能です。
1.btn {
2background: #EEE;
3border: 1px solid #DDD;
4color: #111;
5width: 100px;
6padding: 10px 0;
7}
1.btn {
2background: #EEE;
3border: 3px solid #DDD;
4color: #111;
5width: 100px;
6padding: 10px 0;
7}
01.btn {
02background: #EEE;
03border-top: 1px solid #DDD;
04border-left: 1px solid #DDD;
05border-right: 1px solid #BBB;
06border-bottom: 1px solid #BBB;
07color:#111;
08width: 100px;
09padding: 10px 0;
10}
01.btn {
02background: #EEE;
03border-top: 3px solid #DDD;
04border-left: 3px solid #DDD;
05border-right: 3px solid #BBB;
06border-bottom: 3px solid #BBB;
07color:#111;
08width: 100px;
09padding: 10px 0;
10}
01.btn {
02background: #EEE;
03border-top: 5px solid #C00;
04border-left: 5px solid #09C;
05border-right: 5px solid #9C0;
06border-bottom: 5px solid #FC0;
07color:#111;
08width: 100px;
09padding: 10px 0;
10}
1.btn {
2background: #EEE;
3border: 1px dotted #CCC;
4color: #111;
5width: 100px;
6padding: 10px 0;
7}
1.btn {
2background: #EEE;
3border: 2px dotted #CCC;
4color: #111;
5width: 100px;
6padding: 10px 0;
7}
01.btn {
02background: #EEE;
03border-top: 3px dotted #DDD;
04border-left: 3px solid #DDD;
05border-right: 3px solid #DDD;
06border-bottom: 3px dotted #DDD;
07color:#111;
08width: 100px;
09padding: 10px 0;
10}2.背景色
背景の色を、単色・線形グラデーションで指定することができます。
上から下、下から上、左から右、右から左だけでなく、斜めのグラデーションも可能です。
また、色ごとに不透明度も指定できるので、背景を透過させることもできます。
色を複数指定、開始位置の指定もできるため、立体感や光沢を綺麗に表現することができます。
1.btn {
2background: -moz-linear-gradient(top,#FFF 0%,#EEE);
3background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
4border: 1px solid #DDD;
5color:#111;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#0099CC 0%,#006699);
3background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
4border: 1px solid #DDD;
5color:#FFF;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069);
3background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069));
4border: 1px solid #DDD;
5color: #FFF;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#80CCE6,#80CCE6 5%,#09C 5%,#069 95%,#069 95%,#00293D);
3background: -webkit-gradient(linear, left top, left bottom, from(#80CCE6), color-stop(0.05,#80CCE6), color-stop(0.05,#09C), color-stop(0.95,#069), color-stop(0.95,#00293D), to(#00293D));
4border: 1px solid #DDD;
5color: #FFF;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C);
3background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C));
4border: 1px solid #DDD;
5color: #FFF;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#BFE5F2, #63B3D2 50%,#0081B4 50%,#00679A);
3background: -webkit-gradient(linear, left top, left bottom, from(#BFE5F2), color-stop(0.5,#63B3D2), color-stop(0.5,#0081B4), to(#00679A));
4border: 1px solid #DDD;
5color: #FFF;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#20688A, #3F96B8 50%,#00679A 50%,#0081B4);
3background: -webkit-gradient(linear, left top, left bottom, from(#20688A), color-stop(0.5,#3F96B8), color-stop(0.5,#00679A), to(#0081B4));
4border: 1px solid #DDD;
5color: #FFF;
6width: 100px;
7padding: 10px 0;
8}3.角丸
線や背景の四隅を丸くすることができます。
横幅や高さの指定と組み合わせることで、完全な円や、左右だけ、上下だけ丸くすることも可能です。
01.btn {
02background: #EEE;
03border: 1px solid #DDD;
04border-radius: 4px;
05-moz-border-radius: 4px;
06-webkit-border-radius: 4px;
07color: #111;
08width: 100px;
09padding: 10px 0;
10}
01.btn {
02background: #EEE;
03border: 1px solid #DDD;
04border-radius: 8px;
05-moz-border-radius: 8px;
06-webkit-border-radius: 8px;
07color: #111;
08width: 100px;
09padding: 10px 0;
10}
01.btn {
02background: #EEE;
03border: 1px solid #DDD;
04border-radius: 20px;
05-moz-border-radius: 20px;
06-webkit-border-radius: 20px;
07color: #111;
08width: 100px;
09padding: 10px 0;
10}
01.btn {
02width: 60px;
03height: 38px;
04background: #EEE;
05border: 1px solid #DDD;
06border-radius: 70px;
07-moz-border-radius: 70px;
08-webkit-border-radius: 70px;
09color: #111;
10padding: 42px 20px 20px;
11}
01.btn {
02background: #EEE;
03border: 1px solid #DDD;
04border-radius: 8px 8px 0px 0px;
05-moz-border-radius: 8px 8px 0px 0px;
06-webkit-border-radius: 8px 8px 0px 0px;
07color: #111;
08width: 100px;
09padding: 10px 0;
10}4.文字の影
文字に影をつけることができます。
上下左右の位置と影のぼかしの度合い、色、不透明度の指定が可能です。
また、複数指定もできます。
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: 0px 0px 3px rgba(0,0,0,1);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #0099CC;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow:1px 1px 1px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow:1px 1px 3px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: 2px 2px 1px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: 5px 5px 3px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: -1px -1px 1px rgba(255,255,255,0.5),1px 1px 1px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: 1px 1px 1px rgba(255,255,255,0.5),-1px -1px 1px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: 0px 1px 1px rgba(255,255,255,0.85),0px 0px 5px rgba(0,0,0,1);
6width: 100px;
7padding: 10px 0;
8}5.背景の影
背景に影をつけることができます。
上下左右の位置と影のぼかしの度合い、色、不透明度の指定が可能です。
また、複数指定もできます。
上部に黒い影、下部に白い影を付けることで、くぼんだような、より立体的な表現ができます。内側にも影を指定できるため、二重線も表現できます。
1.btn {
2background: #EEE;
3color: #111;
4border: 1px solid #FFF;
5-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
6-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
7width: 100px;
8padding: 10px 0;
9}
1.btn {
2background: #EEE;
3color: #111;
4border: 1px solid #FFF;
5-moz-box-shadow: 0px 0px 1px rgba(000,000,000,0.3);
6-webkit-box-shadow: 0px 0px 1px rgba(000,000,000,0.3);
7width: 100px;
8padding: 10px 0;
9}
1.btn {
2background: #EEE;
3color: #111;
4border: 1px solid #FFF;
5-moz-box-shadow: 0px 0px 2px rgba(000,000,000,0.3);
6-webkit-box-shadow: 0px 0px 2px rgba(000,000,000,0.3);
7width: 100px;
8padding: 10px 0;
9}
1.btn {
2background: #EEE;
3color: #111;
4border: 1px solid #EEE;
5-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
6-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
7width: 100px;
8padding: 10px 0;
9}
01.btn {
02background: #EEE;
03color: #111;
04border-top: 1px solid #FFF;
05border-left: 1px solid #FFF;
06border-right: 1px solid #CCC;
07border-bottom: 1px solid #CCC;
08-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
09-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
10width: 100px;
11padding: 10px 0;
12}
1.btn {
2background: #EEE;
3color: #111;
4-moz-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 1px 1px 5px rgba(000,153,204,1),inset -1px -1px 5px rgba(205,0,0,1);
5-webkit-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 1px 1px 5px rgba(000,153,204,1),inset -1px -1px 5px rgba(205,0,0,1);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #EEE;
3color: #111;
4-moz-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(000,000,000,1);
5-webkit-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(000,000,000,1);
6border: 1px solid #FFF;
7width: 100px;
8padding: 10px 0;
9}
1.btn {
2background: #EEE;
3color: #111;
4-moz-box-shadow: inset 1px 1px 3px rgba(000,000,000,0.3);
5-webkit-box-shadow: inset 1px 1px 3px rgba(000,000,000,0.3);
6width: 100px;
7padding: 10px 0;
8}スタイルサンプル
上記の5つの効果を併用した、スタイルサンプルです。
01.btn {
02background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6);
03background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));
04border: 2px solid #DDD;
05color: #111;
06border-radius: 4px;
07-moz-border-radius: 4px;
08-webkit-border-radius: 4px;
09-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
10-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
11width: 100px;
12padding: 10px 0;
13}
01.btn {
02background: -moz-linear-gradient(top,#0099CC 0%,#006699);
03background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
04border: 2px solid #FFF;
05color: #FFF;
06border-radius: 4px;
07-moz-border-radius: 4px;
08-webkit-border-radius: 4px;
09-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
10-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
11text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
12width: 100px;
13padding: 10px 0;
14}
01.btn {
02background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
03background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
04color: #FFF;
05border-radius: 4px;
06-moz-border-radius: 4px;
07-webkit-border-radius: 4px;
08border: 1px solid #0099CC;
09-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
10-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
11text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
12width: 100px;
13padding: 10px 0;
14}
01.btn {
02background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6);
03background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));
04border-radius: 20px;
05-moz-border-radius: 20px;
06-webkit-border-radius: 20px;
07color: #111;
08-moz-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3);
09-webkit-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3);
10width: 100px;
11padding: 10px 0;
12}
01.btn {
02background: #EEE;
03color: #111;
04-moz-box-shadow: inset -1px -1px 1px rgba(000,000,000,0.2),inset 2px 2px 1px rgba(255,255,255,1);
05-webkit-box-shadow: inset -1px -1px 1px rgba(000,000,000,0.2),inset 2px 2px 1px rgba(255,255,255,1);
06border-top: 1px solid #BBB;
07border-left: 1px solid #BBB;
08border-right: 1px solid #FFF;
09border-bottom: 1px solid #FFF;
10width: 100px;
11padding: 10px 0;
12}
01.btn {
02background: -moz-linear-gradient(top,#FFF 0%,#FFF 3%,#E6E6E6 3%,#FFF);
03background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.03,#FFF), color-stop(0.03,#E6E6E6), to(#FFF));
04color: #111;
05border-radius: 8px 8px 0px 0px;
06-moz-border-radius: 8px 8px 0px 0px;
07-webkit-border-radius: 8px 8px 0px 0px;
08border: 1px solid #CCC;
09border-bottom: 3px solid #0099CC;
10width: 100px;
11padding: 10px 0;
12}
01.btn {
02background: -moz-linear-gradient(top,#B1D2E0 0%,#B1D2E0 3%,#0099CC 3%,#069);
03background: -webkit-gradient(linear, left top, left bottom, from(#B1D2E0), color-stop(0.03,#B1D2E0), color-stop(0.03,#0099CC), to(#069));
04color: #FFF;
05border-radius: 8px 8px 0px 0px;
06-moz-border-radius: 8px 8px 0px 0px;
07-webkit-border-radius: 8px 8px 0px 0px;
08border: 1px solid #09C;
09border-bottom: 3px solid #09C;
10width: 100px;
11padding: 10px 0;
12}いかがでしたでしょうか？
画像で作成するのと見た目は大差なく、データも軽量化できるCSS3ボタン、是非お試し下さい！
Comments [0]
5つの効果で作る、よく使うCSS3ボタンデザインサンプル集
CSS3によって、グラデーションや角丸などの様々なデザイン表現を、画像で書き出すことなく表現出来るようになりました。
ここではボタンデザインの際に役立つ5つの効果をご紹介します！
当記事のサンプルについて
すべてのサンプルは下記のHTMLを使用しております。
1aclass="btn"href="#">LinkTexta>また、全てのサンプルに共通で下記のスタイルを適用しております。
1.btn {
2text-decoration: none;
3font-weight: bold;
4text-align: center;
5font-size: 13px;
6display: block;
7}1.線
ボタンを枠で囲むことができます。
太さ、線種、色を上下左右で個別に指定できるので、線だけで立体感を出すことができます。
※1.線に関してはcss2で表現可能です。
1.btn {
2background: #EEE;
3border: 1px solid #DDD;
4color: #111;
5width: 100px;
6padding: 10px 0;
7}
1.btn {
2background: #EEE;
3border: 3px solid #DDD;
4color: #111;
5width: 100px;
6padding: 10px 0;
7}
01.btn {
02background: #EEE;
03border-top: 1px solid #DDD;
04border-left: 1px solid #DDD;
05border-right: 1px solid #BBB;
06border-bottom: 1px solid #BBB;
07color:#111;
08width: 100px;
09padding: 10px 0;
10}
01.btn {
02background: #EEE;
03border-top: 3px solid #DDD;
04border-left: 3px solid #DDD;
05border-right: 3px solid #BBB;
06border-bottom: 3px solid #BBB;
07color:#111;
08width: 100px;
09padding: 10px 0;
10}
01.btn {
02background: #EEE;
03border-top: 5px solid #C00;
04border-left: 5px solid #09C;
05border-right: 5px solid #9C0;
06border-bottom: 5px solid #FC0;
07color:#111;
08width: 100px;
09padding: 10px 0;
10}
1.btn {
2background: #EEE;
3border: 1px dotted #CCC;
4color: #111;
5width: 100px;
6padding: 10px 0;
7}
1.btn {
2background: #EEE;
3border: 2px dotted #CCC;
4color: #111;
5width: 100px;
6padding: 10px 0;
7}
01.btn {
02background: #EEE;
03border-top: 3px dotted #DDD;
04border-left: 3px solid #DDD;
05border-right: 3px solid #DDD;
06border-bottom: 3px dotted #DDD;
07color:#111;
08width: 100px;
09padding: 10px 0;
10}2.背景色
背景の色を、単色・線形グラデーションで指定することができます。
上から下、下から上、左から右、右から左だけでなく、斜めのグラデーションも可能です。
また、色ごとに不透明度も指定できるので、背景を透過させることもできます。
色を複数指定、開始位置の指定もできるため、立体感や光沢を綺麗に表現することができます。
1.btn {
2background: -moz-linear-gradient(top,#FFF 0%,#EEE);
3background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
4border: 1px solid #DDD;
5color:#111;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#0099CC 0%,#006699);
3background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
4border: 1px solid #DDD;
5color:#FFF;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069);
3background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069));
4border: 1px solid #DDD;
5color: #FFF;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#80CCE6,#80CCE6 5%,#09C 5%,#069 95%,#069 95%,#00293D);
3background: -webkit-gradient(linear, left top, left bottom, from(#80CCE6), color-stop(0.05,#80CCE6), color-stop(0.05,#09C), color-stop(0.95,#069), color-stop(0.95,#00293D), to(#00293D));
4border: 1px solid #DDD;
5color: #FFF;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C);
3background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C));
4border: 1px solid #DDD;
5color: #FFF;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#BFE5F2, #63B3D2 50%,#0081B4 50%,#00679A);
3background: -webkit-gradient(linear, left top, left bottom, from(#BFE5F2), color-stop(0.5,#63B3D2), color-stop(0.5,#0081B4), to(#00679A));
4border: 1px solid #DDD;
5color: #FFF;
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: -moz-linear-gradient(top,#20688A, #3F96B8 50%,#00679A 50%,#0081B4);
3background: -webkit-gradient(linear, left top, left bottom, from(#20688A), color-stop(0.5,#3F96B8), color-stop(0.5,#00679A), to(#0081B4));
4border: 1px solid #DDD;
5color: #FFF;
6width: 100px;
7padding: 10px 0;
8}3.角丸
線や背景の四隅を丸くすることができます。
横幅や高さの指定と組み合わせることで、完全な円や、左右だけ、上下だけ丸くすることも可能です。
01.btn {
02background: #EEE;
03border: 1px solid #DDD;
04border-radius: 4px;
05-moz-border-radius: 4px;
06-webkit-border-radius: 4px;
07color: #111;
08width: 100px;
09padding: 10px 0;
10}
01.btn {
02background: #EEE;
03border: 1px solid #DDD;
04border-radius: 8px;
05-moz-border-radius: 8px;
06-webkit-border-radius: 8px;
07color: #111;
08width: 100px;
09padding: 10px 0;
10}
01.btn {
02background: #EEE;
03border: 1px solid #DDD;
04border-radius: 20px;
05-moz-border-radius: 20px;
06-webkit-border-radius: 20px;
07color: #111;
08width: 100px;
09padding: 10px 0;
10}
01.btn {
02width: 60px;
03height: 38px;
04background: #EEE;
05border: 1px solid #DDD;
06border-radius: 70px;
07-moz-border-radius: 70px;
08-webkit-border-radius: 70px;
09color: #111;
10padding: 42px 20px 20px;
11}
01.btn {
02background: #EEE;
03border: 1px solid #DDD;
04border-radius: 8px 8px 0px 0px;
05-moz-border-radius: 8px 8px 0px 0px;
06-webkit-border-radius: 8px 8px 0px 0px;
07color: #111;
08width: 100px;
09padding: 10px 0;
10}4.文字の影
文字に影をつけることができます。
上下左右の位置と影のぼかしの度合い、色、不透明度の指定が可能です。
また、複数指定もできます。
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: 0px 0px 3px rgba(0,0,0,1);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #0099CC;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow:1px 1px 1px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow:1px 1px 3px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: 2px 2px 1px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: 5px 5px 3px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: -1px -1px 1px rgba(255,255,255,0.5),1px 1px 1px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: 1px 1px 1px rgba(255,255,255,0.5),-1px -1px 1px rgba(0,0,0,0.5);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #09C;
3border: 1px solid #DDD;
4color: #FFF;
5text-shadow: 0px 1px 1px rgba(255,255,255,0.85),0px 0px 5px rgba(0,0,0,1);
6width: 100px;
7padding: 10px 0;
8}5.背景の影
背景に影をつけることができます。
上下左右の位置と影のぼかしの度合い、色、不透明度の指定が可能です。
また、複数指定もできます。
上部に黒い影、下部に白い影を付けることで、くぼんだような、より立体的な表現ができます。内側にも影を指定できるため、二重線も表現できます。
1.btn {
2background: #EEE;
3color: #111;
4border: 1px solid #FFF;
5-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
6-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
7width: 100px;
8padding: 10px 0;
9}
1.btn {
2background: #EEE;
3color: #111;
4border: 1px solid #FFF;
5-moz-box-shadow: 0px 0px 1px rgba(000,000,000,0.3);
6-webkit-box-shadow: 0px 0px 1px rgba(000,000,000,0.3);
7width: 100px;
8padding: 10px 0;
9}
1.btn {
2background: #EEE;
3color: #111;
4border: 1px solid #FFF;
5-moz-box-shadow: 0px 0px 2px rgba(000,000,000,0.3);
6-webkit-box-shadow: 0px 0px 2px rgba(000,000,000,0.3);
7width: 100px;
8padding: 10px 0;
9}
1.btn {
2background: #EEE;
3color: #111;
4border: 1px solid #EEE;
5-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
6-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
7width: 100px;
8padding: 10px 0;
9}
01.btn {
02background: #EEE;
03color: #111;
04border-top: 1px solid #FFF;
05border-left: 1px solid #FFF;
06border-right: 1px solid #CCC;
07border-bottom: 1px solid #CCC;
08-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
09-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
10width: 100px;
11padding: 10px 0;
12}
1.btn {
2background: #EEE;
3color: #111;
4-moz-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 1px 1px 5px rgba(000,153,204,1),inset -1px -1px 5px rgba(205,0,0,1);
5-webkit-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 1px 1px 5px rgba(000,153,204,1),inset -1px -1px 5px rgba(205,0,0,1);
6width: 100px;
7padding: 10px 0;
8}
1.btn {
2background: #EEE;
3color: #111;
4-moz-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(000,000,000,1);
5-webkit-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(000,000,000,1);
6border: 1px solid #FFF;
7width: 100px;
8padding: 10px 0;
9}
1.btn {
2background: #EEE;
3color: #111;
4-moz-box-shadow: inset 1px 1px 3px rgba(000,000,000,0.3);
5-webkit-box-shadow: inset 1px 1px 3px rgba(000,000,000,0.3);
6width: 100px;
7padding: 10px 0;
8}スタイルサンプル
上記の5つの効果を併用した、スタイルサンプルです。
01.btn {
02background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6);
03background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));
04border: 2px solid #DDD;
05color: #111;
06border-radius: 4px;
07-moz-border-radius: 4px;
08-webkit-border-radius: 4px;
09-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
10-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
11width: 100px;
12padding: 10px 0;
13}
01.btn {
02background: -moz-linear-gradient(top,#0099CC 0%,#006699);
03background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
04border: 2px solid #FFF;
05color: #FFF;
06border-radius: 4px;
07-moz-border-radius: 4px;
08-webkit-border-radius: 4px;
09-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
10-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
11text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
12width: 100px;
13padding: 10px 0;
14}
01.btn {
02background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
03background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
04color: #FFF;
05border-radius: 4px;
06-moz-border-radius: 4px;
07-webkit-border-radius: 4px;
08border: 1px solid #0099CC;
09-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
10-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
11text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
12width: 100px;
13padding: 10px 0;
14}
01.btn {
02background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6);
03background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));
04border-radius: 20px;
05-moz-border-radius: 20px;
06-webkit-border-radius: 20px;
07color: #111;
08-moz-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3);
09-webkit-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3);
10width: 100px;
11padding: 10px 0;
12}
01.btn {
02background: #EEE;
03color: #111;
04-moz-box-shadow: inset -1px -1px 1px rgba(000,000,000,0.2),inset 2px 2px 1px rgba(255,255,255,1);
05-webkit-box-shadow: inset -1px -1px 1px rgba(000,000,000,0.2),inset 2px 2px 1px rgba(255,255,255,1);
06border-top: 1px solid #BBB;
07border-left: 1px solid #BBB;
08border-right: 1px solid #FFF;
09border-bottom: 1px solid #FFF;
10width: 100px;
11padding: 10px 0;
12}
01.btn {
02background: -moz-linear-gradient(top,#FFF 0%,#FFF 3%,#E6E6E6 3%,#FFF);
03background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.03,#FFF), color-stop(0.03,#E6E6E6), to(#FFF));
04color: #111;
05border-radius: 8px 8px 0px 0px;
06-moz-border-radius: 8px 8px 0px 0px;
07-webkit-border-radius: 8px 8px 0px 0px;
08border: 1px solid #CCC;
09border-bottom: 3px solid #0099CC;
10width: 100px;
11padding: 10px 0;
12}
01.btn {
02background: -moz-linear-gradient(top,#B1D2E0 0%,#B1D2E0 3%,#0099CC 3%,#069);
03background: -webkit-gradient(linear, left top, left bottom, from(#B1D2E0), color-stop(0.03,#B1D2E0), color-stop(0.03,#0099CC), to(#069));
04color: #FFF;
05border-radius: 8px 8px 0px 0px;
06-moz-border-radius: 8px 8px 0px 0px;
07-webkit-border-radius: 8px 8px 0px 0px;
08border: 1px solid #09C;
09border-bottom: 3px solid #09C;
10width: 100px;
11padding: 10px 0;
12}いかがでしたでしょうか？
画像で作成するのと見た目は大差なく、データも軽量化できるCSS3ボタン、是非お試し下さい！
Comments [0]
新ロゴ（上）と旧ロゴ
Comments [0]