[CSS]アイデアが面白い！画像に美しいインタラクションを加えるスタイルシート
風景写真など、普通の画像の上にグリッドを描き、各マス目をホバーした際に尾ヒレのようにフェードで追従させるエフェクトが美しいスタイルシートを紹介します。 便利になるとかそういった類いのものではありませんが、ちょっとした何かに使ってみたいですね。 JavaScript無しというのはポイント高いです。 デモのアニメーション 実際の動作は下記ページで確認できます。 デモはCSS3対応ブラウザでご覧ください、Chromeが一番美しくエフェクトを描画します。 LeTrailing Effect 実装はシンプルで、あえて難点をあげれば空divを数多く使うことでしょうか。 HTML 画像はbodyの背景で表示されているので、HTMLはグリッドを描くdivだけです。 <body> <div class="div"></div> <div class="div"></div> ... ... <div cla
画像のdiffができるjQueryプラグイン「TwentyTwenty」:phpspot開発日誌
ZURB ? Interaction Design and Design Strategy 画像のdiffができるjQueryプラグイン「TwentyTwenty」。 画像の上にスライダーを付けて、ドラッグ＆ドロップで移動できるようなUIが作れます。 激的ビフォアアフターなUIを作りたい場合に最適。 マークアップとJSコードは以下。超簡単。 関連エントリ Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」 サムネイルをクリックでその場で画像ズームできるjQueryプラグイン「Ion Zoom」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」 画像レイアウト関連で便利なjQueryプラグイン等まとめ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」
レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」:phpspot開発日誌
S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」。 次のようなオシャレなギャラリーを作ることが出来ます。シンプルかつ必要十分な機能を備えています ギャラリー実装の際の１つの選択肢としてご紹介。 関連エントリ HTML5＆CSS3なクールでレスポンシブが良い感じのイメージギャラリー実装jQueryプラグイン「least.js」 画像を細長切りにしたオシャレなギャラリーを作れるjQueryプラグイン「Stripte」 Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」
CSS3のふわりとしたアニメーションが気持ちいい画像ギャラリーを実装するチュートリアル
CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 デモページ：サムネイルのホバー時 サムネイルのホバー時だけでもキャプションの表示だけでなく、画像などのサイズ変更、テキストの表示、各アイテムの可視化、配置変更などもアニメーションで行われています。 実装 実装はポイントをまとめて紹介します、Stepは3つです。 元記事では詳細に書かれているので、参考にしてください。 Step 1: HTML 画像、2つのパラグラフ、タグが一つのセットになっており、それぞれをリスト要素で実装します。 <ul class="portfolio-items"> <li class="item"> <figure> <div class="view"> <img src="images/1.jpg"> </div>
エレメント上にラベルを付けるためのCSS「Label.css」:phpspot開発日誌
Label.css - Label every thing! エレメント上にラベルを付けるためのCSS「Label.css」 例えば画像なんかの好きな位置にかぶせる形で文字ラベルを付けたい場合にclassとdata-label属性を付与するだけで簡単に付けられます。 フェードアニメーション等のエフェクトも付けられるみたい CSS苦手という方は簡単に使えるので覚えておいてもよいかも 関連エントリ ピュアCSSでコンテンツスライダーを実装できる「Gallery CSS」 Flashみたいに美しいCSSテキストアニメーションデモ リアルタイムにCSSを編集してサーバに保存できる「bluePen」 グラデーション生成や角丸、ボックスシャドウをCSSで生成する際に使える「CSSmatic」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」
面白い！自分のサイトに高度な画像編集機能を提供する·jquery.deviantartmuro MOONGIFT
jquery.deviantartmuroはWeb画像編集サービスのdeviantART muroを埋め込みサービスとして呼び出すjQueryプラグインです。 Webブラウザ上でできることは多岐に渡る訳ですが、ペイントですらWebベースで行う時代になっています。その高機能ペイントサービスとして知られるdeviantART muroを自分のWebサイトに埋め込んで使えるのがjquery.deviantartmuroです。 この画像を自由に編集できます。 もはや普通のペイントアプリです。 レイヤーにも対応。 エクスポートできます。 拡大も可能。 囲い込みでの範囲指定も。これがWebアプリケーションとはすごい時代になったものです。 jquery.deviantartmuroはペイントソフトウェアとしての機能を提供する訳ではなく、あくまでもdeviantART muroの機能を埋め込みで提供してい
オーバーレイなどのブレンドモード効果を与えられる「jQuery Blend Modes」 – creamu
これはすごい、かも。オーバーレイなどのブレンドモード効果を与えられるjQueryプラグインです。 マウスオーバーすると画像が変化します。 オーバーレイ効果 焼き込み効果 $7で配布中のようです。 jQuery Blend Modes
レスポンシブな画像ギャラリーが作成できるjQueryプラグイン:phpspot開発日誌
jQuery Responsive Thumbnail Gallery Plugin レスポンシブな画像ギャラリーが作成できるjQueryプラグイン。 jQueryプラグインを使えば簡単にできる事は多くなりましたが、レスポンシブでもできるものはこれからどんどん出てきそうですが、その１つといえそう。 画像の下にサムネイルがあってクリックするとその画像に切り替わるというシンプルなものですが、レスポンシブに動いてくれて便利に使えそう レスポンシブじゃなきゃ使ってもらえない、なんていう時代がもうそこにあるのかも 関連エントリ HTMLメール用のレスポンシブテンプレート「Antwort」 レスポンシブでクールなCMS「Bolt」 レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 レスポンシ
[CSS]パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル
画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。 CSS animated profile cards 実装とデモ アニメーションは4種類あり、まずは共通のHTML/CSSから。 HTML 各パネルはリスト要素で実装し、デフォルトの画像のパネルはimg要素、切替時のテキストのパネルはリスト要素です。 「EFFECT」には、それぞれのエフェクトを入れます。 <ul id="[EFFECT]" class="profiles"> <li> <img class="pic" src="images/[PIC].jpg" /> <ul class="info"> <li><a href="[URL]">[NAME
[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2: HTML まずは、基本構造です。 HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」:phpspot開発日誌
jQuery Photoset Grid - Style Hatch 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 １つのdiv内に<img>で画像を並べるだけで写真をレイアウトしてくれるプラグインです。 コードは以下 次のようにレイアウトされます。 元の写真がいいというのはあるんでしょうけど、写真がよりオシャレに見えますね 関連エントリ テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 CSSレイアウトをWEB上でサクッと作れる「PageBlox」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 画像レイアウト関連で便利なjQueryプラグイン等まとめ これは新しい!パネルレイアウトが美しいスライドショー実装デモ コンテンツ幅に対してテキストを最大にして美し
プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js
コンカーブ 凹状に配置したパネルをスライドします。 Bespoke.jsの使い方 スライドショーの実装は簡単で、3ステップです。 Step 1: HTMLと外部ファイル スタイルシートとスクリプトを外部ファイルとして記述し、各パネルはsection要素で実装し、articleで包みます。 スタイルシートはテーマごとに変更します。 <link rel="stylesheet" href="path/to/my/theme.css"> <article> <section>Slide 1</section> <section>Slide 2</section> <section>Slide 3</section> </article> <script src="bespoke.min.js"></script> <script src="path/to/my/script.js"></scri
PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」:phpspot開発日誌
Swipeshow: the unassuming touch-enabled slideshow JavaScript library PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」 次のようなデザインで、スワイプで画像が遅れるスライドショーが実装できます 画像だけでなく、HTMLを埋め込むことも可能。主にスマホ用として便利に使えそうです。自動再生等必要な機能は揃っています 選択肢の一つとして考えても良いかも 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」
プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト
素人とプロを分ける4つのソフトを紹介します 少しでも早く、少しでも的確に伝えたい。そんなプロ根性を支える、無料ソフトを紹介します。 「しょせんは無料ソフトでしょ？」とあなどる無かれ、プロのデザイナー御用達のPhotoshopでもできないことをやってのけます。 目次 PNG画像を劣化させること無くサイズを圧縮する「PNGGauntlet」 JPEG画像を劣化させること無くサイズを圧縮するソフト「carmine」 JPEG圧縮で劣化した画像を綺麗に直す「Jpeg Enhancer」 デジカメの高感度ノイズを除去する「Neat Image」 PNG画像を劣化させること無くサイズを圧縮する「PNGGauntlet」 WebでPNGを圧縮してくれるサービスは多々ありますが、ネットワーク経由のやり取りのため、利用者の多い時間帯にはレスポンスが悪く、エラーで処理できない場合もあります。 WordPres
ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」:phpspot開発日誌
ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 2013年02月12日- Overview - jQuery Rondell ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」。 次のように、カルーセルやスライダー等、様々な画像ギャラリーのUIを実現することができます。 多機能だけじゃなくて、カッコいいところもいいです。サンプルサイトがBootstrapベースですが、Bootstrapベースのサイトに入れても違和感なく埋め込めるでしょう。 カルーセル スライダー スクローラー サムネイル付きギャラリー。動きもいい感じ 関連エントリ ブラウザ上でまるで美術館。3Dイメージギャラリーデモ 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン サムネイルがシャッフルされてク
PHPで画像の類似度判定のできるライブラリ
最近、大量の画像を分類する趣味をこなしていて、どうも重複画像があるような気がしていたのだが、僕の脳みそでは膨大な画像の中から類似の画像を探すことが出来ない。 そこで、どうにかして類似画像検索が出来ないものかと思っていた。 ImgSeek そこで検索すると、まず最初に引っかかってくるのはImgSeekであろう。基本的にはLinuxのGUIで動作する画像管理ソフトで、類似画像検索ができるというものだ。Pythonで書かれているが、これのサーバ版というものもあって、それがisk-daemonである。 だが、これがまた安定しない。 数千単位で画像を登録すると、メモリを延々と消費し続ける状態になってしまったり、なにもエラーを吐かずに落ちてしまったりする。 １ファイルの中に複数のDBを作れるので、DBを分割して、１DBあたりの画像数を減らしてみたりもしたが、DB数が50程度を超えた状態で再起動すると、
写真にインタラクティブなタグを付けてシェア出来るwebサービス「Stipple」がクールで面白い！*frasm
これは面白いですね。 なんか写真のシェアが面白くなりそう！@shintarowfreshです。 写真にインタラクティブなタグをくっつけてシェアするwebサービスの「Stipple」がなんか面白そうです。 Stipple - Your information and images together again.+ facebookがパートナーになってるみたいで、これからFBに実装されちゃいそうな感じの出来映えです。 説明するよりもやってみた方が早いんですが、こんな感じで写真に自由にタグをくっつけて、そのままシェア出来ます。 パソコンからご覧の方は写真にマウスホバーしてみてください。 youtubeのビデオや、FBのアカウント、リンク、Foursquareの位置情報、こんな感じでよく使っているサービスの情報をリンクを貼り付けるだけで簡単にタグとして付けることができます。 さらには、この状態で
[JS]多彩なアニメーションを備えたスライドショーがスクリプトを一行も書かずに実装できるスクリプト -Cycle.js
スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 Cycle.js Cycle.js -GitHub 対応ブラウザは下記の通り。 IE8+ Chrome Firefox Safari Opera TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。 いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。 Cycle.jsのセットアップ Cycle.jsのバリエーション Cycle.jsのセットアップ ベースとなるHTMLは非常にシンプルです。 スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。 <title>Cycle.js</titl
ブラウザ上でまるで美術館。3Dイメージギャラリーデモ:phpspot開発日誌
3D Image Gallery Room | Codrops ブラウザ上でまるで美術館。3Dイメージギャラリーデモ。 単なる画像ギャラリーではなく、周りの空間も再現したようなギャラリーが実現できています。 対応ブラウザでないと動作しませんが、将来的にはこうしたサイトも当たり前の物となっているのかも。 Safari等で見てみましょう 関連エントリ サムネイルがシャッフルされてクールなギャラリー実装「Photofy」 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン 動画ギャラリー用WordPressプラグイン10個
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photo | Kayanarumi Is Not Crash - カヤナルミは砕けない