インターネットWebデザイン

プロパティCSS「透明性」 - サイトより面白いデザインを作るための簡単な方法

今日では、ウェブサイトのデザインの作成は芸術形式となります。 これは、特定の色とのページ要素の単なる集合ではありません サイズ、フォント の異なるスタイルとテーマの絵画の。 、他の人からあなたのサイトが異なるようにする来場者の注目を集めるために、一定の要素にそれを指示するために、手法やツールの膨大な数を使用。 透明性 - その中で非常に人気のプロパティCSSがあります。 この技術は、非常にファッショナブルで魅力的なであるため、頻繁に使用されています。 例えば、テキストブロックや全体像 - 透明性は、サイトの異なるオブジェクトのページを与えることができます。 また、さまざまな方法で達成しました。 私たちは以下のそれらを調べてみましょう。

パラメータは、透明性の要素を指定します

いくつかの要素の透明度を調節するためのパラメータ。 彼らは、「調整」のデザインの下にあるブラウザ、だけでなく、特定の目的に応じて使用されています。 これらは、次のプロパティが含まれます。

  • 不透明度;
  • フィルタ;
  • 背景としてPNGイメージ。

より高い数、素子の透明度のより低いレベルを次のようにプロパティの値CSS「透明性」に変更されます。 10から100まで、後者はInteret Explorerブラウザ、および他のすべての適用可能な不透明性のために使用される - 不透明度は、それがフィルタに、0から1まで変化します。

透明性イメージ(変更)

あなたがアイテムを移動すると透明に表示されますオプションを見てみましょうマウスをドラッグすること。

私たちは、画像の透明度を指定する方法を考えてみましょう。 CSSには2つのオプションを提供しています。 次のようにこれを行うには、コード、HTML文書に直接登録する必要があります。

    1. イメージへのパスを指定します。
    2. カーソルがないときに私たちは、透明性のパラメータを定義します。 これを行うために、我々はonmouseover属性とれるonmouseout、不透明度の値を規定し、フィルタのプロパティを使用します。

    同じ特性は、それへの参照を追加するCSS文書とソースコードに規定することができます。 結果は同じ判明します。

    テキストとページブロックの透明性

    テキストまたはブロック(透明DIV)については、CSSは透明画像を作成することに似そのオプションを提供しています、あなたは、必要なパラメータが設定されている接続のCSSファイルを、使用する必要があります。 あなたは行くと簡単な方法することができます。 あなたは、スタイルブロックのdivのスタイルやテキストpを設定した場合にonmouseover属性と要素ONMOUSEOUT次のHTMLコードを処方。 両方のオプションが動作し、所望の結果を得ます。

    透明度定数

    いくつかのケースでは、オブジェクトの透明性、デザイン要素やテキストは、あなたが継続的に設定したいです。 このような状況では、ソリューションを使用すると、マウスカーソルを置くとよりもさらに簡単です。

    透明度のCSS要素は、以下のコードによって与えられます。 ブロックDIVスタイルでバックグラウンド(例えば、#1 ff8800)、不透明度(例えば、0.5)および幅(幅)及びパディング(パディング)の値を規定します。

    画像コード値のための製造および不透明フィルタ、および画像へのパスを指定しています。

    RGBA-方法

    このプロパティのCSSを使用するための他のオプションがあります。透明度は任意の設計要素のベースカラーに適用することができます。 これは、RGBAメソッドを使用しています。 透明度のレベルを設定アルファ、 - 最初の3つの文字は、基本色(赤、核分裂、青)、及び最後を表します。 RGBA形式を使用すると、最後の桁にそれを指して、透明性を規定しています。 例えば、として:背景:RGBA(240,2,33,0.4035)。

    結論

    このため、サイトのデザインのシンプルだが効果的な機能のCSS「透明性」の作業の過程で使用することにより、あなたは最小限の労力で、それより興味深く、より顕著要素を作ることができます。 記載された実施形態は、カスタムの透明性の機能はこれであなたを助けるです。

    Similar articles

     

     

     

     

    Trending Now

     

     

     

     

    Newest

    Copyright © 2018 ja.unansea.com. Theme powered by WordPress.