CSS3を使ったスライドショー – creamuHow to Create a Stylish Image Content Slider in Pure CSS3という記事で、CSS3を使ったスライドショーの作り方が紹介されています。 DEMO How to Create a Stylish Image Content Slider in Pure CSS3
Photoshopで作ったようなCSS3のタイポグラフィー – creamu
CSS3でかっこいい表現をしたい。 そんなときにおすすめなのが、「Subtle CSS3 Typography that you’d Swear was Made in Photoshop」。Photoshopで作ったようなCSS3のタイポグラフィーです。 Safari, Google Chromeなどで使用可能な「-webkit-mask-image」でマスクが指定してあったり、グラデーションを適用するgradientプロパティ、色を指定するRGBaプロパティ、hover時にアニメーションするtransitionプロパティが使われています。 フォントには、Appleのサイトでもよく使われている「Myriad Pro」が使われていますね。 ソースがダウンロードできて参考になるかと思うので、一度見てみてください。 Subtle CSS3 Typography that you’d Swear
WordPressで構築された美しいサイト40 – creamu
サイトをWordPressで作りたい。 そんなときに参考になるのが、『40 WordPress-Powered Websites With Awesome Designs』。WordPressで構築された美しいサイト集です。 かなりかっこいいサイトが揃っています。 Theme Garden WordPressのテーマを配布しているTheme Garden Aaron Irizarry テクスチャとタイポグラフィーが美しいデザイナーのブログ kazuhide fukuyama 日本のフリーランスデザイナー、Kazuhide Fukuyama氏のポートフォリオサイト UpThemes メニューやスクリーンショットの置き方、ボタン等、洗練されたデザインのUpThemes Awesem 反応の速いドロップダウンメニューと、スライドショーが美しいAwesem WordPressユーザの方は、一度見て
クライアントへの納品時につけたいWordPressプラグイン9 – creamu
WordPressでサイトを構築してクライアントに納品する。 そんなときにおすすめなのが、『9 Plugins Your Clients Will Love For Their WordPress Website』。クライアントへの納品時につけたいWordPressプラグイン集です。 かなり便利そうなのが揃っています。クライアントに渡す際には、管理画面のデザイン等もカスタマイズしたいですよね。 My Brand ログインページをオリジナルのデザイン・レイアウトにカスタマイズできる。ロゴをクライアントのロゴにするなど Branded Admin 管理画面のヘッダとフッタを、オリジナルのデザインにできる Ozh Admin Drop Down Menu 管理画面の左サイドバーのメニューはクリックしてサブメニューを開きますが、それを水平のドロップダウンメニューに変更でき、マウスオーバー&ワンクリ
Photoshopのテキストエフェクトチュートリアル33 – creamu
Photoshopでテキストを装飾したい。 そんなときに参考になるのが、『33 Creative Photoshop Tutorials Text Effects for Beginners and Advanced』。Photoshopのテキストエフェクトチュートリアル集です。 かっこいいものが揃っていますね。いくつかご紹介します。 Create a Stunning Text on Wild Fire Effect 炎の効果を演出したテキスト How to Create a 3D Text Photo Manipulation 3Dのテキストを作るチュートリアル How to Quickly Create a Stylish Retro Text Effect テキストの中をクールなラインで抜いた、レトロエフェクト Patriotic Text Using Displacement M
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 – creamu
フッターをブラウザの下部に常に表示させたい。 そんなときにおすすめなのが、『CSS Sticky Footer』。ブラウザの下部にフッターを固定表示するCSSだ。 クロスブラウザで、IEやFxはもちろん、Opera、Safari、Google Chrome、Chaminoなどにも対応している。 ブラウザ対応状況は以下から。 » Here is the Full List HTML、CSSもとてもシンプルなので、ぜひ見てみてほしい。 ブラウザの下部にフッターを固定表示するCSS、チェックして使ってみてはいかがだろうか。 » CSS Sticky Footer Oisixの野菜を炒めて食べました。だいぶ減ってきたな。じゃがいもとたまねぎがうめぇ。
商用無料のRSS・吹き出し・矢印・虫メガネアイコンセット – creamu
RSSや吹き出しなどのアイコンを探している。 そんなときにおすすめなのが、『Web User Interface』。商用無料のRSS・吹き出し・矢印・虫メガネのアイコンセットです。 They’re released royalty-free, so you may use them for any commercial or personal purpose. とのことで、商用でも無料で利用できます。 aiのパスデータも入っているので、自由にリサイズできますね。 ぜひ使ってみてはいかがでしょうか？ Free Exclusive Vector Icon Pack: Web User Interface 今日は腰と背中の間あたりに激痛が走って起き上がれないのを治しに医者へ。特に異常はなかったので痛み止めをもらってきました。これが効いていい感じ！！まじつらかった。。。。 そして歯医者へ。口の奥の
Google Chromeのエクステンション30 – creamu
Google Chromeを使っている（アドオンがあるなら使いたい）。 そんなあなたにおすすめなのが、『30 Irreplaceable Chrome Extensions』。Google Chromeのエクステンション集です。 便利そうなのをざっとご紹介しますね。 Aviary Screen Capture キャプチャ（スクリーンショット）が撮れる Xmarks Bookmarks Sync Firefox、Safari、IEとブックマークを同期 Evernote Web Clipper Evernoteに簡単に投稿できる Chrome Gestures マウスの動きで「戻る」「進む」などを制御できる Google Similar Pages beta (by Google) よく似たページを探してくれる Feedly 雑誌のようなスタートページにできる。Google ReaderやTw
オンラインでワイヤーフレームを作成できる『gliffy』 – creamu
ワイヤーフレーム作成ツールを探している。 そんなあなたにおすすめなのが、『gliffy』。オンラインでワイヤーフレームを作成できるサービスです。 ↑のようなインターフェースで、ワイヤーフレームを作れますね。パーマリンクを生成してくれて、共有（コラボレート）して作り上げることが可能です。 左サイドバーのライブラリには、UIの要素であるチェックボックスやスライダー、いろいろな形の矢印や、UMLに使えるパーツなど、たくさん揃っています。 「gliffy」は元々ダイアグラム作成のサービスですが、ワイヤーフレーム作成サービスも出たようですね。 一度使ってみてください。 Wireframe Software – Free website wireframe software by Gliffy ■関連記事 オンラインでダイヤグラムを作成、共有！『gliffy』 昨日ネット系のエントリーを書けなかったの
一味違ったレイアウト&ナビゲーションデザイン集 – creamu
ありきたりのデザインをしたくない。 そんな時に参考になるのが、『Creative and Unusual Layouts and Navigation Designs』。一味違ったレイアウト&ナビゲーションデザイン集です。 特に面白いな、と思ったものをご紹介しますね。 26000 Vodka メニューが浮遊しながら、遠近感のある感じで表示される Sursly 横にスクロールしていくタイプのコンテンツ Lucuma ナビゲーションをクリックすると、画面が横にぐいーっと移動する Okay Dave ローディング後のアニメーションがとても美しいOkay Dave Andreas Smetana スクロールすると、すとんすとん、と画像が切り替わる。マウスオーバー時のアクションも気持ちいい Snuggle Fux レイアウトが斬新なSnuggle Fux Im Design 矢印キーで奥行きのあるイ
ワイヤーフレーム / モックアップを作成するためのフリーアプリ10 – creamu
ワイヤーフレーム / モックアップを作りたい。 そんなときにおすすめなのが、『10 Completely Free Wireframe and Mockup Applications』。ワイヤーフレーム / モックアップを作成するためのフリーアプリ集です。 なかなかいい感じのが揃っていますよ。 Pencil Project ワイヤーフレームが作れる有名なFirefoxアドオン Web Site Wireframe Tool オンラインでシンプルにワイヤーフレームを作って、パーマリンクで共有できるサービス Hot Gloo – The Online Wireframe App Flashベースのワイヤーフレーム作成アプリ。現在無料 DUB – DENIM Windows, Unix, Mac OS Xで利用できるデスクトップアプリ Mockingbird UIの綺麗なMockingbird
Photoshopで作るWindows Vistaのようなオーロラの光エフェクト – creamu
Windows Vistaの壁紙のようなオーロラの光を描きたい。 そんなときにおすすめなのが、『Windows Vista Aurora Effect Photoshop Tutorial』。Photoshopで作るWindows Vistaのようなオーロラの光エフェクトです。 下記のような手順になっています。 明度コントラストの高い写真を選ぶ 「フィルタ / ぼかし / ぼかし(ガウス)」で75%程度のぼかしを適用。背景を作る カラーバランスで背景の色を調整。シャドウ:-37, -40, 7 中間調: 15, 62, 0 ハイライト: -34, 0, 69 新規レイヤーで、「楕円形選択ツール」で選択範囲を作って、ブラシ（200px程度・堅さ：0%・描画色：#fff）で選択範囲の淵をなぞって光を描く。描画モードをオーバーレイに設定 作った光のラインを傾ける(Ctrl + T)。傾きを変えな
WordPressのダッシュボードハックス – creamu
WordPressのダッシュボード（管理画面）をカスタマイズしたい。 そんなときにおすすめなのが、『10 WordPress dashboard hacks』。WordPressのダッシュボードハックスです。 クライアントにCMSとしてWordPressを提案して納品する場合、不要なメニューは外したり、ロゴを変えたりしたいですよね。いろいろとまとまっているのでご紹介。 ダッシュボードの不要なメニューを削除 「$restricted」に配列で不要なメニューを入れて、functionを「functions.php」に記述することで使わないメニューを削除する方法 ログイン時のロゴを変更 WordPressログイン時のロゴをオリジナルの物に変更する方法 ダッシュボードのロゴを変更 ダッシュボードのロゴをオリジナルのものに変える方法 アップデートのメッセージを非表示にする 「WordPress 2.
WordPressでパンくずリストを表示するシンプルなコード – creamu
WordPressでパンくずリストを使いたい。 そんなときにおすすめなのが、『How To: Breadcrumbs in WordPress』。WordPressでパンくずリストを表示するシンプルなコードです。 ネストされたカテゴリーやページにも対応しているようですね。 パンくずを表示するプラグインは、「Yoast Breadcrumbs」や「Breadcrumb NavXT」がありますが、オールドファッションなやり方で実現してみたとのこと。 使い方は、「The PHP Code」に書かれているソースを、WordPressの「functions.php」に追記することで、「<?php get_breadcrumbs(); ?>」と書いて呼び出すことができます。 CSSでのスタイリングもされているので、一度見てみてはいかがでしょうか。 How To: Breadcrumbs in Word
CSS３を使った、強くて速いデザイン例 – creamu
CSS3でできることをいち早く知っておきたい。 そんなあなたにおすすめなのが、『Stronger, Better, Faster Design with CSS3』。CSS３を使った、強くて速いデザイン例です。 以下の例が紹介されています。 Inline Form Labels inputのフィールドに透かしテキストを入れる方法。MobileMeで使われていますね。フォーカスした時にopacityで透明度を変化。デモはこちら Fast, Easy Drop-in Modals 綺麗なグラデーションの背景と、ドロップシャドウのついたモーダルダイアログ。美しい。デモはこちら Newspaper Layouts with Columns and Image Masks 新聞紙のような綺麗なカラムレイアウトと、グラデーションによるイメージマスクの例。デモはこちら CSSのコーディングで表現力が増え
UIデザイン / モックアップ作成に使える素材集 – creamu
UIデザインやモックアップ作成のための素材を探している。 そんなときにおすすめなのが、『A UI Design and Prototyping Treasure Chest』。UIデザイン / モックアップ作成に使える素材集です。 テンプレートやアイコンなど、いろいろと揃っていますね。 Browser Templates For The Website / Web Application Designer デザインラフの確認に使える、SafariやIE、Firefoxのブラウザテンプレート。800x600px、1024x768px、1280x1024pxの3サイズがPSDで用意されていて、レイヤーに分かれているので使いやすそうです Vector Pack: Browser Screens and Website Elements こちらもSafariのテンプレート。aiとepsが入っていて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3で作るドロップシャドウ – creamu
CSS3のベンダープレフィクスを自動で追加してくれる「CSSPrefixer」 – creamu
自動掃除機の上に乗るネコ – creamu
ヘッドライン要素に使えるボールドなフォント20 – creamu