画像を改善するときは、Photoshopでそれを実行してから、Webページにマウントするか、オプションBを選択することができます。 利用可能なHTML、CSS、およびJavascriptの手法を使用して実行します。
ジャンプ後、画像を改善するための多くのテクニックがあり、それらのほとんどすべてがメインベースとしてjQueryまたはCSS3で作成されています 最新のWeb標準を利用しますが、その場合、一部のブラウザーとの互換性が失われることを思い出してください。
彼らは英語ですが、彼らはその場で捕まえられます、約束されました:)
ソース| 第1WD
jQueryを使用したCSS3の丸められた画像
最新のすべてのブラウザで正しく表示される丸みを帯びた画像を実現するために、画像要素の周りにスパンタグをラップする方法を学びます。
2.
CSS2.1の複数の背景と境界線
CSS 2.1疑似要素を使用して、最大3つの背景キャンバス、2つの固定サイズの表示画像、およびXNUMXつのHTML要素に複数の複雑な境界線を提供する方法を学習します。
3.
クイックヒント:シンプルなCSSで複数の境界線
シンプルなCSSで複数の境界線を実現する方法を示すクイックスクリーンキャストで、デザインに深みを加えます。 前のチュートリアルのはるかに単純なバージョン。
4.
CSS2を使用した動的にサイズ設定された要素の複数の境界線
のXNUMX番目のバージョン ニコラス・ギャラガー 要素のサイズがわからない場合の対処方法を示します。
5.
ボーダー付きでお楽しみください-面取り、プレスなど!
CSSを使用してプレス効果を実現する方法と、さまざまな効果を得るための簡単なボーダースタイルのトリックを学びます。
6.
CSS3のポラロイド
いくつかの素晴らしいCSS2とCSS3を使用して、さもなければ控えめな画像のリストを本格的なポラロイド写真のセットに変える方法を学びましょう。
7.
完璧なフルページの背景画像
ページ全体を画像で埋め、空白をなくし、必要に応じて画像を拡大縮小し、スクロールバーなどを発生させないCSSを使用して背景画像を追加する方法を学びます。
8.
CSS3ボックスシャドウと画像ホバー効果
スタイルシートを編集するだけでドロップシャドウ効果を追加する新しい方法を探ります。
9.
jQueryを使用した派手なサムネイルホバー効果
CSSとjQueryですっきりとしたフラッシュスタイルの効果を実現します。
10.
シンプルなCSS画像のロールオーバー効果を作成する方法
このチュートリアルでは、基本的なHTMLとCSSのスタイルを使用して単純なCSS画像のロールオーバー効果を作成する方法を学習します。
11.
フロートリアル
Floatutorialは、画像、ドロップキャップ、次へと戻るボタン、画像ギャラリー、インラインリスト、複数列のレイアウトなどのフローティング要素の基本を説明します。 画像フローティング専用の4つのチュートリアルをご覧ください。
12.
CSSを使用したおしゃれなホバー効果
このチュートリアルでは、CSS2.1プロパティを使用して柔軟で高度なホバーテクニックを作成する方法について説明します。
13.
なしの高速ロールオーバー
プリロード
CSS画像のロールオーバーを使用する場合、XNUMXつ、XNUMXつ、またはそれ以上の画像をロードする必要があります(多くの場合、最良の結果を得るためにプリロードされます)。 すべての状態をXNUMXつの画像にまとめる方法を学び、動的な変更をより速くし、プリロードを必要としません。
14.
jQueryの丸みを帯びたコーナー
丸みを帯びた角やはるかに多くのパターンに対する多くのjQuery効果。
15.
jQueryを使用した最も簡単なツールチップと画像プレビュー
jQueryロールオーバープレビュースクリプトの使用例を3つ参照してください。 この単純なスクリプトは、さまざまな目的に適用できます。
16.
超大型-フルスクリーンの背景/
スライドショー
jQueryプラグイン
Superzidedは、画像のサイズ比を維持しながら画像のサイズを変更してブラウザ全体に表示し、トランジションとプリロードを備えたスライドショーを介して画像/背景を循環させるjQueryプラグインです。
17.
PNGオーバーレイ
クライアントから提供された写真を使用してサイトを作成するという問題に遭遇したことがありますが、後で写真を更新した後、元のルックアンドフィールが保持されていません。 このソリューションには、通常のJPEGまたはGIFの周りのマスク/フレームとして使用できる透明なPNGオーバーレイの作成が含まれます。 このようにして、ユーザーがグラフィックプログラムを使用してフィルターを適用することを心配せずに写真をアップロードできるように、一般的なCMSインストールを構成できます。
18.
ベズーム
ライトウェイト
jQueryの
ズームプラグイン
BeZoomは、シンプルで軽量な代替手段です。 JQズーム。 軽くて使いやすいです。
19.
背景画像アニメーションにjQueryを使用する
jQueryを試して、背景画像の位置を変更して、探しているタイプの効果を作成します。 「アクティブな状態を処理するにはどうすればよいですか?」という新しい記事があります。 - jQueryアニメーション背景のアクティブ状態の処理.
20.
CSSで画像にスパイスを加える5つの方法
ここでは、典型的な当たり障りのない画像にフレーバーを追加するための簡単なトリックをいくつか紹介します。 Photoshopを使用して各画像のスタイルを設定するのは面倒で、長期的には維持するのが難しい場合があります。 これらの以下のCSSテクニックは、その痛みを和らげるのに役立ちます。
21.
方法:
サイズ変更可能
背景画像
CSSを使用してサイズ変更可能な背景画像を設定する方法を学びます。 3つのオプションから選択できます。
22.
画像リンクのスタイルを設定する
当社のウェブサイトの特定のセクションがクリックされることを意図していることをユーザーに知らせることは、マウスオーバー効果によって最もよく達成されます。 これらの「クリック可能な」セクションには、確かにコンテンツ画像が含まれています。 Image Linkは、画像リンクに追加のスタイルを適用できるようにするスクリプトです。
23.
CSSを使用した複数の背景画像
場合によっては、背景画像をページに直接挿入するよりも、背景画像を使用する方が理にかなっています。 また、bodyタグなどの各要素はXNUMXつの背景画像しか保持できませんが、複数の要素に適用できます。
24.
CSSを使用した画像の境界線
CSSを使用して画像に実線の境界線を追加する方法を示す非常に簡単なチュートリアル。
25.
背景画像を使用しないCSSスプライト
CSSスプライトに関する知識があまりなくてもホバー効果を適用する方法を学びます。