- -CSS3自動コードジェネレーターを使用して画像に影効果を追加する

CSS3 Auto Code Generatorを使用して画像にシャドウ効果を追加する

CSSを使用すると、非常に簡単にWebページのスタイルを設定できます簡単に。 1つのページで100を超えるテキストスタイルを定義できます(もちろん、ページはサーカステントのように見えます)が、WebページでCSSを使用することの容易さと柔軟性についてです。ThemeShock 追加に役立つCSSコーダージェネレーターがあります。数回クリックするだけで、画像にさまざまなドロップシャドウ効果を適用できます。効果を選択すると、コードが書き込まれます。効果は、下部、側面、上部と下部、左下、右下、右上と左下、または斜めの角に追加できます。

css-shadow-generator_HQ

あなたが始める前に;あなたの寸法を確認してください画像(エフェクトを追加する画像)。コードジェネレーターには、画像の幅と高さの上限と下限があらかじめ定義されています。画像のサイズがこれを超える場合、いつでも幅と高さを編集できます。このコードでは、影の不透明度とぼかしも決定できます。コードジェネレーターで画像をアップロードすることはできません。デフォルトの画像が使用されるため、効果をプレビューできます。

ドロップダウンメニューから、どの影を選択しますセレクターを変更するたびに新しいコードが生成されるので、最新のコードを使用してください。好みの効果を選択したら、水平スクロールバーを使用して画像の幅と高さを設定します。ボタンを少しだけ動かしたい場合は、右矢印キーと左矢印キーを使用します。ぼかしと不透明度を設定すると、コードが生成されます。これらのパラメーターのいずれかを増減すると、新しいコードが作成されます。

Css3ドロップシャドウ

すべてを設定したら、CSSコードをCSSファイルとWebページ(またはテーマ)の名前を付けます。 Webページに挿入するHTMLコードも生成され(ドロップダウンメニューから選択する各効果に固有です)、それをコピーして、「ここのコード」と表示されている場所にイメージコード(img src =”“)を配置します。

このコードジェネレーターの最も良い点は、機能し、無料です。画像には寸法の制約がありますが、コードから編集できます。 (上記のような)透明な画像を使用すると、くすんだ灰色の背景になります。後でコードから背景色を編集できます。 (コード行の背景を編集:#ccc)。このコードは、すべての画像に5pxフレームも与えます。フレームを編集することもできますが、幅を増減すると、必要以上にシャドウが非表示または表示されるため、そのままにしておくことをお勧めします。

ThemeShock CSSドロップシャドウジェネレーターにアクセスする

コメント