数字の足し算を行わせてCAPTCHA認証を行うPHPライブラリ「PEAR::Text_CAPTCHA_... 次の記事 ≫：FireBug1.0リリース！＆YahooでのFirebugデモムービー

25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー

Dynamic Page Flip v2 from shift control Based on the popularity of my original adaption of Macc’s page flipping engine, I’ve gone back and made several major improvements to the dynamic page flip files: Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」。 Webページだけど、本を見るみたいなＵＩにしたいっていう需要はなかなかあるんじゃないか、と思っていたのですが、そんなＵＩを実装するためのFlashサンプルが公開されました。 次の画像のように、マウスでページの右端をドラッグ＆ドロップでページをめくれます。 本の中身は自由に書き換えることができるの

JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」 2007年03月27日- ruzee.com - Steffen Rusitschka ShadedBorder - JavaScript Round Corners with Drop Shadow Rouding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed. JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」。 同様のライブラリに Nifty Corners がありますが、これを更に進化させ、使いやすく、高速に、かつよ

Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル＋画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変え

CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what problems can be solved with pure CSS. CSSの小技集、20個。 どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。 角丸 画像なしの角丸 投票用スターの作成 テーブルなしのフォーム リストをＣＳＳでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ 印刷とＣＳＳ RSSフィードにスタイルシートを指定 固定フッター 要素にHoverエフェクトを加える HRタグへのCSS ＦｌｏａｔのClearに関するテクニック CSSでポップアップ小窓 ボックスの見出し(Box Punch)を表現  CSSボタン オレンジのRSSボタンをP

Yahoo!UIライブラリとjQueryをミックスしたJavaScriptライブラリ「DED|Chain」 2007年03月22日- DED|Chain JavaScript Library DED|Chain is free open source software (BSD License) that will allow you to build first class, high-quality websites without the cruft.Yahoo!UIライブラリとjQueryをミックスしたJavaScriptライブラリ「DED|Chain」。 DED|Chain を使えば、jQueryの使いやすさそのままに、Yahoo!UI Library の便利さも享受できるようです。 このように、JavaScriptライブラリと他のJavaScriptライブラリを組み合わせてお互

DHTML Site - Free CSS Graph Resources Generators Often in web-based applications, developers want to be able to display on the fly graphs. フリーのCSSグラフまとめ１０個が紹介されてました。 CSSでいろいろとできるものですね。 Ajax MGraph PlotKit CSS Javascript Bar Charts Vertical Bar Graphs with CSS and PHP CSS For Bar Graphs CSS Vertical Bar Graphs Displaying Percentages with CSS Dynamic Pie Chart with CSS Real World Bar Graphs (with so

ZParse - Advanced Javascript Templating ZParse is a multi-purpose, extensible, self-defineable javascript template parsing system which lets you define your templating rules. 超高機能なJavaScriptテンプレートエンジン「ZParse」の紹介。 Zparseを使えば次のようなif文などのロジックも入った高機能なテンプレートをJavaScriptで使えます。 <% var name = "Solid Snake", address = "somewhere"; %> <div id="card"> <:if name && address:> <div>name: ${name} </div> <div>addre

HTMLをPDFに変換するサービスいろいろ。 HTMLで文書を組み立ててPDFに変換できるということで便利なHTML→PDF変換ですが、様々なサービスがあるようですね。 文書がどうしてもPDFである必要があるような場合もHTMLの知識さえあれば簡単ですね。 帳票を作ったり、ちょっとした文書を作ったりする際に便利につかえます。 HTML 2 PDF Online PDF Converter PDF Conversion Show PDF PDF Online HTML 2 (F)PDF Project PHP5でHTMLをPDFに変換するdompdf PDFの文書をテキスト抽出するツール

metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。ＣＳＳをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。

Kollermedia.at - The Website of the Freelancer Koller Jgen List of 25 Javascript/Ajax & CSS Tooltip Scripts List of 25 Javascript/Ajax and CSS Tooltips JavaScript/Ajax＆CSSなツールチップライブラリ集。 次のようにカーソルを合わせたときに説明を出すようなライブラリが沢山紹介。 Ajax Tooltip by dhtmlgoodies.com. [Example Page.] Ajax-Powered Help Balloons/Tooltips. Tool Tip Script by Cody Lindley. [Example Page.] jTip - a jQuery Tool Tip by Cody Lindley.

Videobox: Lightbox for videos, Youtube, Metacafe, Google Video, iFilm Videobox is a 6kb script, which shows your videos in the page with an overlay. スマートに動画を見せられるLightBoxのビデオ版「Videobox」。 画像サムネイルをクリックすると画像が拡大されるという仕組みのLightBox ですが、そのビデオ版がリリースされました。 サムネイルクリック後の拡大されたビデオをその場で再生できます。 ↓クリックすると… LightBox風に動画を表示できてます。 ビデオアルバムのＷＥＢアプリなんかを作るときに使えそうですね。 関連エントリ 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.

DHTML Site - 20 Free CSS Image Galleries Slideshows A gallery is often a nice way to show your images. Here are a list of 20 free image galleries and slideshows for use on your site. フリーのイメージギャラリー＆スライドショーWEBアプリ集。 次がその一覧。 zenPHOTO FrogJS Gallery Slideshow Alternative Javascript Flickr Slideshow JonDesign's SmoothGallery CSS Photo Shuffler Highslide JS Sliding Photograph Galleries easyALBUM CSS phot

XML Gallery 2 - FFiles 写真を無造作に置いた感じなＵＩの画像ギャラリー「XML Gallery 2」。 次のような写真を無造作に置いたようなＵＩなイメージギャラリーを作れます。もちろん、写真のドラッグ＆ドロップが可能です。 使い方は簡単で、表示したい画像を次のようにXMLで定義するだけです。 単純に画像を見せるよりも、直感的なＵＩで分かりやすく、あまり見ない珍しいＵＩということで、いろいろと使えそう。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」

WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」 2007年04月20日- Handling Keyboard Shortcuts in JavaScript Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」。 次のように定義することで、Ctrl+Shift+Xのショートカットキーが押された際の機能を実装できます。 shortcut(

vegUI Demonstration クールなUIを実現可能なAjaxフレームワーク「vegUI」 このライブラリを使うことで次のようなクールなブラウザ内ウィンドウＵＩを実現できるようです。 ライブラリには、Button, ContentBox, CheckBox, Menu, ScrollBarのようなUIに関わるようなクラスから、Ajax BridgeのようなAjax用クラスなどが提供されるようです。 ドキュメントも充実していて、なかなか使えそうです。 vegUI のドキュメント vegUI のデモ

prototype.jsベースのWYSIWYGエディタウィジェット「Control.TextArea」 2007年05月14日- Control.TextArea : Cross Browser TextArea Manipulation Decent, flexible WYSIWYG editing in the browser is still an inconsistent affair at best in terms of user experience, integration effort, and generated markup. prototype.jsベースのWYSIWYGエディタウィジェット「Control.TextArea」 利用にあたってのサンプルコードは次です。 ­textarea = new Control.TextArea('textarea_id');

Create Resizable Images With CSS | Smiley Cat Web Design I'm a big fan of layouts that still work if a user increases their browser's text size. テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック 方法１ 次のDIVがあったとして、 <div class="resize"></div> 次のＣＳＳを適用します。 .resize { background: url(image.jpg) -130px -140px no-repeat; border: 3px double #fff; float: left; height: 12em; margin: .2em 1em 1em 0; width: 12em; } すると、文字サイズを変更

DHTML Site - 10 Free CSS and Javascript Calendars Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. フリーのCSS＆JavaScriptカレンダースクリプトいろいろ 多くのウェブアプリに必要になってくるのがこのカレンダー機能なんですが、フリーで高機能なものが沢山出回っています。 ドラッグ＆ドロップなどでGoogleカレンダーライクなものまで色々とあるようです。 Monket Calendar Quick Calendar Using AJAX and PHP Integrating Googl