CSS3 Shapes | CSS3 Shapes Resource CSS3で描かれたシェイプのサンプル集。 CSS3でちょっとした図形を描いてみようといった場合に参考に出来ます。 図形そのままでは使えないかもしれませんが、ちょっとしたデザインのアクセントなどに応用することが出来るかもしれません ハートもちょっとCSSが長くなりますが描けます 関連エントリ アニメーションするバナーをCSS3で作るチュートリアル CSS3でクールな角丸テーブルを作る例 フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクールなLightBox実装チュートリアル

もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 2011年04月11日- Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 これ１つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。 フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定（左右上下など） ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供 スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気が

9 Useful PHP Functions and Features You Need to Know | Nettuts 知っとくと便利なPHPのテクニック９つが掲載されていました。 初心者の方は勿論、PHPを長年使ってる人にも使えるテクニックが載っていましたので勉強がてらにメモ。 func_get_args() 関数で可変引数 を受け取る 通常、関数といえば、次のように引数と共に定義します。 function hoge($arg1, $arg2) { } のように定義して引数を受け取りますが、好きな個数で引数を受け取りたい場合は、次のようにfunc_get_argsで受け取れます。 function hoge() { $args = func_get_args(); foreach ($args as $key=>$value) { echo "arg{$key} is $value

Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling | DevSnippets CSSオンリーでJSを使った風のよく使われるテクニック集１０。 よく使われているかどうかは実際はよくわかりませんが、ピュアCSSということでなかなか凄いテクニック集がまとまっています。 我こそはCSSマスターという方は覚えておいてもよさそうです。 写真ギャラリー カーソルを合わせると拡大するアイコン アニメーションするコンテンツスライダー アニメーションするプログレスバー ピュアCSSなLightBox かなり色々なテクニックがなされているようですが、実用的なものが多いですね。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 ピュアCSSで実装された吹き出しのデザイン例色々 クリーンなデザイ

60 Excellent Examples of Illustration in Web Design | Inspiration なんとなく和むイラストベースのWEBデザイン集が60サイトほどまとまったエントリのご紹介です。 イラストがうまい感じにWEBデザインに当てはめられており、イラストベースのサイト作りの際の参考に出来そう あえて探そうとするとなかなか無かったりするものですが、まとまっていると便利ですね。 関連エントリ 斬新なコメントフォームデザイン集 ビンテージ感が素晴らしいサイトデザイン集 デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集 黒ベースのクールなWEBサイトデザイン集

30 Awesome collection of high quality splatter brushes and tutorials | Richworks ペンキをぶちまけたようなクールなPhotoshopブラシ色々がまとまったエントリのご紹介です。 ヘッダーのバックグラウンドなんかに設定するとクールな印象を与えられそうですね。 是非活用したいものです。 関連エントリ 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット 光が超カッコいいPhotoshopのブラシ色々まとめ 手書き感が温かさを感じさせるPhotoshopのブラシ集 無茶苦茶クールな光のPhotoshopブラシ集

またまた登場！凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」 2009年12月16日- またまた登場！凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」。 Ext.js ばりにきれいなUIと多機能さで今後が期待されるJSフレームワークです。 次のような綺麗でリッチなインターネットアプリケーションが作れます。 デモページには多数のコンポーネントが掲載されていて色々できることがわかります。 GoogleMapや、各種UIパーツの他、３Dグラフなんかも面白いです。 JavaScript でクネクネ動く3Dグラフです。 以下のページを参照してください。 Ajax.org - The real-time collaborative application platform

ブラウザ上でC#やPHP5を動かせて遊んで学べる「CodeRun」が凄いです。 最初アプリケーションかなと思ったのですが、全てブラウザ上で動作するので、学習用やちょっとした動作確認に使えます。 ブラウザ上でコーディング 次のように、IDEアプリケーションのようなUIで、C#やPHP5.1を、ブラウザの上で動かすことが出来ます。 プロジェクト作成 New → Project を選ぶと、C#やJavaScript、PHPの色々なプロジェクトが作れることがわかります。 PHPのHellow World のソースが入ったコードがエディタに表示されました。このソースをいじって直接動かせます。 コードを動作テスト 次のようなコードを書いて「Run」ボタンを押してみます。 以下、出力例です。ちゃんと動きました。 c2d6c077f524683db2f00c0e975766810 1 2 3 4 5 6

PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」 2009年12月04日- PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」が便利です。 PHPを使っていて、JavaScript もかいているときに、PHPのあの関数をJavaScript で実装したいんだけどなぁ、という場合に索引から牽けて参考になります。 例えば、functions ページには使える関数がまとまっているのですが、array系、ソート系、入力チェック系やオブジェクト指向系、日付、ファイルシステム系、Math系、ハッシュなど実に多数のJavaScript用php関数が掲載されています。 例えば、addslashes だと次のような感じでJSのソースが見れます。 function addslashes (str) { return (str+'').repla

今年も沢山のアイコンセットを発見しましたが、2009年に発見した秀作アイコンをまとめてみました。 WEBアプリ汎用、ソーシャルアイコン、Eコマース用アイコン、その他に分類してます。 WEBアプリ汎用 Led Icon Set - Psdtuts+ MinIcons by ~kyo-tux on deviantART 32px mania Vaga Onebit free icon set いい感じのアイコンセット Project Icon Set | Dezinerfolio WooFunction: 178 Amazing Web Design Icons?|?WooThemes WP WooThemes Ultimate Icon Set ? First Release?|?WooThemes 綺麗で汎用に使えそうなアイコンセット集「Function Icons」 Icon Set b

肌をツルツルに綺麗にしてくれるPhotoshopアクションが凄い。 普通の写真をクリック一発で次のように、綺麗な素肌にしてくれるアクションファイルがdeviantARTにて公開されています。 以下の写真を見れば一目瞭然ですね。 使い方ですが、ダウンロードした、.atn ファイルを、Photoshop の「アクション」部分にドラッグ＆ドロップすれば使えるようになります。 以下のエントリを参照してください。 Enhancing skin color by ~mermes on deviantART 関連エントリ 写真を一瞬でクールに出来るPhotoshopアクションが色々 写真をクールに加工できるPhotoshopアクション集 １クリックで写真の印象を簡単に変えてしまうPhotoshopアクション集

秀逸なWEBデザインの注目すべき細部デザイン色々。 全体を見ていると見落としがちな細部ですが、細かいところにこだわりつつ色々なサイトの紹介がされています。 かなり細かいところですが、細かくこだわることで、サイトデザインの深みやインパクトが強められそうです。 CSSのテクニック的にも色々と使っていて参考に出来そうな部分も多そうです。 影や角の畳んでいる部分など詳細にアクセントを持たせている例 角丸で影付き。背景ともなじんでいる例 飛び出したナビゲーションメニュー。影もあり 凝ったドロップダウンメニュー 凹凸をうまく表現したタイトル＆メニュー リンク先、その他全て見るには以下のエントリを参照してください。 30 Web Designs with Amazing Attention to Detail

Super simple way to work with Twitter API (PHP CSS) PHPとCSSを活用して綺麗にTwitterメッセージを埋め込むサンプル。 Twitter の API を使い、次のような綺麗なレイアウトで、メッセージを埋め込むことが出来ます。 解凍すると、以下のようなファイルが存在しており、twitter_status.php の方にあるサンプルコードをPHPのページに埋め込めば即座にページに埋め込みが可能でしょう。 とはいえ、毎回叩くのは、ページが重い上、APIサーバが落ちた場合に、自サイトも引きずられるため、キャッシュした方がよさそうです。 PHPでパフォーマンス向上のためのキャッシュテクニック色々 で紹介した方法などで、一旦作成したコンテンツをキャッシュしておくことをオススメします。 関連エントリ PHPからTwitterに簡単に投稿できる15

JavaScriptを使った各種WYSIWYGライブラリまとめ。 こういった仕組みも今では真新しいものではなくなりましたが、それぞれ特徴があって微妙に使いどころが違う場合があると思うのでまとめ。 Yahoo UI Library ベースのWYSIWYG prototype.jsでクロスブラウザなWYSIWIGエディタ FCKEditor TinyMCE ３年程前ではこういった機能はHTMLだけでは不可能だと思っていましたが、今では当たり前になってしまいましたね。 個人的には、Ajaxぐらい素晴らしいJavaScriptを使った機能じゃないかと思っています。技術の進化って素晴らしいですね。

Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ

Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {

WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、