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

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

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

  2. Subtle Patterns

    Web

    WEBサイトの背景などに!商用OKの無料テクスチャ素材サイト「Subtle Patterns」の紹介…

    みなさんウェブサイト作りは捗っていますでしょうか?自分はやっとトップペ…

  3. htmlcssアイコン画像

    Web

    オススメ!【Animate.css + wow.js 】を使ったスクロールアニメーション

    どうもこんにちは。今回はweb制作で使えるスクロールアニメーシ…

  4. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

  5. Web

    SVGアイコンをCSSで色を替えられるようにしよう

    今回はSVGアイコにCSSを適用させて色を変えられるようにする方法を紹…

  6. Web

    【実例サンプルあり】簡単に実装できるcssスニペット集

    この記事では、短いコードで実装可能なcssプロパティを紹介して…

人気の記事

おすすめの参考書

PAGE TOP