Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

【CSS】CSS Gradientで複雑なグラデーションを作成

使用ソフト: Illustrator CS5、Photoshop CS5  

CSS Gradientというフリーサイトを使ってCSSで複雑なグラデーションを作りましょう。

Webサイトを装飾したいけれど、htmlに画像を書き加えるとごちゃごちゃする・・・。
そのようなお悩みはございませんか?

今回ご紹介するCSS Gradientというフリーサイトを使えば
簡単かつ食感的にグラデーション装飾がCSSで作成することが出来ます

他のことにも応用できるので、知っておくと以外と便利です

CSS Gradientで検索

まずはお使いのブラウザでCSS Gradientと検索しましましょう
このような画面が出てくるかと思います

赤枠で囲まれた部分が今現在のグラデーションプレビューです。

境界線の調整

この部分の値を変えていくと

こちらの境界線の位置が変わります

色の調整

こちらの枠は、rgb値は透明度などの色の調整ができます!

境界線の追加

境界線の追加も簡単に出来ます

円形、線形の変更

こちらの切り替えでは線形(Linear)と円形(Radial)の変更も出来ます

コードのコピー

理想のグラデーションが出来たら、こちらのコードをコピーして

自分のコードエディターに貼り付けちゃいましょう。

最後に

いかがだったでしょうか?

こちらのサイトを使えばこのように簡単に自分のWebサイトに

おしゃれなグラデーションを作成することが出来ます

https://gomen-na-site.com/ResortTABLEAU/index.html 参照

他にもいくつか機能がありますので

興味があれば、是非調べて、活用してみてください

 

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Web

    ハンバーガーメニューはなぜ動くのか!CSSだけ& jQuery使用のコードで確認しよう

    ハンバーガーメニューとはWebサイトを見ていると、右上などにメニュ…

  2. イラスト

    Web

    JQueryのランダム要素簡単実装

    ○はじめに難しそうですが案外簡単に使えますので、初心者の方向けにざ…

  3. Web

    CodePenの使い方を極めよう

    jqueryでスライダーなど調べた際に、出てくる「CodePen」を…

  4. Web

    WEBで使える画像は4つ!ファイルサイズも比べてみた

    WEB用の写真やイラレやフォトショで作った画像を書き出すとき、「とりあ…

  5. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  6. Web

    Vegas2で背景画像をスライドショーに(jQueryプラグイン)

    cssで背景画像として設置していた画像をスライドショーにしたい。画面い…

人気の記事

おすすめの参考書

PAGE TOP