タグ

ブックマーク / hail2u.net (2)

  • CSS Color Keywords

    CSSでは色の値として#RRGGBBやrgb(r, g, b)等の他にキーワードでも指定できる。CSS3では大幅に拡充され、140種類のキーワードのサポートが明記された。今まであまり使ったことがなかった上に、英語力の欠如からDarkOrangeやLavenderとかならまだしもBlanchedAlmondとか言われてもどんな色か想像すらできないので、一覧してクリックで背景色としてプレビューできる簡単なツール、CSS Color Keywordsを作った。DarkOliveGreenとかRGBで考えるとなかなか大変だけどキーワードなら簡単! ページを開くと色のキーワードを背景色としたブロックが並ぶ。最初のbodyの背景色はランダムに決定されるが、その後はそれぞれの色のブロックをクリックするとその色が背景色になり、プレビュー出来る。 見出しや色のキーワードのフォントはYanone Kaffee

    CSS Color Keywords
  • CSSでアイコンをデザイン

    ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ

    CSSでアイコンをデザイン
    tomoponjp
    tomoponjp 2011/03/03
  • 1