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

    目指せ!positionマスター!

    レイアウトに便利なposition!ようこそ!Dreamwea…

  2. Flexbox(縦並び)

    Web

    Flexboxで縦並びを簡単に!

    以前、ご紹介しました「Flexboxで横並びを簡単に!」…

  3. Web

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

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

  4. Web

    Flexboxで横並びを簡単に!

    皆さんは横並びのメニューなどのコーディングの際にflotタグ使っていま…

  5. Web

    【CSS】calc()関数で簡単サイズ指定

    今回はcalc()関数についてご紹介します。calc()関数とはC…

人気の記事

おすすめの参考書

PAGE TOP