CSS3で出来たクールなLightBox実装チュートリアル:phpspot開発日誌
CSS3 Lightbox | Codrops CSS3で出来たクールなLightBox実装チュートリアル。 もうなんでもCSS3でできるような気になってしまいますが、LightBoxもCSS3で出来るみたい。デモのクオリティも高いです セットのダウンロードも出来るので学習用と実用例として使えます。 クリックして開いた場合、CSS3によってオーバーレイでイメージが表示されます。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル アニメーションするバナーをCSS3で作るチュートリアル CSS3でクールな角丸テーブルを作る例 CSS3の機能をフルに使った価格表テーブル例 ピュアCSS3で動くiPhone4のデモ
無料写真素材ブログ
新着写真素材情報 お知らせ 2019年2月7日 この発想はなかった！一脚なのに安定性抜群『フットレスト付き一脚』 2017年8月21日 ELECOMデジタルカメラケース『GRAPHGEAR』が最適だったレビュー 2017年5月11日 機動性抜群のカメラ固定・ストラップショットが最高に使いやすい『211 CPS StrapShot』 2017年3月10日 互換機でも馬鹿にできない性能！タイマーリモートコントローラー 2017年1月27日 EOS Canon6Dバッテリーグリップ『BG-E13』互換機が良くできているレビュー 2017年1月13日 カメラ2台持ちに最適！『固定フック付きカメラベルト』が最高に使いやすい。 2017年1月5日 キャリブレーション機器X-rite『i1 DISPLAY PRO』レビュー 2016年12月22日 Canonスピードライト320EXレビュー 2016年1
１枚の画像をタイル状に並べてそれぞれアニメーションさせて切り替えるクールなjQueryサンプル:phpspot開発日誌
jQuery Stylish Background Image Sliding effect | image slideshow １枚の画像をタイル状に並べてそれぞれアニメーションさせて切り替えるクールなjQueryサンプル 説明が難しいのでデモを御覧ください。写真もいいのですが、タイル毎に切り替わるエフェクトはなかなかクールですね。 ファッションやアパレル関連のサイトで使うことができそうです 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 CSS3で実装された画像スライドショーサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」
[Picasa×iPhone] 目指せカメラロール0枚。iPhoneの写真を無限にアップロードする最もカンタンな方法。
ブログ移転のお知らせ！ ▼当ブログは移転しました！新しいサイトは以下となります！！ http://bamka.info ▼お手数おかけしますが、RSSの再登録もお願いします！！ http://feeds.feedburner.com/bamka iPhoneで撮った写真をPicasaへ。方法はいろいろあるのですが、今回は「制限容量にカウントされないでPicasaにアップロードする」ことに注力してみます。 というか、私がいつもやっていることをご紹介するだけですがｗ 使うのは「PictShare」というiPhoneアプリ。有料ですが、かなり高機能なアプリなので、入れておいて損はないと思いますよ♪ PictShare - multiple photos/movies uploader 2.6.1（￥250） カテゴリ: ソーシャルネットワーキング, 写真／ビデオ 販売元: itok - 啓 It
![[Picasa×iPhone] 目指せカメラロール0枚。iPhoneの写真を無限にアップロードする最もカンタンな方法。](https://cdn-ak-scissors.b.st-hatena.com/image/square/5135ff3cb83148f42de028d901fa264ce52c7dd2/height=288;version=1;width=512/https%3A%2F%2Flh5.googleusercontent.com%2F-bXxzEvNEuwQ%2FT5FkZIbT27I%2FAAAAAAAAU5Y%2FSS8oQsX_Zzw%2Fs144%2F%2525E5%252586%252599%2525E7%25259C%25259F%25252012-01-09%25252013%25252035%25252009-1.jpg)
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
無料・商用利用OK・バックリンク不要・著作権表示も不要で使える写真や日本語フォントなどの素材サイト集 - かちびと.net
少しリソースが溜まってきたのでリンク集に して開放します。バックリンク不要で、商用 の利用可能、著作権表示も不要のWebデザイン 向け素材サイト。商用で使ってもいいけど リンクしてね、といったようなCCのBY的な ライセンスだとどうしても個人的に使いにく いのでバックリンク不要は割りと必須です。 今までのリソースをまとめただけなのでほぼ全部既出だと思います。自分用リンク集なのでいろいろ適当です。 細かいライセンスもあるので利用規約には必ず目を通してください。 9search この記事の題名の条件の素材を紹介しているサイト。小物系探すなら最初にここ見たほうが早いです。 9search ソザィ-Sozay- こちらもこの記事の題名の条件で収集していますが、素材単位ではなく、Webサイト単位で紹介しています。国内多めですかね。 ソザィ-Sozay- 国内のWeb制作に役立ちそうな無料の写真素材や
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」:phpspot開発日誌
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」 2011年06月23日- A jQuery plug-in for Lens Effect Image Zooming ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」。 次のように、画像の特定部分の円形のみをズームするようなUIが簡単に作れちゃいます。 ECサイトなどで商品を拡大するように実装されていたらお客さんに喜んでもらえるかも。 レンズの大きさもピクセル指定で自由自在です。 白黒写真がレンズを入れることでカラーになるみたいな効果も。 レンズの色やサイズも選べます。 実装の容易さも素晴らしくて、.imageLensで初期化するだけです。 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」
簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」:phpspot開発日誌
簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」 2011年06月15日- jLinkPreview 簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」のご紹介。 リンクを合わせたときにリンク先のイメージが分かるといいですが、それをjQueryプラグインの形で、簡単に実装できます。 サムネイル画像にはwimg.caというサービスが使われています。 サムネイル表示の例 使い方は以下のように初期化すればよいみたい。 画像のプレロードや、サムネイルサイズ（幅・高さ）、フェードや背景色など自在にカスタマイズできますね プラグインもそこまで大きくないため、サムネイルのプロバイダを変更するのもソースをちょこちょこっと変えれば対応できます。 関連エントリ テキストシャドウを自在にアニメーションさせられる
PHPで画像のサムネイルを超簡単に作る方法「phpThumbnailer」:phpspot開発日誌
Index of /projects/phpThumbnailer PHPで画像のサムネイルを超簡単に作る方法「phpThumbnailer」 PHP+GDな画像のサムネイル作成って結構面倒だったりしますが、配布されているThumbnail クラスを使えば超簡単にサムネイルが作れます。 配布パッケージ内に、class.Thumbnail.phpが含まれていて、次のようなサンプルプログラムで簡単に画像のサムネイルを生成できます。 <?php include("class.Thumbnail.php"); $tn_image = new Thumbnail("sample.jpg", 300, 300, 0); $tn_image->show(); ?> プログラムでは、sample.jpg のサムネイルを 最大幅 300px, 最大高さ 300px のサイズで作成し、画面に出力します。 Th
[JS]かわいい猫画像になごんでしまった、指定範囲をフォーカスするスクリプト -Gallery Focus
オプションもリアルタイムに適用 Gallery Focusの実装 HTML フォーカスを与える画像を「#gallery」で内包します。 「#gallery」はjQueryのセレクタで指定できるものであれば、何でも可です。 <div id="gallery"> <img src="images/01.jpg"> <img src="images/02.jpg"> ... ... </div> JavaScript 「jquery.js」と当スクリプトを外部スクリプトとして指定し、下記のスクリプトを記述します。 $('#gallery img').galleryFocus(); スクリプトのオプション オプションでは、範囲のサイズ、フェードの量、適用範囲、反転、オーバーレイの有無を指定できます。 $('#gallery img').galleryFocus({ 'radius': 800, '
スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」:phpspot開発日誌
スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」 2011年06月01日- Welcome AlbanX.com スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」。 「Cloud Zoom」というjQueryプラグインがあって、こちらへのパッチとして動作するみたい マウスオーバーでも動くみたいですが、iPhone、Androidでタッチした際にも動きます。 指でそのままスライドさせればマウスオーバーのように商品を拡大表示できます。一度iPhoneなどでみてみましょう。 スマートフォン向けのショッピングサイトにおいて、商品のディテールを説明するにはこうしたUIってかなり有用だと思われます。 いかに小さな画面においても詳細を見せるか？という場合において１つの選択肢として覚えておいて損はな
[CSS]スクリプトや画像を使用しないで、さくさく動作するニュースボックスを実装するチュートリアル
省スペースにぴったり！ 複数のパネルをマウスホバーで表示を切り替えるニュースボックスを実装するスタイルシートを紹介します。 CSS3 Easy Newsbox [ad#ad-2] 対応ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Operaとのことで、CSS3対応ブラウザでもっとも期待通りに表示されます。 ※当方のIE6では期待通り動作しませんでした。 下記はCSS3対応ブラウザ：Firefox4でのキャプチャです。 角丸、ドロップシャドウ、グラデーションが適用されています。 デモページ：IE7で表示 IE7では、角丸やドロップシャドウやグラデーションは適用されませんが、各パネルの切り替え表示には対応しています。 [ad#ad-2] ニュースボックスの実装 HTML 各パネルはa要素で実装されており、div要素で内包します。 <div id="newsb
jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法｜BLACKFLAG
jQueryでの画像ビューアー用プラグインはたくさん公開されていますが、 単純にサムネイルを並べて、クリックしたらメインビジュアルが切り替わる シンプルなスライドショー的ビューアーを作ってみたので紹介してみます。 まずは動作のサンプルから。 サムネイル画像をクリックしてください。 jQuery SIMPLE IMAGE VIEWER【SAMPLE】 「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」サンプルを別枠で表示 下部に並べてあるサムネイルをクリックすると メインビジュアル部分がクロスフェードして切り替わります。 （自動でスライドする動作などは今回は付けていません。） サムネイルは透過具合でアクティブ状態か、 そうでないかを変化させています。 全体構成についてHTMLから。 ◆HTML <div id="viewer"> <div> <img src="img/p
Web製作者やブロガーならブックマーク必須な個人商用フリーな5つの画像サービス * 男子ハック
@JUNP_Nです。ブログを書いている時なんかにテキストばっかりじゃ記事が見にくい、何か画像を入れたいなってことがよくあります。そんな時に個人商用問わずフリーに利用できる画像サービスを5つ紹介します。 テキストだけじゃ見にくいので適度に画像を使ってアクセントテキストばかりの記事だと読みにくい。（逆にテキストだけのほうがいいって場合もあるかもしれませんが）。見に来てくれた人が「読みやすい」と感じてもらうためのふ画像も適度に使ったほうがいいだろうし、場合によってはスクリーンキャプチャを使うこともあるでしょう。 僕の場合はテキストだけで記事を書くことができていしまう場合でも、適度に画像を使ったり、上記のように見たらすぐわかる説明のような画像を作ることもしばしば。 基本的にはキャプチャを撮ったり、画像を作ったりしていますが、それ以外にアクセントというかイメージとして画像を使いたい時には画像サービス
Creating an Animated e-cards using jParallaxScript Tutorials - Web Development Tutorials
E-cards with jParallax. During browsing web I came across a very interesting plugin – jParallax, and suddenly remembered that soon the international women’s day, and decided that today will do something nice for our women. Our today’s article will be about how to create a nice e-card using our favorite library jQuery with own hands. What is nice – that we will able to put different images into dif
激安で日本的な写真素材、レンポジサイト一覧 | Maka-veli.com
写真素材、レンポジ（リースフォト、レンタルポジ、レンタルフォト、レンポジ、アリポジ、写真素材のことです）は、安かろう悪かろう。 無料もありますが、本当にクオリティが変わってきます。 良いものに越したことは無いんですが高い。 そして無料のは本当にクオリティが低い。 下記サイトは日本の素材が揃っていて、かつ安いのでよく使ってます。 自分でも整理したいので一覧化。 PIXSTA http://pixta.jp/ Fotolia http://jp.fotolia.com/ ビジンソザイ http://bijinsozai.com/ YOURSTOCK http://yourstock.jp/ PhotoLibrary http://www.photolibrary.jp/ modelpiece(無料) http://www.modelpiece.com/ 足成(無料) h
Mobily Playground - Creating a modern gallery with Raphael
Today I would like to show you how to create a modern gallery (with cool animation effect) using Raphael library and jQuery. First of all, check out Raphael website and read the documentation. In this tutorial we will use just a little part of this what Raphael offer. Create three files: index.html, default.css, init.js and download Raphael library. Then include all files in your head section: <li
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
写真加工.com
Shuffle Between Images Using JQuery