タグ

ブックマーク / phpspot.org (83)

  • iPad用のサイト作成に覚えておくこと色々:phpspot開発日誌

    Technical Note TN2262: Preparing Your Web Content for iPad appleのサイトにiPad用のサイト作成準備のためのページが上がっていました。 USの発売日に30万台発売ということで、日でもそれなりに売れることが予想出来ますが、今後iPad用にページを最適化する場合に覚えておくとよさそうです。 メモついでにご紹介。 UserAgent UAはiPadが入ってWebKitベースなので、AppleWebKit となるみたいです。 Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 プラグインは使わない Fla

    kyompi
    kyompi 2010/04/07
  • JavaScriptやPhotoshopなしにCSS3のみでボックスにリフレクション効果をあてるサンプル:phpspot開発日誌

    JavaScriptやPhotoshopなしにCSS3のみでボックスにリフレクション効果をあてるサンプル 2010年03月21日- - CSS Box-Reflect - Spiegelung ohne JavaScript und Photoshop - Webstandard-Blog - Webdesign und Webentwicklung JavaScriptやPhotoshopなしにCSSのみでボックスにリフレクション効果をあてるサンプルが公開されています。 リンク先のサイトは英語ではないので意味が殆ど分かりませんが、デモページのコードを見れば実装例が分かります。 ボックスの中身はテキスト情報なんですが、ここまでリフレクションしてしまうところは地味に凄いです。 勿論、同じ内容のボックスを2度定義するようなことはしていません。 関連エントリ CSS3を使った凄いアニメーション集

    kyompi
    kyompi 2010/04/04
  • 2chのdat落ちしたスレを右クリックで即座に蘇生させられるFirefoxアドオン「fire2chDat」:phpspot開発日誌

    fire2chDat :: Add-ons for Firefox 今開いているdat落ちした2chスレを右クリックで蘇生させます 2chのdat落ちしたスレを右クリックで即座に蘇生させられるFirefoxアドオン「fire2chDat」。 検索エンジンに引っかかって、有益そうなのに読みたいけど読めなかったという場合があったりしますが、右クリックで読めるようになるというのは便利かも。 「今開いているdatスレを蘇生させる」というメニューがあります。 復活できた場合、そのままスレを読めるので便利そうですね。

    kyompi
    kyompi 2010/04/04
  • CSSのrotationを使った時計「CSS Clock」:phpspot開発日誌

    CSS Clock CSSのrotationを使った時計「CSS Clock」。先日、「CSSのrotationを使ったアナログ&デジタル時計実装例」ということでCSS時計を紹介しましたが、こちらも一見の価値アリという風に思いましたのでご紹介です。 秒針が文字で、ハイライトがどんどん移っていくデザインになってます。 rotationが使えるようになると更に自由度が上がってWEBデザインのレイアウトも大きく変化していくことを感じますね。数年後のWEBデザインのトレンドが楽しみです。 関連エントリ CSSのrotationを使ったアナログ&デジタル時計実装例

  • CSSのrotationを使ったアナログ&デジタル時計実装例:phpspot開発日誌

    Jon Combe | Code | HTML clocks using JavaScript and CSS rotation 次のような、CSSのrotationを使ったアナログ&デジタル時計実装例が公開されています。 Flashっぽいのですが、Flashは一切使っていません。 左のアナログ時計もいいのですが、右のデジタル時計も前後の分と秒が若干rotateされて表示されてるのがクールですね。 こういうことも出来るんだ、ということで一度見ておいてもよさそうです。 実装ですが、JavaScript によって次のようにCSSのrotateプロパティをsetIntervalで定期的にあてていってるだけのようです。 -webkit-transform: rotate(42deg); -moz-transform: rotate(42deg); このプロパティがなかったらかなり大変そうですが、こ

    kyompi
    kyompi 2010/02/23
  • デザイン性の高いハイクオリティなフォント色々:phpspot開発日誌

    20 High Quality Free Fonts for Designers | Freebies デザイン性の高いハイクオリティなフォントが色々集まったエントリのご紹介です。 汎用的なフォント、というよりは個性を出したい場合に使えそうなフォントが色々とあってここぞ、という時に使えるかもしれません。 手書き風だけど綺麗なフォント 漫画っぽいフォント。色合いもいいですね 鉛筆で塗りつぶしたようなアナログ感があるフォント 丸い形が印象的なフォント どれも個性があってつい使ってみたくなるデザインですね。 関連エントリ カーブが美しいフォント色々 すごく良い感じの英文フォントいろいろ これは素晴らしいアートが詰まった24の絵文字フォント色々

    kyompi
    kyompi 2010/02/16
  • CSS3を使った凄いアニメーション集47:phpspot開発日誌

    CSS3を使った凄いアニメーション集47 CSS3を使った凄いアニメーション集がまとまったエントリが公開されています。 注意点としてCSSだけで実現しているわけでなく、jQueryなども使っている部分があります。 ただ、こういうことも出来るのか、という物が沢山で見ていて楽しく学習できます。 CSS3/jQuery Clock 一見Flashかと思えるような綺麗な時計のサンプル Multiple 3D Cubes with animation using CSS 3Dのキューブがなめらかにアニメーションします。 CSS3 Matrix Animation マトリックスアニメーション OS X Dock Mac OS X風になめらかに動作するドック 今の時期だと、CSS3で出来ることはまだ出尽くしていないと思うので、驚きのエフェクトを作れば世界をワッと驚かせることが出来るかもしれませんね。

    kyompi
    kyompi 2010/02/05
  • PHPでメールアドレスを画像化せずに簡単にスパム対策する方法:phpspot開発日誌

    hide_email PHPでメールアドレスを画像化せずに簡単にスパム対策する方法です。 方法というよりも関数が公開されていて、次のように非常に簡単に使うことができます。 <?php echo hide_email('test@test.com'); ?> hide_email 関数に 自分のメールアドレス を渡すだけです。 これだけで、次のようにメールアドレスがクリックできる形で表示されます。 [javascript protected email address] HTMLに出力されるコードは以下です。 <SPAN id=e282852682>[javascript protected email address]</SPAN> <SCRIPT type=text/javascript>/*<![CDATA[*/eval("var a=\"PcXq@l82y.H3I_zNAtLQbr7

  • 色々使えそうな自然に関する綺麗でリアルなPhotoshopブラシのまとめ:phpspot開発日誌

    24 Stylish and Natural Photoshop Brush Collections Media Militia 色々使えそうな自然に関する綺麗でリアルなPhotoshopブラシがまとまっていましたのでご紹介。 雲、木、植物、雷、滝などのブラシがまとまっています。リアルなのでバックグラウンドイメージなどに使うとよさそうです。 雲のPhotoshopブラシ。デフォルトの雲模様よりもリアルですね 木のブラシ。種類が色々 リアルな花のブラシセット 雷のブラシ 滝のブラシもあります こうしたリアルな素材は覚えておけばサイトの彩りに使うことができそうなのでストックしておくと良いかもしれませんね。 関連エントリ 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット 光が超カッコいいPhotoshopのブラシ色々まとめ 無茶苦茶クールな光のPhotoshopブラシ集

  • ストックしておくと楽できそうなPhotoshop用グラデーション392種類:phpspot開発日誌

    392 cool photoshop gradients ストックしておくと楽できそうなPhotoshop用グラデーション392種類。すでに紹介したものも含まれていますが、多数のグラデーションが紹介されてます。 ちょっとグラデーションを使いたいときにクリック一発で適用できるグラデーションのコレクションです。 あまり入れすぎるとスクロールバーが小さくなりすぎて使いにくい懸念もあるので入れすぎるのも問題かもしれませんが好みの効果を入れておくとよさそうですね。

  • 携帯サイト作成時等に役立つ表示ページのファイルサイズを表示してくれるFirefoxアドオン「lori」:phpspot開発日誌

    携帯サイト作成時等に役立つ表示ページのファイルサイズを表示してくれるFirefoxアドオン「lori」 2010年01月21日- lori (Life-of-request info) :: Add-ons for Firefox 携帯サイト作成時等に役立つ表示ページのファイルサイズを表示してくれるFirefoxアドオン「lori」。 携帯サイトだとページ容量が100Kぐらいを上限として作った方が無難らしいですが、ページを表示した時点でステータスバーにページサイズを表示してくれるFirefoxのアドオンがありました。 次のようにステータスバーに表示にかかった秒数とページサイズ、リクエスト数を表示してくれます。 携帯サイト作成においては Firefox の FireMobileSimulator でほとんどのことは事足りると思いますが、こういうアドオンでページサイズを見ておくことは重要です。

    kyompi
    kyompi 2010/01/21
  • ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」:phpspot開発日誌

    ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです(ブラウザごとにクッキーに依存した文字数制限などは存在すると思います) こういうことを1からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ

  • PHPでPageRankを計算するサンプルコード:phpspot開発日誌

    PHPでPageRankを計算するサンプルコードが公開されています。 次のようなデータからPageRankを計算するというものです。 次のような関数サンプルが公開されており、これによって計算します。 スコアが配列によって返却されます。 アイテムの重要度を作る場合のアルゴリズムとして覚えておいてもよいかもしれませんね。アルゴリズム自体もPHPで書かれているのでphpな方には理解しやすいです。 以下のエントリを参照してください。 PageRank In PHP - PHP/ir

    kyompi
    kyompi 2010/01/07
  • CSS2を使って簡単に画像のプレロードをするテクニック:phpspot開発日誌

    2010年あけましておめでとうございます。 今年は少し開始が遅くなってしまいましたが、日よりブログを再開させて頂きます。 今年もよろしくお願いいたします。 それでは早速、CSS2を使って簡単に画像のプレロードをするテクニックをご紹介。 次のようにCSS2の「content」プロパティにリソースを指定してあげることで先読みが可能のようです。 content: url(img01.jpg) url(img02.jpg) url(img02.jpg) 複数指定してもOKということみたいです。 対応ブラウザは以下となっています。 IE8+ FF2+ Safari 3+ Chrome 1+ Opera 9.62+ IE6,7は対応していませんが、<img> のようにして呼ばれた時に結局読まれるので、実装の仕方によっては注意が必要ですが、使えないということではないようです。 以下のエントリを参照して

    kyompi
    kyompi 2010/01/07
  • 超カッコいい光のブラシセットのまとめ:phpspot開発日誌

    超カッコいい光のブラシセットのまとめが公開されています。次のようにカッコ良いブラシで画像と組み合わせることでクールな画像が作れそうです。 ページヘッダーの画像なんかに使うとインパクトを出せそうですね。 以下のエントリを参照してください。 30 Incredibly Free Abstract Brush Sets for Photoshop | blueblots.com 関連エントリ 無茶苦茶クールな光のPhotoshopブラシ集

  • CSSで3D空間を表現するテクニック:phpspot開発日誌

    CSSで3D空間を表現するテクニックが紹介されています。 絵画の上にマウスカーソルをあわせて移動すると驚きの効果が得られます。 微妙に変わってます。具体的には実物を見たほうがわかりやすいですね。 以下のエントリを参照してください。 Romn Corts CSS 3D Meninas

  • テキストを画像の輪郭に合わせて折り返せる「jQSlickWrap」:phpspot開発日誌

    テキストを画像の輪郭に合わせて折り返せる「jQSlickWrap」。jQueryプラグインです。 使い方もjQueryプラグインなので簡単で、slickWrapというプラグインメソッドを呼び出せば実装できるようです。 <script type="text/javascript" charset="UTF-8"> $(document).ready(function(){ $('.wrapReady').slickWrap(); }); </script> </head> <body> <img src="./myImage.jpg" class="wrapReady" /> <p>Lots of text goes here..</p> </body> 対応ブラウザでないと動きませんが、表示が崩れたりエラーが発生したりするわけではないので使ってしまってもよいかも。 Google Chrom

  • PHPのあの関数をJavaScriptでやるには?をまとめた「phpjs.org」:phpspot開発日誌

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

  • いつもと違うよりリアルなドロップダウンシャドウを描画するPhotoshopチュートリアル:phpspot開発日誌

    いつもと違うよりリアルなドロップダウンシャドウを描画するPhotoshopチュートリアル。 Photoshopのレイヤー効果などで描画した影は以下のように、これはこれでよいのですが、面が宙を浮いているようにみえます。 ということで、レイヤー効果をつけた後、レイヤーをラスタライズし、次のように円形選択ツールで4つの辺を削ってみると、すこし硬めの紙を平面に置いたようなよりリアルな感じを出すことができます。 これは微々たる違いではありますが、比較するとこっちのほうがリアルに感じますね。 実際に写真を当てはめてみた図が以下です。 以下のエントリを参照してください。 Better Drop Shadows in Photoshop | Design Reviver 関連エントリ プロレベルのPhotoshopチュートリアル集 ボタン作成のPhotoshopチュートリアル集 飛び出る立体グラフィックを

  • phpコードの動作テスト時に使えるちょっとした小技:phpspot開発日誌

    phpコードの動作テスト時条件式作成ツールというのを作成・公開しました。 番の環境で動作の確認をしたい場合に、自分だけ動作させるように以下のようなコードを書く場合があります。 if ($_SERVER['REMOTE_ADDR'] == 'IPアドレス') { // テストコード } この短いコードですが、(1) 条件式を書く (2) IPアドレス調べる (3) IPアドレス当てはめ、のように3ステップ踏む必要があり、書くとちょっと面倒ですね。これをスニペットとしてコピペで使えるようにしたものです。 開いただけでコードが表示されてコピペして使えるのでコードテスト時に利用すると意外に便利です。 ツールといえるほどのものではないのですが、自分用においておきましたので参考までに、良かったら使ってください。 以下のエントリを参照してください。 phpコードの動作テスト時条件式作成ツール

    kyompi
    kyompi 2009/12/13