スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」:phpspot開発日誌
jQuery Marquee Animation Plugin Preview - CodeCanyon 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」。 ホームページをつくりはじめた時には誰もが使ったマーキー。覚えていくにつれ、ほとんど使われないかわいそうなマーキー。 そんなマーキーもjQueryで超かっこ良く、まるで映画のプロモーション動画に使われるようなエフェクトに生まれ変わったようです。 生まれ変わったマーキーを見てみよう 実装は超簡単！ <script language="javascript"> $(document).ready(function() { $('.marquee').fMarquee({width: 960, height: 100}); // サイズをオプション指定 }); </script> <!-- 内容はdivに入
ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ:phpspot開発日誌
65 Best Websites To Download Free High Quality Adobe Photoshop Brushes ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ。 60種類ものPhotoshopブラシのダウンロードサイトがまとまっており、まよったらこのエントリを見れば好きなシェイプは手に入るかもしれませんね。 ありすぎるという方は探しやすそうなサイトだけメモっておけばよさそうです。 関連エントリ 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット ペンキをぶちまけたようなクールなPhotoshopブラシ色々 バレンタイン特集なんかに使えそうなPhotoshopブラシ集
ストックしておくと楽できそうなPhotoshop用グラデーション392種類:phpspot開発日誌
392 cool photoshop gradients ストックしておくと楽できそうなPhotoshop用グラデーション392種類。すでに紹介したものも含まれていますが、多数のグラデーションが紹介されてます。 ちょっとグラデーションを使いたいときにクリック一発で適用できるグラデーションのコレクションです。 あまり入れすぎるとスクロールバーが小さくなりすぎて使いにくい懸念もあるので入れすぎるのも問題かもしれませんが好みの効果を入れておくとよさそうですね。
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
ブラウザ上でC#やPHP5を動かせて遊んで学べる「CodeRun」:phpspot開発日誌
ブラウザ上でC#やPHP5を動かせて遊んで学べる「CodeRun」が凄いです。 最初アプリケーションかなと思ったのですが、全てブラウザ上で動作するので、学習用やちょっとした動作確認に使えます。 ブラウザ上でコーディング 次のように、IDEアプリケーションのようなUIで、C#やPHP5.1を、ブラウザの上で動かすことが出来ます。 プロジェクト作成 New → Project を選ぶと、C#やJavaScript、PHPの色々なプロジェクトが作れることがわかります。 PHPのHellow World のソースが入ったコードがエディタに表示されました。このソースをいじって直接動かせます。 コードを動作テスト 次のようなコードを書いて「Run」ボタンを押してみます。 以下、出力例です。ちゃんと動きました。 c2d6c077f524683db2f00c0e975766810 1 2 3 4 5 6
JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル:phpspot開発日誌
JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
肌をツルツルに綺麗にしてくれるPhotoshopアクションが凄い:phpspot開発日誌
肌をツルツルに綺麗にしてくれるPhotoshopアクションが凄い。 普通の写真をクリック一発で次のように、綺麗な素肌にしてくれるアクションファイルがdeviantARTにて公開されています。 以下の写真を見れば一目瞭然ですね。 使い方ですが、ダウンロードした、.atn ファイルを、Photoshop の「アクション」部分にドラッグ＆ドロップすれば使えるようになります。 以下のエントリを参照してください。 Enhancing skin color by ~mermes on deviantART 関連エントリ 写真を一瞬でクールに出来るPhotoshopアクションが色々 写真をクールに加工できるPhotoshopアクション集 １クリックで写真の印象を簡単に変えてしまうPhotoshopアクション集
CSSで作るシンプルかつクールなボタンサンプル「Simply-Buttons v2」:phpspot開発日誌
CSSで作るシンプルかつクールなボタンサンプル「Simply-Buttons v2」。 次のような丸みを帯びたボタンや、角丸の綺麗なボタンのサンプルがダウンロード可能です。 CSSでスタイリングして、更にJavaScript で押した際のイメージ切替が行われます。 ボタンを押すと以下のようにボタンが凹みます。 テキストはなんでもいいので汎用に使えます。一度導入してしまえば次から簡単に綺麗なボタンが設置できますね。 ダウンロードは以下のエントリを参照してください。 Simply-Buttons v2 : p51 Labs
秀逸なWEBデザインの注目すべき細部デザイン色々:phpspot開発日誌
秀逸なWEBデザインの注目すべき細部デザイン色々。 全体を見ていると見落としがちな細部ですが、細かいところにこだわりつつ色々なサイトの紹介がされています。 かなり細かいところですが、細かくこだわることで、サイトデザインの深みやインパクトが強められそうです。 CSSのテクニック的にも色々と使っていて参考に出来そうな部分も多そうです。 影や角の畳んでいる部分など詳細にアクセントを持たせている例 角丸で影付き。背景ともなじんでいる例 飛び出したナビゲーションメニュー。影もあり 凝ったドロップダウンメニュー 凹凸をうまく表現したタイトル＆メニュー リンク先、その他全て見るには以下のエントリを参照してください。 30 Web Designs with Amazing Attention to Detail
人物の写真をアーティスティックにするPhotoshopチュートリアル集:phpspot開発日誌
人物の写真をアーティスティックにするPhotoshopチュートリアル集が公開されています。 自分の写真とかで試してみると楽しそうですね。 リンク先は以下のエントリを参照してください。 30 Photo Effect Photoshop Tutorials Every Designer Will Love | Graphic and Web Design Blog -Resources And Tutorials
木目のHi-Resテクスチャセット:phpspot開発日誌
木目のHi-Resテクスチャセットが公開されています。 木目といっても種類がいろいろとあるものですね。 ダウンロードは以下のエントリを参照してください。 15 High Resolution Wood Textures For Designers | Grafpedia
色々な種類の綺麗なテクスチャセットのまとめ集:phpspot開発日誌
色々な種類の綺麗なテクスチャセットのまとめ集。 実に多種多様なテクスチャセットがまとまっているエントリがNoupeにて公開されています。 それぞれ見るには以下のエントリを参照してください。 The Big Collection Of Free Design Textures - Noupe
「HiFi RegExp Tool」を使って超高速に学ぶ正規表現入門:phpspot開発日誌
「HiFi RegExp Tool」を使って超高速に学ぶ正規表現入門。 先日『その場で動作させて確認する正規表現入門ツール「HiFi RegExp Tool」』として視覚的に動作が分かる正規表現ツールをご紹介しましたが、このツールを使った正規表現の入門実習を実際にしてみましょう。 入力してその場でマッチングされた文字がリアルタイムにハイライトするのですぐ効果が得られ、学習ツールとして非常に便利です。 HTML5では正規表現が使える、ということで、まだやってないというマークアップエンジニアやデザイナーの方、プログラミング勉強中な方は速攻でマスターしちゃいましょう。 HTML5以外でも、Windows用のエディタ等で文字列を一括置換したり、JavaScriptやPHP、Perlなどの言語でマッチングや置換に使えて覚えておいて損はありません。 ツールのURL: HiFi RegExp Tool
じゅうたん風の美麗背景パターン素材集７０:phpspot開発日誌
じゅうたん風の美麗背景パターン素材集７０ということで、多数の背景パターン画像がdeviantARTなどからピックアップされて掲載されています。 背景画像にすればそれだけでオシャレなWEBサイトに変貌しそうです。テクスチャとしても使えます。 リンク先は以下のエントリを参考にしてください。 70 Beautiful Damask Patterns and Textures | Web Design Ledger 関連エントリ 200を超える非常に美しいPhotoshopのパターン集
これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック:phpspot開発日誌
Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なＣＳＳテクニック３０選 本の目次部分のようなリストをCSSでデザインするテクニック
Photoshopでアイコン作成のためのチュートリアル色々:phpspot開発日誌
40 Hand-picked Photoshop Icon Designs [Photoshop Tutorials] Photoshopでアイコン作成のためのチュートリアル色々紹介されています。 作り方を覚えておけば応用が利いてサイト用のアイコン作りなんかに役立ちそうですね。 関連エントリ カレンダー、バルーンなどWEBアプリに使えるハイクオリティアイコンセット「pinvoke」 ドット絵っぽい可愛い16x16のアイコン集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
質感がリアルで綺麗すぎるアイコンセットのまとめ:phpspot開発日誌
様々な形の吹き出しのPhotoshopブラシ集「Speech Bubbles」:phpspot開発日誌