Transparent custom corners and borders, version 2 | 456 Berea Street
It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. The technique is based on a combination of CSS and JavaScript, and gives you a lot of flexibility when creating rounded corners or special borders. Well, it’s time for an update. I haven’t added any revolutionary new feature
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
画面内に付箋を貼るようなUIの掲示板を作れるPHP＆jQueryなサンプルプログラム:phpspot開発日誌
AJAX-enabled Sticky Notes With PHP & jQuery ? Tutorialzine 画面内に付箋を貼るようなUIの掲示板を作れるPHP＆jQueryなサンプルプログラムが公開されています。 動くサンプルは次のようになっていて、画面にぺたぺたはったような面白いものになっています。サンプルプログラムだけではなく、チュートリアルも公開されています。 デモページ z-indexを調整して、クリックしたものが最前面にくるようになってます。 ノートの追加をする場合のUIもいい感じで、LightBox風の画面があらわれて、色を選べるようになってます。 ちょっとした連絡用に設置したりすると面白いかもしれませんね。
グーグル、新プラグイン「O3D」をリリース--ブラウザで3Dグラフィックスを実現
Googleは米国時間4月21日、ウェブアプリケーションに、PC上のプログラムが使用可能なコンピューティングパワーを付与する、一連の取り組みの重要な一環として、ブラウザに高速3Dグラフィックスをもたらす新ソフトウェア「O3D」をリリースした。 O3Dは、Windows、Mac OS X、Linuxのプラットフォーム上で、Internet Explorer、Firefox、Safari、Chromeに対応したブラウザプラグインとなっているが、Googleは、最終的にはブラウザへダイレクトに搭載していきたいと考えている。O3Dは、より高度なゲームおよび他のアプリケーションを実現するように、開発者のウェブベースのJavaScriptプログラムが、コンピュータのグラフィックスチップにダイレクトに連動するインターフェースを提供する。 Googleは、O3Dの新技術を、同社の公式ブログ上で発表している
意外性が心地よいJSメニューのWebデザイン (1/5)
JavaScriptライブラリでリッチなUIを手軽に作れるようになったのはいいけど、最近ではそれもすっかりマンネリ気味。そろそろ、ほかのWebデザイナーとは違うデザインを取り込んで何とか差をつけたい――。そんなときは、国内のデザイン誌やブログではなく、海外サイトに目を向けてみてはどうでしょうか。たとえば、優れたWebサイトを紹介している「dzineblog」というブログなら、海外のWebデザインのトレンドをいち早くチェックできます。 そのdzineblogの膨大なコンテンツの中から、今回注目するのが、「10 Websites That use JavaScript Animation Effectively!!」という少し前のエントリー。JavaScriptによるアニメーションエフェクトを上手に使っているサイトを取り上げており、その中から、「Playground Blues」をピックアップ
Google Visualization APIを使ってWebアプリケーションにグラフィカルデータを表示する
はじめに 最近は、ネットワーク上に存在するデータがますます増えており、その形式や場所もさまざまです。こうした傾向から、ビジュアル分析、つまりネット上のデータから必要な情報を抽出して一目で分かるように提示する機能が重要になっています。開発者の多くは、このようなデータを集めて分析し、ダッシュボード、レポート、グラフのようなフォームにまとめて公開する役割も担っています。その際に威力を発揮するのが、表現力の高い画像や図表です。 こうした新たな要求に応えるために、Google Visualization APIは、開発者がビジュアル分析を行う一元的な方法と、データをビジュアル化するほとんどの状況に対応できる豊富なグラフィックコンポーネントやグラフ作成コンポーネントを提供します。このAPIは、データ交換の仕様と一連のライブラリで構成されています。これらのライブラリを利用することで、開発者は、構造化され
あのFlashサイトのUIをjQueryで作る (1/5)
「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1本の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。 今回のお手
jQueryアニメ＆エフェクト合わせ技で画像を拡大
コンテンツの魅力を引き立て、十分に伝えるためには、時には“一歩引いた”Webデザインがいいケースもあります。たとえば、自身が手がけた仕事を紹介するデザイナーのポートフォリオサイトがそうかもしれません。ポートフォリオサイトそのものを作品と見なして、凝ったビジュアルデザインを作り込むこともできますが、過去に手かげた作品が豊富であれば、それらの個性を生かすシンプルなデザインもいいでしょう。 スイスのデザイナーユニット「Contreforme」のポートフォリオサイトは、後者のアプローチ――各々の作品を引き立たせるサイトデザイン――を採用しています。ただし、それだけではありません。このサイトが採っているもうひとつの手法が、アニメーション／エフェクトによる楽しい演出です。今回はこのサイトの技に注目してみます。 今回のお手本サイト：『Contreforme』 企業のCI策定やグラフィックデザイン、Web
[JS]ブラウザのサイズに合わせて画像サイズを最適化するスクリプト
maxImage demo 上記のデモでは、右側の画像がブラウザのサイズに合わせて、はみでないようにリサイズされて表示されます。 デモは他にも多数あり、下記は背景画像をブラウザのサイズに合わせて最適化します。
CGデザイナー・Webデザイナー・グラフィックデザイナーのためのクリエイティブ・タブロイド withD（ウィズ・ディー）
2009.06.30 | トピックス クリエイティブ・タブロイド withD休刊のお知らせ 2009年6月30日をもって休刊させていただきました。 ご愛読いただき、ありがとうございました。 2009.06.29 | インスピレーション・ネタ探しの旅 行動につながる情報を見つけ出す インスピレーション・ネタ探しの旅 ♯26 ミキチョクシ（ペタビット／ナフタリン）
とても洗練されたＵＩの日付ピッカー＆カレンダー集:phpspot開発日誌
Beautiful datepickers and calendars for web developers とても洗練されたＵＩの日付ピッカー＆カレンダー集のエントリが紹介されていましたのでピックアップ。 日付入力も便利だけでなく、クールに行えます。 datepicker シンプルだけどクールなカレンダー jquery datepicker From〜Toが指定できるカレンダー Calendar 立体的でクールなＵＩ jPint iPhoneっぽいＵＩ 全部見る たくさんありすぎて迷いますが、サイトのＵＩや、用途に応じて使い分ければ便利そうですね。 関連エントリ 超クールなカレンダー型日付入力補助用JSライブラリ カレンダー、バルーンなどWEBアプリに使えるハイクオリティアイコンセット「pinvoke」 日付入力を便利にするカレンダー/日付ピッカー集
おそろしく高機能でフリーなFlashフォトギャラリーの決定版「dfGallery 2.0」 - GIGAZINE
AJAXによって複数の好きな画像を一気にアップロードし、それをフォトギャラリーとしてページに埋め込んで表示できるのがこの「dfGallery 2.0」。フルスクリーンモードにすることもでき、FlickrやPicasaのアルバムと連携可能で、カスタムテーマとマルチスキンによって見かけやレイアウトを大幅かつ自由に変更可能で、さらに管理用のコンソール画面、複数のギャラリーセットとアルバムのサポート、BGMの再生なども可能です。これだけ高機能であるにもかかわらずフリーでの利用（Apache License 2.0）が可能となっており、あらゆる局面で利用可能となっています。 実際の動作デモやインストールとカスタム方法を解説したムービーの再生などは以下から。 dfGallery 2.0 - Free Flash Gallery | Dezinerfolio 上記ページからこの「dfGallery 2.
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
複数階層のドロップダウンメニューを作成するサンプル:phpspot開発日誌
JavaScript Dropdown Menu with Multi Levels - Web Development Blog 複数階層のドロップダウンメニューを作成するサンプル JavaScript Dropdown Menu Demo ul と li の階層構造によって作られていて、初期化は次のように簡単に行えます var menu=new menu.dd("menu"); menu.init("menu","menuhover"); これはなかなか良さそう。 関連エントリ デザイン性に優れたCSSメニュー集 綺麗で立体感のあるサイトメニュー素材 使えるCSSメニューいろいろ アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 Flash製のドロップダウンメニューを作成するWEBツール
これは面白い！奥行きを感じさせる動作をするjQueryプラグイン·jParallax MOONGIFT
な、なんじゃこりゃぁと思わざるを得ないようなJavaScriptの登場だ。JavaScriptはNetscapeがあった時代からあるもので、ずっと昔から存在している。単なるサイトの装飾扱いだった時代を経て、Ajax、prototype.js、YUI、Ext-JSなどここ数年で一気に進化を遂げている。 複数の画像によって、まるで中に入り込んだかのように動かすことができる その留まる所を知らない進化の最新系を見られるのがこのjParallaxというjQueryプラグインだ。JavaScriptなのでもちろんソースコードは公開されているが、ライセンスは特に明記されていなかったのでご注意いただきたい。 jParallaxは言わば複数の画像をレイヤーを重ねるがごとく表示して、マウスの動きにあわせて上下左右にちょっとずつずらして表示を切り替える。それによってまるで遠近感をもって動いているかのような印象
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
はじめてのjQuery
IDEA * IDEA
IDEA * IDEA
