タグ

ブックマーク / unformedbuilding.com (6)

  • colorプロパティの影響範囲

    とりあえず仕様を見てみます。 This property describes the foreground color of an element’s text content. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification - 14.1 Foreground color: the 'color' propertyThis property describes the foreground color of an element's text content. In addition it is used to provide a potential indirect value (currentColor) for any other properties that accept color value

    colorプロパティの影響範囲
    haru135
    haru135 2013/06/07
  • 背景として使用されるCSSグラデーションはどの範囲に描画されるか

    背景として使われるCSSグラデーションが描画される範囲はどのように決定されるのか、仕様を読みながら考えてみたいと思います。 参考にしたのは2012年4月17日版の「CSS Image Values and Replaced Content Module Level 3」です。非公式の日語訳もあります。 この記事に書いている範囲は自分で訳したので、上記の翻訳とは用語の表記などが異なっています。ご了承ください。 (調べ終わり頃に日語訳があるのに気づいたので……) なお、ここ以降で単に「グラデーション」と書いている場合は「CSSグラデーション」のことを指します。 グラデーションが描画される範囲についてまずはグラデーションが描画される範囲はどのように決定されるのかを調べてみます。 仕様を見ると次のように書かれています。 グラデーションはグラデーションボックス(gradient box)と呼ばれ

    背景として使用されるCSSグラデーションはどの範囲に描画されるか
  • 最近のCSS実装でベンダー接頭辞の外れたもの 2012年11月

    Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました(Windows 7のIE 10はまだですが)。 その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。 CSS Gradientsliner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()の4つ。 IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。Firefox 16から。標準構文。-moz-付きのは古い構文扱い。Opera 12.10から。標準構文。-o-付きのは古い構文扱い。Chrome、Safari は-webkit-が必要。古い構文。CSS Transformstransform, transform-sty

    最近のCSS実装でベンダー接頭辞の外れたもの 2012年11月
    haru135
    haru135 2012/11/07
  • CSS の書き方についてのメモ | Unformed Building

    どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt

    haru135
    haru135 2012/10/24
  • meter要素のスタイリングについてのメモ 2012年10月

    2011年1月27日に「meter要素のスタイリングについてのメモ for Webkit & Opera」という記事を書きましたが、先日リリースされたFirefox 16もmeter要素に対応し、またWebkitの指定方法も変更されていましたので改めてメモしておきます。 なお、前回同様にOperaについてはスタイリングの方法が分かりませんので(まだないっぽい)、WebkitとFirefox向けの指定方法となります。 時間のある方は前の記事も読んでおくと理解しやすいかと思います。 Webkit向け::-webkit-meter-inner-elementこれはユーザーエージェントスタイルシートに書かれているものですが、気にしなくていいと思います。 meter要素の中の部分を指定します。::-webkit-meter-barメーター自体を指す擬似要素です。バーの背景などはここで指定します。 以

    meter要素のスタイリングについてのメモ 2012年10月
    haru135
    haru135 2012/10/12
  • サイト制作時のメモ 2012年前半

    ここ最近でサイトを作ったときに思ったことのメモです。 個人的なサイトを昨年末と今年の7月に1つずつ、それ以外でやったのが春に1つ(結局なかったことにされたけど)、今やってるのが1つ。 昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。 昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。 全般「HTML5 Boilerplate」は丸ごとというより必要な部分だけ抜き出して使うと便利。 「これは要らないかなー」という部分を探すのにはコード読まないといけないので、それだけでも結構勉強になると思う。 単純なサイトなら頑張って画像作らなくてもなんとかなったりする。 (対象がいわゆるモダンブラウザの場合) Sass 3.2から使えるPlaceholder Selectorは凝ったことしなくても普通に便

    サイト制作時のメモ 2012年前半
  • 1