タグ

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

  • PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」:phpspot開発日誌

    CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集

  • Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」:phpspot開発日誌

    Open-sourcing Stylo by Alex MacCaw Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」。 CoffeeScript, Spine, Sprockets といったテクノロジーを使っているらしいです。 なんかwebkit限定だったりしますが、インタフェースが良い感じに出来ていて、同じようなツールを作るのに参考にすることもできそう。 ツール自体は非常にシンプルで図形を配置して図形をカスタマイズしたり文字を配置したりといったものですが、容易に習得でき快適に動くため素早くモックをブラウザ上で作りたい際に使えそう 単に置くだけじゃなくて、オブジェクトを綺麗に並べるような機能もついており、シンプルだけど、こういう地味に大切なところはちゃんとしています。 Twitterエンジニアが作ったということで、なんとなくインタフェースの印象がBootstr

  • PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」:phpspot開発日誌

    PNGGauntlet - PNG Compression Software | BenHollis.net PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」。 いくらブロードバンドだからといって転送量のかかるサーバなどでは出来るだけ転送量を抑えたほうがいいですし、その方がページスピードも早くなる場合もありそうです。 次のようなインタフェースを持ち、ドラッグ&ドロップで簡単に圧縮できます。 関連エントリ ドラッグ&ドロップでCSSを瞬時に圧縮できるブラウザツール「excssive.com」

  • CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」:phpspot開発日誌

    CSS3 Click Chart | CSS3 Browser Support and Information CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」。 次のようにページヘッダにチートシート的にプロパティ等がならんでおり、クリックすれば即座にサンプルコードとライブデモが表示されます。 コピーしてすぐに使えちゃいますね。 サポートブラウザも教えてくれます 関連エントリ CSS3で出来たクールなLightBox実装チュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル アニメーションするバナーをCSS3で作るチュートリアル

  • サイト用の画像をブラウザ上で一括で最小化できる「Kraken.io」:phpspot開発日誌

    Kraken | Online Image Optimization Tool サイト用の画像をブラウザ上で一括で最小化できる「Kraken.io」 使い方は超シンプルで、「Select Files from disks」をクリックすると、ファイルが複数選択できるダイアログが開くので一括で開くを押すだけで自動でアップロードが始まって、Ajaxで変換され、すぐにダウンロードできます。 複数ファイルの場合はZIPでまとめたアーカイブダウンロードも出来ます すぐにファイルが圧縮されダウンロードリンクと、ZIPで一括ダウンロードボタンが出ます 手元のJPEGで試したところそこまでクオリティは落ちませんでした。 速度に加え、転送料金がかかるサーバではサイズは非常に重要で、これらが簡単にブラウザだけで出来るってのは便利ですね 関連エントリ WordPressでのページ表示高速化の色々まとめ サイトのク

  • もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」:phpspot開発日誌

    もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」 2011年05月11日- 追記)じっくり利用して見た方が以下のような問題点を示してくれました。 ・利用勝手があまり良くなく、日語環境を前提には、考えていないように思われます。 ・ActionScript の記載方法が不明。 ・モーショントゥイーンの機能不足 レビューを参考にさせて頂く限り、現段階では「Flashを買わなくてもいい」という結論には当然ならないと思います。いつもながら脊髄反射的にエントリにして、不快にさせてしまった方々には申し訳ありませんでした! 但し、簡易的なアニメーションがフリーで作れるということは有用で、掲載されているサンプルの質も高く、フリーである限り機能のデグレードはある程度しょうがないと思うのと、話題に上がることで今後の発展にも期待していきたいと思い

  • 「やる気」を上げる方法の良記事色々まとめ:phpspot開発日誌

    どんなギークや、頭の回転が速い人であっても、やる気がないと生産性は高まらず、やる気がある人と仕事のレベルが同等か、それ以下になることも周りを見ていて感じます。 やる気を管理できれば、出来る人はより生産性を大きく上げられ、現時点であまり出来ない人でもやる気さえあればどんどんレベルを上げていけそうです。 というわけで、最近人気の「やる気」を上げる方法の良記事を色々とまとめてみました。 「充実感」を感じやすい人、できない人:日経ビジネスオンライン のめりこみ・没頭の科学。フロー理論について。 ゲームはフロー状態を発生させる効果的な装置。同じように仕組みを作って仕事に適用すれば生産性はあがりそうです。 【1】「脳とやる気」1秒で勉強意欲に火がつく法 | 達人のテクニック 脳科学からみるやる気の管理方法。 まずウォーキングや雑用などで準備運動からはじめて徐々にやる気を上げていく科学的な方法について解

  • Twitterでフォローする際に参考にできるページのまとめ:phpspot開発日誌

    Twitterをはじめたばかりの方は誰をフォローしたらよいか分からないということで、色々なサイトでTwitterアカウントをまとめて掲載したりしていますが、そういうサイトも色々あるようなので、それらをまとめてみました。 まとめサイト ITmedia Twitter ITMediaの著名人・企業アカウントリスト フォローすべきTwitterアカウント一覧 - IDEA*PAD wefollow ブリトニーやオプラ等の海外著名人や企業家、ニュースサイトやミュージックなどがまとまってるサイト。タグ検索可能。 TwitterにいるPHPのすごい人リスト | Shin x blog PHPer は必見のリスト Twitter政治(α) / ぽりったー(politter) 政治家のツイッターをまとめ表示したサイト AMNパートナーブロガーのTwitterリストを作ってみました。|ブログ|Agile

  • マウスオーバー時にクールに画像を切り替えるjQueryサンプル:phpspot開発日誌

    Sliding Boxes and Captions with jQuery | Build Internet! マウスオーバー時にクールに画像を切り替えるjQueryサンプル。 マウスオーバーで滑らかにキャプションが現れたり、画面を切り替えたりできるサンプルのデモとダウンロードが出来ます。 デモページ CSSをでレイヤーを重ね合わせて、上の要素をアニメーションさせてるだけのようですが、なかなかこれがクールですね。 $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'220px'},{queue:fals

  • jQueryを使ったFlashばりにクールなギャラリー「GalleryView」:phpspot開発日誌

    jQuery GalleryView - by Jack Anderson jQueryを使ったFlashばりにクールなギャラリー「GalleryView」が公開されています。 初期化に以下の数行を書けばOKみたい。 $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100 }); 動かしているHTMLのなかなか分かりやすいです。 関連エントリ 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 滑らかに画像が切り替わる超絶クールFlash写真ギャラリー「imagin」 色々な画像の見せ方を演出できる画像ギャラリー集

  • WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌

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

  • 1