Ultimate Guide to Business Cards: Infographics and Other Resources
Ultimate Guide to Business Cards: Infographics and Other Resources
9 Comments good ideas,Awesome! I really like this. keep up with the good work. Thanks a lot for sharing. Some excellent examples. Great post and totally agree how important it is to have a little personality on the about us page – it totally helps with engagement. Photos of the people make the biggest impression in my opinion. I always love seeing collections showing variety. Nice to compare diffe
作成:2013/03/4 更新:2014/11/01 Web制作 > もし「全部」自分でやることになっても 一人でサクッと作れるようになりたい 今回はWeb制作や、ツール・ソフトの使い方が「簡単」に分かる、デザインが良い「マニュアル的」なサイトを抜粋しまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 1.Photoshop (フォトショップ) 2.Illustrator (イラストレーター) 3.Dreamweaver (ドリームウィーバー) 4.iPhone アプリ 5.Kindle 出版 6.WordPress 7.スマートフォンサイト 8.アフィリエイト 9.アクセスアップ / ブログ 10.ライティング 11.SEO 12.プログラミング 13.html / CSS 14.Google Analytics 15.レスポンシブ Photos
アプリにしてもWEBにしても非常に利用頻度が高い、アイコン素材。それだけに様々なアイコンセットが素材としてWEBでは提供されていますが、今日紹介するのはベクターで利用できるシンプルなアイコン200個セット「200 Free Glyphs」です。 シンプルで簡潔なアイコンが全部で200個まとめられています。顔文字的なものから、矢印やタグソーシャルメディアまでWEBで利用できそうなアイコンがほぼ揃うアイコンセットになっています。 詳しくは以下 アイコン素材はセットが変わるとどうしても調整が必要なため、種類が少ないと、自分で作る部分が増えたり、制作したものと合わせる作業が必要になります。こちらのアイコンセットは、利用頻度の高そうなアイコンが網羅されていますので、その点はこのアイコンセットのみで、制作も完結することができそうな気がします。 配布形式はpsdとなり「Dribbble – 200 Fr
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB(ミニファイ&Gzip)で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
スクラップブックやギャラリー、日記など様々な使われ方をしているTumblr。テーマも数多くあり、自由なデザインで楽しめるところがTumblrの魅力でもあります。そんなTumblrで日記を書く時におすすめしたいテーマのZENが公開されていました。 ZENはTumblrで普通に日記を書く用途にこだわったテーマです。すべての投稿タイプに対応しており、ソーシャルボタンなどのカスタマイズも出来るようになっているのでブログと同じように使うことができます。 ZENを制作したのはSANOGRAPHIX.NETの佐野章核さん。 こちらがデモです。ミニマルで美しいテーマですね。レスポンシブデザインなのでスマートフォンやタブレットでも綺麗に表示されます。 使い方 ZENテーマを適用するにはまず、テーマのHTMLをこちらからコピーします。その後自分のTumblr画面からカスタマイズをクリックし、「HTMLを編集す
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
As a writer, I’m particularly drawn to typographic art. Perhaps it’s because the combination of word and art speaks to both the left brain and the right brain — and therein lies the magic. Designer Ji Lee’s book entitled Word as Image brilliantly illustrates the power of “picturing words”. Currently Facebook’s Creative Strategist and formerly a Creative Director at Google, the Seoul-born artistic
ファミコンソフトをブラウザゲームとして遊べるまとめ かなり量が多くなりましたが、ブラウザからキーボード操作で遊ぶ事ができます。仕事の気分転換等にどうぞ。 マリオブラザーズ(任天堂) http://www.1980-games.com/us/old-games/nintendo/m/Mario_Bros/game.php ドンキーコング(任天堂) http://www.crazymonkeygames.com/Donkey-Kong.html エレベーターアクション(タイトー) http://www.flash-mania.eu/en/php/nintendo/divers/012.php ゼビウス(ナムコ) http://cat.s48.xrea.com/Xevious/XeviousB.html プーヤン(ハドソン) http://www.1980-games.com/us/old-ga
Retinaディスプレイが普及し始めたことで注目されているのがアイコンフォント。今後Web制作をしていくなかで注目しておきたいアイコンフォントから無料で使えるシンプルなアイコンフォントセットを20個まとめてみました。 ※無料でダウンロードできるアイコンフォントばかりですが、規約は各サイトによって違います。使用する際は規約に注意してください。 1. CONDENSE-iconFont 2. Batch 3. Foundation Icon Fonts 4. Handy Icons Vol2 5. Sosa icon font 6. Fontello 7. Entypo 8. IcoMoon App 9. Font Awesome 10. Social Media Icons Pack 11. Elusive 12. Ligature Symbols 13. Typicons 14. Just
Webサイトやブログなどにソーシャルプラグインを設置するのは、もはや当然なくらいなわけですが、今日はその中からFacebookのLike Boxを設置した際に、それをリキッドレイアウトへ対応させる方法を紹介します。 FacebookのLike Boxの設置コードには、それの横幅を指定してやる必要があります。以下のようなコードですね。 <div class="fb-like-box" data-href="http://www.facebook.com/2843.jp" data-width="500" data-show-faces="true" data-stream="false" data-header="true"></div> この例では横幅を500pxに指定していますが、ブラウザの横幅が500pxより狭くなってしまうと… コレだと不格好なので、何とかしてやりましょう。「レスポ
ちょっと古いかもしれませんが、地面に反射しているようなこの文字。 実はillustratorのアピアランス機能を使うことで簡単に作成することができます。 全てアピアランスで設定しているので、文字数が変化した場合にも簡単に修正することができます。 まずは適当なテキストを入力します。 次にアピアランスパネルで、塗りを2枚追加します。 今回は#333333の塗りを2枚追加しました。 最終的に下の塗りは色を変更するのでなんでもいいのですが、とりあえず同じ塗りを追加しておきます。 アピアランスパネルの下の塗り選んで、[効果] → [パスの変形] → [変形]を選択します。 拡大縮小の[垂直方向:49%]、移動の[垂直方向:27px]、オプションの[水平軸にリフレクト]にチェックを入れます。 この値は最初に入力したテキストのサイズによって変わるので、適当に調節しながら下の画像のようになるよ
ズルいデザインテクニックを参考にしました そもそもなぜ細かいディテールを作り込む必要があるという発想があるのかというとこんな記事を見ていたからです。 細かい解説はリンク先の記事に書かれていることなので割愛しますが、要するに CSS3 で使えるようになった box-shadow と text-shadow あとは border の色を rgba を使って透明度を指定することで、ワンランク上の見栄えを表現するというものです。 CSS3 を利用していますので、8 以前の IE では表示されませんが、コンテンツと直接関係無い所ですし、解析を見る限りモダンブラウザ勢が大多数の現状に甘えてやってしまうことにしました。 ナビゲーションに使ったら ズルい!! まずはこちらが技(テクニック)を利用する前の状態。アカンくズルくないですね。 その代わりすごくダサいですが…。 そしてこれにズルい技を使うと… ズル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く