ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業を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がアイコンの前景をつなげたスプライ
前回はフォームに焦点を合わせましたが、今回はサイトデザインの中でも質感がある紙を使ったデザインにのみ焦点を合わせてみることにします。 流れ的にはインスピレーション43サイト包装紙・和紙の無料テクスチャPhotoshopブラシ等CSSペーパーデザインに合いそうな手書き風アイコンペーパーデザインに合いそうな手書き風フォントという感じで構成されています。 ちょっとボリュームがでかくなり過ぎてしまったので重いですが、まぁいつものネタ帳流ということで勘弁してください・・・。 ちょっとだけ急募 本当は昔CSSチュートリアルでペーパーデザインのやつがあったのですが、ブクマし忘れてたようでみつからなくてスイマセン・・・。もし、ご存知の方がいましたら追加したいので教えていただけると幸いです。また、そんな記事今から作ってやるよ！とか、昔書いたよ！っていう熱い方がいましたら是非是非お知らせ願います。すぐに追加さ
2007年8月にヒットしたエントリやサイトの、WEBデザイナー向けまとめ。 一ヶ月もたてばブックマークも結構色々ノイズが入ってくるもので、ここで整理の意味も込めてまとめておきます。 SEO系や、モバイル系は別エントリに分離しないと、前回重くてアクセスが集中して見れませんと言われる方がいましたので、分離して書こうかと思っています。 アイコン Hazem Designs The Official site of Hazem Mostafa Graphic/Web Photography artist FREEiconをクリックで見れるけど重いです。 その全てのアイコンがpngで出来ているため、使い道が多いかも。ライセンスについて見当たらないため、商用はお勧めできませんね。 Web 2.0 Badges - Useful collection of stylish web 2.0 badges
前回ご紹介した 今押さえておくべきWeb制作に役立つ37個のブックマークまとめ と一緒にあわせて使うとより強力になるかもしれません。 前回の記事のあとにみつけた32個のブックマーク集です。 WEBツール CSS Dock Menu マックのドックのような動きをするインターフェイスタブをあなたのページにつける事が出来るツール。動きが滑らか。 Dynamic Page Flip v2 from shift+control 本をぺらぺらとめくるようなイメージギャラリー。 これはかなり見た目インパクトが強い。 画面中央左の『Download the source files』のところで無料でダウンロードできる。オリジナルのカタログもつくれそう。 ためしに使ってみたけど、RSSパーサーと組み合わせると、ページにRSS受信も出来た。アイデア次第でなんでもいけそうですよ。 10 Free CSS Gra
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
