CSS3で作る円形グラデーションとツートン背景

今日もお日様さんさん、天気がいいですね。みなさん、いかがお過ごしですか?

夏になると山本は不眠症を起こすことが多く、困っています;;他の季節には本当にないことなのですが、やれトイレだ、やれ悪夢だと、やっと寝付いた頃にはすぐに目を覚ますというていたらく……この仕事に就いて早10年……山本もそろそろ歳でしょうか?

さて、体の不具合は気合で吹っ飛ばして!今回は円形グラデーションとツートンカラー背景の作り方を掲載しております。

円形は丁度アイキャッチ画像で使わせていただいているものがそうなのですが、中央から放射状に色味が広がっていくようなデティールで、ホームページを立体的に表示してくれる優れものです。

使い方によっては、同色を組み合わせたカラーストップなんかも非常に素敵です。もう一店はポップで可愛いツートンカラーのお出ましです!

基本的には通常のグラデーション背景と同じく、linear-gradientを使用するのですが、カラーストップを50%50%で半分づつ設定することによって、接点(境目)が同じ場所になる為、グラデーションを消失させます。

背景カラートーンはホームページのイメージを決める上で非常に重要なものとなります。色味はサイト持ち主の気持ちや、扱う職種・雰囲気を物語ります。

カラーバリエーションの組み合わせが思いつかないという方には、まずは「類似色」の組み合わせがお勧めです。「赤色系」、「青色系」といったように、同系色の濃淡で組み合わせてください。茶&オレンジなら暖かい暖色系、赤やピンクの組み合わせなら女性らしい・フェミニン系、青やコバルトブルーなどの組み合わせなら寒色系、赤&黄色などの組み合わせなら元気いっぱいの原色系、様々な雰囲気をつかむことができます。

是非、掲載しているコードをコピペして、さまざまな色味をセットアップして使ってみてください!ご自身が願っていた色味が必ず見つかります。

by山本

▼▼BLACK SHIVAはこちらから▼▼

https://www.black-shiva.com/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です