smartcrop.js - 要注目！スマートなクロップ機能を実現 MOONGIFT
おお、これは格好いい！ 写真のサムネイル表示というのはやり方によって大きくインパクトが変わります。単純に縮めて表示すると何の写真か分かりづらくなります。さらに横長、縦長の写真では正方形に切り出すのは簡単ではありません。 そこで使ってみたいのがsmartcrop.jsです。写真の中から一部を切り出すライブラリで、よりインパクトの強い部分を抽出します。 smartcrop.jsの使い方 デモです。よりインパクトの大きい場所を抽出しているのが分かるかと思います。 切り出す形を変更することもできます。その場合でも写真全体を対象にする訳ではありません。 さらにサンプル。女性を中心に抽出しています。 これは完全に左側から。 ヨットを中心に。サムネイルでも格好いいですね。 街並。より印象的なビルを中心にしています。 こちらは川と太陽が中心です。 人の場合は顔を中心にするようです。 多数の人がいる場合。よ
ChromeでもFirefoxでもIEでも！キャプチャ拡張機能の決定版「FireShot」が素敵だった - ウェブ企画ラボ
Chormeをメインブラウザとして使っていますが、キャプチャを取るのにしっくりくる拡張機能が無く不便でした。 でも、ついに見つけました！キャプチャをとるのに便利なChoromeの拡張機能「FireShot」を！ 今回は「Fireshot」を実際使ってみて便利だと思った点と簡単な使い方についてご紹介いたします。 「FireShot」の便利なところ 1.キャプチャの選択範囲を事前に選べる！ Fireshotはキャプチャできる範囲を事前に選ぶことができます。 選べるのは以下の4通り。 ページ全体をキャプチャ 見える範囲をキャプチャ 選択された範囲をキャプチャ ブラウザウインドウをキャプチャ 事前に選べるのでキャプチャした後に画像を切り抜く手間が省けます。 また、「選択された範囲をキャプチャ」や「ブラウザウインドウをキャプチャ」(ブラウザの枠ごとキャプチャすること)は他の拡張機能でなかなか見かけな
[CSS] CompassでCSSスプライト対応、Retina対応を行う。Web上にあるMixinは自分の要件に合わずだったので、作りました。 - YoheiM .NET
[CSS] CompassでCSSスプライト対応、Retina対応を行う。Web上にあるMixinは自分の要件に合わずだったので、作りました。 こんにちは、@yoheiMuneです。 今日はCompassを使った簡単CSSスプライト画像＋CSSクラスの生成と、Retina対応する方法をブログに書きたいと思います。 Compassは、自動でCSSスプライトを作成できて便利 最近のお仕事で、フロントエンドのパフォーマンス改善を行うことがありますが、その改善点の中で画像をスプライト化して、リクエスト数を減らすという対策を行います。 スプライト画像そのものを作るのも面倒だし、そのスプライト画像を使ったCSSを書くのもかなり面倒。 その面倒な作業を全て自動かしてくれる機能がCompassにあります。その機能を紹介したい＆カスタマイズしてより使いやすくしたいというのが今回のブログの意図です。 Web上
![[CSS] CompassでCSSスプライト対応、Retina対応を行う。Web上にあるMixinは自分の要件に合わずだったので、作りました。 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/5cb5a581103481c8de3499cf65fa66070868173e/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F265.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
