プロのカメラマンが写真画像をレタッチする時に使用しているものから、カメラスクールで提供しているものなど、写真画像が見違えるLightroomの無料プリセットを紹介します。 どんなアングルで撮影した写真でもOKです!
![Lightroomに絶対入れておきたい!すごい無料プリセットのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c5bb725d64d6ad42f1078f4c6a98f4bf3ba58aed/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016022801.jpg)
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
複数サーバーのHTTPステータスコード、レスポンスヘッダ、リダイレクト先とチェインをチェックできるオンラインサービスを紹介します。 チェックしたものはCSV書き出しにも対応しています。 HTTP Status Code Checker 使い方は簡単です。 入力欄にチェックしたいURLを入力し、「Submit」ボタンをクリックするだけです。 google.comとcoliss.comをチェック! URLは一行につき一つで、複数のURLを入力できます。 チェックすると、左からURL、ステータスコード、リダイレクトで表示され、それぞれソートが可能です。 「Submit」の下の「Settings」ではUA、Basic認証、リクエストヘッダを設定できます。 結果はCSV書き出しにも対応しており、エクセルなどで開くことができます。
ウェブページにスマートフォンでアクセスされたら自動検出し、そのページのレイアウトを変更・タッチデバイス対応にするjQuery Mobileを使用したHTML5ベースのフレームワークを紹介します。 Mobilize.jsでスマートフォン対応にするイメージ 見出し、ナビゲーション、コンテンツはそれぞれ細かく指定することができます。 Mobilize.jsの主な特徴 Mobilize.jsは、クライアントサイトでウェブサイトをスマートフォン対応にするHTML5のフレームワークです。 インターフェイスはjQuery Mobileベースでタッチデバイスに最適化。 自動的にモバイル用ブラウザを検出。 インテグレートが容易 -サーバーサイドの変更は必要ありません。 オープンソース -高価な費用は必要ありません。 Mobilize.jsの対応デバイス Mobilize.jsは、以下のモバイル用のブラウザを
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラービリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用
通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。 デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。 ;(function() { var create_alpha_jpeg = function(img) { var alpha_path = img.getAttribute('data-alpha-src') if(!alpha_path) return // Hide the original un-alpha'd img.style.visiblity = 'hidden' // Preload the un-alpha'd image var image = document.cre
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
グリッドシステムとは、スイスのグラフィックデザイナー:josef muller blockmann(ヨゼフ・ミューラー・ブロックマン)が考案したデザインの手法です。 1981年に刊行した「Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung」は、さまざまなレイアウトにグリッドシステムを用いて、繊細にデザインが行われています。 このグリッドシステムは、エディトリアル デザインで広く利用され、今日ウェブデザインにも多くの影響を与えています。 グリッドシステムの概要 グリッドシステムの機能 グリッドシステムをサイトに導入するメリット グリッドシステムに関する書籍 グリッドシステムの概要 グリッドシステムとは、縦横線の格子(グリッド)を下地として、そこに出来たブロックごとに図版や文字を配置し、デザインを行う
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く