• かちびと.net

    CSSのみで約900パターンものユニークなグリッドレイアウトをドラッグ&ドロップで作成出来るWebサービス・3x4gridのご紹介です。なかなか面白いツールですねー。機会があれば使って見たいかも。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

CSSのみで約900パターンものユニークなグリッドレイアウトをドラッグ&ドロップで作成出来るWebサービス・3x4grid

スポンサーリンク

3連休を如何お過ごしでしょうか。さて、
ちょっと面白いものを見かけたのでシェア
します。Masonryのようなレンガ風の
レイアウトをCSSのみでサクッと作れる
Webサービス。パズルのように組み合わせ
るので種類は900パターン近くになる
そうですよ。

休日なので軽めの話題でも。

よくあるグリッドレイアウトのCSSジェネレーターと違って汎用性はありませんが、こういうサービスが出てきたのがちょっと面白いなぁと。jsも使わないし、直感で作れるのでお手軽といえばお手軽じゃないですかね。

3x4grid


このようにパズルのようになっていて、右のエレメントをドラッグし、左にドロップしてボックスを配置する、というもの。jsは使われず、CSSのみで作れます。


操作は直感で出来ると思います。


作ったらコードを発行してもらえます。

Example


960pxで作成されますので汎用的ではありませんが、これはこれで面白いかなと。

動画もありますよ

色々出てきますね。全体の幅を選べるとグッと使用頻度が高まる気がしますけど贅沢も言えないです。

詳細は以下でお確かめ下さい。

3x4grid(via:webresourcesdepot)

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services