Salesforce + Sprout Gain a full 360-degree customer view with this global partnership.
Social Media Image Resizing Tool | Landscape by Sprout Social
Salesforce + Sprout Gain a full 360-degree customer view with this global partnership.
Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
スマホ対策に！CSS3追加セレクタと疑似クラスの書き方サンプル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
九州ライターの村上です、皆さんこんにちは。最近最も嬉しかったことは筋肉痛がすぐに来たことです。そんな微妙なお年ごろ。 仕事でHTML/CSSの講師をしておりますが、近年スマートフォンの普及によりCSS3.0の導入も随分と浸透してきたように思います。あわせてセレクタの書き方が複雑になってきたので、今回はCSS3.0で追加されたセレクタと擬似クラスをまとめておきます。 実務でもよく使われるものには記述例を載せていますので、参考にしてください。 CSS3で追加されたセレクタと擬似クラスまとめ 属性セレクタ 構造疑似クラス ターゲット疑似クラス UI要素状態疑似クラス 否定擬似クラス 属性セレクタ 属性で設定した値に関するセレクタです。 E[Attr^=”val”] セレクタ［属性＾＝”値”］ Attr属性の値がvalで始まるセレクタに適用する。 【例】リンクの属性がhttpを含む（外部リンク）場
フォルダーに入れるだけで自動的に画像をリサイズできるフリーソフト「Dropresize」
画像ファイルを指定したフォルダーに入れるだけでリサイズでき、リサイズと同時に画像ファイルのバックアップ・ファイル名に文字追加・モノクロ加工・プログラムの実行・EXIF情報の消去などもできるフリーソフトが「Dropresize」です。インストール不要でWindows上で起動可能となっています。 操作方法などについては以下から。 Dropresize - SemiGeeK http://semigeek.wordpress.com/dropresize/ 上記サイトの「Download」をクリック。 ダウンロードしたZIPファイルをExplzhなどで解凍して、「Dropresize.exe」を起動。 操作画面が表示されます。 まず、画像ファイルが入れられると自動的にリサイズを実行するフォルダーを指定するには、「Add」をクリックしてフォルダーを選択します。 選択したフォルダーが表示されます。
ドラッグで全体を移動できる超オシャレなイメージギャラリー実装プログラム:phpspot開発日誌
Draggable Image Boxes Grid | Codrops ドラッグで全体を移動できる超オシャレなイメージギャラリー実装プログラムのダウンロードができます。 Flashを使わずにここまで出来るのは素晴らしい限り。画像をクリックした後のアニメーションも良い感じです。 デモページ ギャラリーサイトをやるなら、これでやってみたいと思ってしまうようなハイクオリティなギャラリープログラムでした。 チュートリアル形式でソースコードの解説も行われているので勉強にもなります 関連エントリ PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ 上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル
Automatic Image Slider w/ CSS & jQuery | Simple Image Slider Tutorial | jQuery Slider | jQuery Image Rotator
With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for
[JS]オーバーレイを使って、付加情報をかっこよく見せるjQueryのチュートリアル
オーバーレイを使って、付加情報をアニメーションでかっこよく見せるjQueryのチュートリアルを紹介します。 jQueryといえば、先週末に1.4.3にバージョンアップしましたね。 Annotation Overlay Effect with jQuery デモページ [ad#ad-2] 実装 HTML HTMLはクリーンでシンプルです。元画像（image_wrap）とオーバーレイ画像（zoom_overlay）をdiv要素で内包します。 <div class="portfolio"> <div class="portfolio_item"> <div class="image_wrap"> <img src="images/website1
画像を綺麗に拡大するフリーソフト「SmillaEnlarger」がすごい | 日刊ウェブログ式
小さな画像を拡大したい時、どうしても起こってしまう画像の劣化。そんなときに便利な、画像を美しく拡大するフリーソフト「SmillaEnlarger」をご紹介します。上の画像は拡大例ですが、かなり滑らかに拡大出来てます。 ダウンロード こちらから「SmillaEnlarger」をダウンロードします。 Download ソフトを起動させます。 使い方 まずは、拡大したい画像をドラック＆ドロップします。 Output Dimensions …サイズ変更 Specify zoom facter: 倍率 Specify width of result: 横幅指定 Specify height of result: 縦幅指定 Fit inside boundary: 縦横幅の最大値指定 Stretch to fit: 縦横幅の指定 Crop to fit: 切り取り指定 Fit inside, add
こいつは便利！好きなサイズのダミー画像が動的に作れる『Dummy Image』 - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
JPEG画像をより美しく、より軽量に最適化するテクニック
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
サイトのアクセントに使えそうな、おしゃれなミニタグ画像を生成『tinytags』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
アニメみたいな視差を表現する面白JavaScriptライブラリ「jParallax」:phpspot開発日誌
webdev.stephband.info Parallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. アニメみたいな視差を表現する面白JavaScriptライブラリ「jParallax」 イメージ上でマウスを動かすと、近くの物ほど速く、遠くの物ほど遅く動作するような表現が可能。 仕組みとしては複数枚のエレメントを重ね合わせてJavaScriptで動作させているみたい。 他にも面白い例がいくつか紹介されてます。 webdev.stephband.info/parallax_demos.html test.stephband.info/pa
[CSS]画像をクリップや額縁でデコレーションするスタイルシート
Web Designer Wallのエントリーから、画像にテープ、ピン、クリップ、テキスト、フレームなどを使用してデコレーションするスタイルシートを紹介します。
ビジネスマンのシルエットのフリーのベクター素材 | コリス
12 Free Vector Businessman Silhouettes ベクター素材のライセンスはCC 3.0のため、商用でもフリーでも利用できます。 snap2objectsでは他にも、ビジネスマンのシルエットのベクター素材を配布しています。
Web2.0風バッジ作成用素材:phpspot開発日誌
adClustr Some Free Web 2.0 Badge Starbursts - Free Ad Backgrounds & AdSense Advice I created these for one of the ad backgrounds, but figured I would clean them up a bit, and release them as a download. Web2.0風バッジ作成用素材が公開されています。 配布されているＺＩＰパッケージを展開すると次のような3種類のバッジ画像が取り出せます。(それぞれPNG/JPEG方式) ジェネレーターもいいですが、こうして素材の形にしておいてもらえると、PhotoShopなどで柔軟にカスタマイズできて良いですね。 関連エントリ Web2.0風バッジをWEB上で作れる「Web 2.0 Badges」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Viewer.js
ブラウザサイズに合わせて背景画像などをフィットさせるjQueryフルスクリーンプラグインいろいろ
[JS]打ち出し画像をフラッシュのようにダイナミックに切り替えるスクリプト -s3Slider