タグ

cssとlayoutに関するcachicoのブックマーク (2)

  • 斜めグリッドを使ったデザインのウェブサイト集

    ここ最近のことなのですが、綺麗なデザインのサイト集なんかを見て回っていると何度か斜めグリッドを基準にしたデザインのサイトを見かけました。 こういうの何て言うんでしょうね。斜めグリッドなのでDiagonal Grid Based Webdesignとでも言えばいいんでしょうか。 どのサイトも非常にインパクトが強く印象的だったので、数は少ないですが紹介してみようと思います。 Jessica CaldwellJessica Caldwell ポーランドのウェブ制作者さんのポートフォリオ。 各ブロックはli要素をtransform: rotate()して作られています。 ブロックは一つ一つがナビゲーションで、マウスを乗せるとアニメーションでメニューが表示されます。 Designer GlebDesigner Gleb / Graphic&Web Designer Gleb Leksikov フリー

    斜めグリッドを使ったデザインのウェブサイト集
    cachico
    cachico 2011/12/05
    CSS3による斜めグリッドデザインのまとめ
  • CSSで画面全体に対して天地中央に配置するテクニック(2) | 先端研究ブレイドLAB

    CSSで天地センターに配置するテクニック第2回目です。今回は定番テクニックの問題点を解決する方法をご紹介します。 produced by Blades co.,ltd. 前回のエントリーで、CSSで画面全体に対して天地中央に配置するテクニック(1)として定番のテクニックをご紹介しました。今回は前回の手法の問題点を解決する別のテクニックをご紹介したいと思います。 定番テクニックの問題点のおさらい 定番のテクニックである「絶対配置+ネガティブマージン」にはコンテンツ表示上の大きな問題があります。それは、ブラウザの表示スペース(つまりbodyの大きさ)がコンテンツ表示領域(divなど)よりも狭い場合、コンテンツの全体が表示されないと いうことです。 これをわかりやすく説明するために、ブラウザで表示した例を見てみましょう。ソースは前回のエントリーでサンプルとして挙げたものを少し改変します。 HTM

    cachico
    cachico 2011/06/09
    画面全体に対して天地中央。。。画面全体ね。
  • 1