タグ

2009年2月23日のブックマーク (2件)

  • 複雑なグリッドに対応した軽量CSSフレームワーク·Golden Grid MOONGIFT

    ※ 画像は公式サイトデモより Webサイトを作っていて、複雑なページ構成をCSSだけで組もうとするとすぐに無理がくる。floatやclear、left/rightなどを組み合わせるのだが思い通りにいかない。やっとできたと思ってIEでみたらぶっ飛んでいた、なんてことはざらにある。それだけでもうやる気がなくなってしまうことだろう。 サンプル1 そのような悲惨な目に遭わないためのテクニックがCSSフレームワークの活用だ。あまり重厚なものでなく簡易的なものをと思っているならGolden Gridを使ってみよう。 今回紹介するオープンソース・ソフトウェアはGolden Grid、970pxを横幅にしたCSSフレームワークだ。 最近のWebサイトでは970pxあたりがよく使われる。既に800×600の時代は終わり、1024pxの画面でも十分見られるサイズと言う訳だ。Golden Gridもそれに対応し

    複雑なグリッドに対応した軽量CSSフレームワーク·Golden Grid MOONGIFT
    tgk
    tgk 2009/02/23
  • フォトショいらず:CSSで画像の上に斜めの帯と文字を表示してみる - builder by ZDNet Japan

    「FirefoxとSafariのCSS徹底検証」では、直近の2回に渡ってCSSのプロパティ「transform」を紹介している。 CSSトランスフォーム:変形処理「transform」の基礎 CSSトランスフォーム:1つの要素に複数の変形処理を適用する 今回は番外編として、transformプロパティを使って、画像に対し斜めの帯を付けて表示するテクニックを紹介しよう。 画像にななめの帯を付けて表示する transformプロパティを利用すれば、ヘッダー画像にななめの帯を付けるようなデザインをCSSで実現することができる。 たとえば、次のサンプルでは「Welcome to my Homepage」という文字を表示した黄色い帯を画像の右上に重ね、45度回転して表示している。このとき、黄色い帯の両端を画像に合わせてカットするため、全体を囲んだ

    フォトショいらず:CSSで画像の上に斜めの帯と文字を表示してみる - builder by ZDNet Japan
    tgk
    tgk 2009/02/23