フォームデザインいろいろ - DesignWalker
今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。 登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。 Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。 Pattern Tap 現在185種類のフォームデザインがまとめられております。 Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web
CSSテンプレート配布サイト色々まとめ:phpspot開発日誌
CSS Tools: Free Templates CSSテンプレート配布を行っているサイトが色々紹介されていました。 総数でいうと8000近くのテンプレートがあります。 FreeCSStemplates.org 332のクールテンプレート Free-CSS-Templates.com 219のフリーテンプレート FreeWebTemplates.com 4200のフリーテンプレート FreeCssTemlates.com 36色のテンプレート CSScreme.com いくつかのフリーのクオリティの高いテンプレート TemplateWorld.com XHTML/CSSのクールテンプレート DreamTemplate.com 3000以上のテンプレート これだけあると迷ってしまって、その時間の方が心配になってしまいますね。 関連エントリ デザインされたフリーのCSSテンプレート集 フリー
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
![[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
CSSを1行書くだけで枠の角を丸くする！ [ホームページ作成] All About
CSSを1行書くだけで枠の角を丸くする！枠の角を丸くする方法として、スタイルシートに1行書き加えるだけで済む方法をご紹介したいと思います。丸みの半径を自由に指定できるなど、画像とHTMLを駆使するよりも楽に作れます。 ※この記事は、2005年のものです。 ※スタイルシートだけで枠の角を丸くする方法は、新記事「画像を使わずにCSSだけで角を丸くする方法」（2009年7月公開）で詳しく解説しています。ぜひ、そちらをご参照下さい。 楽な方法で枠の角を丸くしたい！ 枠の角を丸くする方法として、スタイルシートに1行書き加えるだけで済む方法をご紹介したいと思います。 丸みの半径を自由に指定できるなど、画像とHTMLを駆使するよりも楽に作れます。 今回ご紹介する方法のメリット・デメリットは次の通りです。 メリット： スタイルシートに1行加えるだけで済む 丸みの半径サイズの指定が自由自在 デメリット： M
![CSSを1行書くだけで枠の角を丸くする！ [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
便利なＣＳＳテクニック３０選:phpspot開発日誌
30 Exceptional CSS Techniques and Examples | Six Revisions In this article, I’ve pieced together 30 excellent CSS techniques and examples 便利なＣＳＳテクニック３０選ということでエントリがまとまっていたので紹介。 特に気になったものを以下にまとめました。 Hoverbox Image Gallery - 画像ギャラリー上でマウスホバー時に画像拡大 デモはこちら CSS Photo Zoom - 文書に添付の画像にカーソルを合わせると画像拡大。テキスト位置も自動調整 デモはこちら whatever: hover - windowsのスタートメニュー風の階層メニュー デモはこちら Content Overlay with CSS - オーバーレイでdescr
ウェブ制作・プログラマー・デザイナーのためのチートシート集 | コリス
Scott Klarrのエントリー「Cheat Sheet Index」から、ウェブ制作・プログラマー・デザイナーのためのチートシート集です。
効果的なコーディングのための強力CSSテクニック集『Powerful CSS-Techniques For Effective Coding』 – creamu
DiaryTechnology 効果的なコーディングのための強力CSSテクニック集『Powerful CSS-Techniques For Effective Coding』 かっこいいインターフェースをCSSで実現したい。 そんなあなたにおすすめなのが、『Powerful CSS-Techniques For Effective Coding』。Smashing Magazineによる、効果的なコーディングのための強力CSSテクニック集だ。 以下にいくつかご紹介。 » Triadic Background Setting with CSS Silverbackのサイト。シンプルなCSSで3枚の背景画像を重ねて3D効果を出している。ドキュメントはないがソースコードを見るだけでとても刺激的 » Creative Use of PNG Transparency in Web Design We
css Zen Garden：CSS デザインの美
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. Web enlightenment
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
[CSS]スタイルシートで実装するテーブルのデザインパターンとそのポイント | コリス
[CSS]アイデア満載のスタイルシートのテクニック30選 | コリス
[CSS]使いやすいスタイリッシュなフォームを実装する17のチュートリアル | コリス
http://e0166nt.com/blog-entry-415.html
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker