グラデーションの背景を作る方法【コーディング編】 | ーーーーーー

 

こんにちは。

 

いきなりですが、、これからはこのブログは記録として自分自身が学んだことを記録していきます。

 

 

調べごとが多いと、macのPCのタブが増えすぎて

後でみかえしたいし、消すに消せない状態だったんですよね。。。。。

 

 

どうしても書き残したい!見返していつでも思い出したい!ウェブサイトが欲しくて、

残してあった、アメーバブログに記録していこうと思います。

 

 

アメブロカスタマイズのデザインをやっているので、

デザインは私とは全く関係ないデザインです。そこは無視してください。w 

(ご依頼があった方のテストサイトとして使っています。)

 

 

 

早速ですが、まだまだレベルは低めですが学んだことを記していきます。

グラデーション背景をCSSで実装するには?

 

 

【本日実装したいこと】

画像の上に緑〜エメラルドグリーンの背景を重ねたデザインを作る

 

 

その実装方法は次の通り

 

①CSSジェネレーターに数値を入力する

 

 
 
下のように入力すると、色合いが表示される。
 
 
 
 
②CSSが表示されるので、コードをコピーする。
 
 
③画像を囲んでいる<div>をposition:relative;にする。
 
④画像を囲んでいる<div>のbefore属性に、先ほどコピーしたコードを貼り付ける。
 
⑤そのbefore属性に下記のコーディングを追記する
position: absolute;
content: ' ';
left: 0;
top: 0;
right: 0;
bottom: 0;
 
 
以上で実装完了です。
 
今日もお疲れ様でした。