タグ

ブックマーク / www.webbibo.com (2)

  • CSS(スタイルシート)だけでグラデーションを表現する方法のまとめ|web bibo

    タイトルやボタンの背景にグラデーションを施したいとき、グラデーションの画像を用意して、それを背景に敷くと思います。ただ、線形グラデーションのような単純なものなら、画像を使わずスタイルシートだけで表現することができます。一応メモとして載せておきますが、使える方法かどうかは個人の判断に任せます。-webkit-gradientの方法は各サイトで取り上げられているCSS3の注目の方法なので覚えておいても損はないかと思います。 各ブラウザで表現できるCSSグラデーション方法の一覧表 左項目のボックスにグラデーションがかかっていたら、実際に適用されている証拠です。 6/7 8 2/3 9.5 4 2 filterで グラデーション

  • 1px欠けの角丸ボックスをCSSだけで作る方法|web bibo

    スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:

  • 1