STIMED.js | jQuery plugin for controlling CSS styles over time アクセス時間によってCSSの出し分けを制御できる「STIMED.js」 例えば夜におとずれると画面が黒く、朝だと白く、といったことが可能になります 日照のように背景を空色でグラデーションさせたり要素のrotate具合を設定できたりして面白いです 関連エントリ CSSとjQueryベースの画像マスクのエフェクト集 組織構成等の階層図をピュアCSSで美しく表示するサンプル
multiscroll.js - split multi-scrolling pages plugin 迫力のあるページ切り替えが可能なマルチスクロール効果実装「multiscroll.js」。 ページを半分に分割してそれぞれ逆方向にスクロールして迫力のあるページ切替え効果が作れます パララックスはもうよくみる物になってしまいましたが、こちらは新鮮かも。 関連エントリ フルページスクロールするサイトを作るのに使える「fullPage.js」 スクロールに連動してアニメーションやパララックス効果が作れる「ScrollMagic」 スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 完璧なスクロールバーを実現できるjQueryプラグイン「perfect-scrollbar」 スクロールにより積み重なるナビゲーションヘッダーを作れる「Slinky.js」
Free download: 200 vector icons | Webdesigner Depot 200種類のフリーな汎用ベクターアイコンセット 若干クセのあるアイコンセットですが、他にはないアイコンも詰まっているようです。 ベクターなので便利に使えそうです 関連エントリ 文具等のフラットなステーショナリーアイコンセット ピュアCSSで描かれたアイコンセット「Cikonss」 フリーな1262種類のフラットアイコン「COSMO MINI」 ハイクオリティなソーシャル向けのフラットアイコンセット 200個のフラットなフードアイコンセット 好きなアイコンだけ選んでアイコンフォントにできる「Fontastic」
Parsley.js 属性設定で簡単にデータバリデーションが出来るJSフレームワーク「Parsley.js」 <input>に対して data-* の形で属性を設定すればデータのバリデーションが簡単にカッコよくできちゃうフレームワークです。 例えば、<input data-type="email">って記述しておけば、そのinputにメールアドレス以外が入力されていればエラーを検出出来ます。 emailだけでなく、数値、URL、アルファベット等のチェックに対応。その他、最低・最高の長さの設定や、必須項目、範囲設定、正規表現、リモートURLによるパラメータチェックができ、とにかくバリデーションするなら全体的に機能が詰まっています。サンプルサイトもBootstrapベースで作られていて、Bootstrapとも相性が良さそう。 FE側でのバリデーションをスマートにやりたいって方は評価してみてもよ
16 Ridiculously Impressive CSS3 & HTML5 Experiments | Free and Useful Online Resources for Designers and Developers これは見ておくべきCSS3&HTML5の実験16サイトまとめ 数年前なら誰もがFlashで出来ていると疑わなかったようなデモがHTML5&CSS3で実現されています。 これだけのことがWEBでできるんだという部分を把握しておく意味でも見ておいたほうがよさそうです これだけ出来ることが増えていくと自由な反面、WEBも開発コスト等があがっていきそうで怖いところがありますね 関連エントリ WebCamで撮影をHTML5で実現するデモ HTML5を使ったクールなサイトデザイン集21 HTML5のゲームエンジン「Quintus」
PHP Master | Creating a PHP OAuth Server PHPでOAuthサーバを作成するチュートリアル。 Facebook、Twitterやその他メジャーなサイトではOAuthが実装されており、非常に便利に使えますね ユーザ規模が大きなサービスなら、OAuthは認証に使うだけじゃなく、自分のサイトに実装するのもよいかもしれません。 Githubにあるサンプルソースと解説を読みつつ実装すれば実装する際に役立ちそう。 いざ実装しろ、と言われた場合のヒントとして。 関連エントリ PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」
Post/jquery bullet graph - dingsdax jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」 select エレメントをプラグインで初期化すると次のようなグラフが描画できます。 棒グラフを細分化して使い方次第で情報を分かりやすく表示できます。 売上等のパフォーマンスを分類して目標ラインに到達しているかどうか、といった表示をする際に使えそう 関連エントリ テーブルをグラフに変換してくれるjQueryプラグイン CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 クールなドアノブ風の%グラフを描画できるjQuery Knob
CSS Layout Generator | PageBlox - home CSSレイアウトをWEB上でサクッと作れる「PageBlox」。 次のような画面で、カラム幅をクリックで簡単に拡大縮小できたり、ブロック要素を消したり移動したり、追加したりといったことが自由にできます。 基本となるテンプレートを選んで修正すればより効率があがりそうです export で簡単にHTMLコードを生成できます。 とりあえず素早くレイアウトを組むのには便利に使えそうですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」 アイテムをドラッグ&ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 これは新しい!パネルレイアウトが美しいスライドショー実装デモ レスポンシブなレイアウト実装
Taking screenshots of websites in PHP PHPでWEBサイトのスクリーンショットを作成するチュートリアルが紹介されています。 スクリーンショットの撮影には wkhtmltopdf というオープンソースソフトウェアを利用します。 このソフト自体がMac OS XやWindows、Linuxで動作するコマンドラインツールとなっているようなのでクロスプラットフォームで動作します。 このツールを使えば、「wkhtmltoimage --quality 50 //phpspot.org/blog/ snap.jpg」のようにコマンドを打つことでスナップショットが撮れます。 コマンドラインオプションが多数あるのでPHPerじゃない方も覚えておいて損はなさそうです。 例えば、 JavaScriptをオフにした状態でスクリーンショットを撮ったり、高さや幅の指定、切抜きの
equalize.js ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 $('#height-example').equalize(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ&ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」
CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fonts WEBセーフなフォント一覧まとめ「CSS Font Stack」。 WEBセーフな英字フォントがプレビューつきでまとまっていて、クリックすると font-family: 〜の形式でクリップボードにコピーできます。 WEBフォントもいいんですが、そもそもマシンに入っているフォントが使えれば軽くてそっちの方がよい場合も多そうです。 (i) のアイコンにカーソルを合わせるとMacとWinでのシェアが表示されて分かりやすい Copy to Clipboard すると次のようなテキストがコピーされます。 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 関連エントリ フ
もう面倒なユーザ認証機能は1から作らなくてよいかも?PHPのOSS「AuthManager」 2012年08月13日- AuthManager - StitchApps もう面倒なユーザ認証機能は1から作らなくてよいかも?PHPのOSS「AuthManager」。 ユーザ認証型のサイトを1から作るとなると面倒な上に、もう誰かが良い物を作ってるんじゃないかという事を誰もが作り直してる気がします。 こういうもの自体をオープンソースにしちゃって誰もが使えるっていうのは素晴らしいですね。 Facebookによる認証やreCAPTCHAによるスパム防止、メールアドレスの認証機能といった標準で必要な機能が入っており、便利に使えそう。 で、ユーザ登録できるのはいいんだけど、肝心の制限はどうやってかけるの?というところは、次のように簡単にやってね、ということらしくお手軽。 ($sesslife自体がどこか
ImageMapster 次世代のイメージマップを実現できるjQueryプラグイン <map> と <area> タグを使って画像上の好きな位置、形でリンクを貼ることができますが、あのイメージマップをjQueryによって次世代にしてしまうプラグインが登場 イメージマップのエリア上をハイライトさせ、背景画像を別のものに差し替えるという効果をつけられます。(別画像はオプション指定) 画像の位置とリンクを関連付けるだけという味気ないWeb1.0なインタフェースをこのプラグインが少しだけリッチにしてくれます。 イメージマップってあまり使うことはありませんが、いざ仕事でこうしたUIが必要で、使わなきゃとなった時に、こんなことも出来るということを知っておくとありがたがられるかもしれませんね。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 小さ
レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 2012年07月10日- PHPImageWorkshop - PHP class using the GD library for image processing レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」。 画像生成のサービス等を作る際には押さえておきたいライブラリかも。WEBサービスにおいては画像生成はよく使われるものですから、覚えておいて損はないでしょう。 以下に行える処理の概要をご説明します。 画像合成 複数の画像を組み合わせて簡単に合成する機能。透過pngの画像を合成します。 合成結果。透過PNGによって綺麗に合成されていますね。 実装コードが分かりやすくて、次のように addLayer
22 Experimental WebGL Demo Examples | Awwwards 既にここまで出来るWebGLのデモ22。 ブラウザ上で3D描画が出来るWebGL。あんまり見ることが無いのでどこまで進化しているのかなかなか気づかないものですが、これらサンプルを見るとその進化に気付かされます。 まあ重いからダメとかいう部分はありつつも、PCの性能はどんどん上がっていって、ブラウザ上のゲームなんかではそれなりに使われていくものなのかも。 WEBに関わる人なら一度見ておいても損はないでしょう Hello Racer - レーシングカー描画デモ MecaBricks - レゴを組み立てる等 WEBサイト作成において必須になってくるわけではなさそうですが、WEB製作者にとっては触れる必要性は出てきそうですね。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築されたサイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く