ゆるっと広告業界

デザイナーのじたばた。

梅雨のグラデーション、CSS。

こんばんは、さじです。

 

今日の東京地方は晴れた朝から曇って大雨

午後には止んで明日は晴れなのだそうです。

梅雨らしい天気だなあ、ということで

週末のcssを練習します。

円形グラデーションというのを

確かブックマークしていたはず。。ということで

今回は円のグラデーションの練習です。

 

雨あがりカラー。空から光が漏れてきた感じ。
雨あがり

<style><!--
.ameagari{
position:relative;
border-radius:5px;
border:0px solid black;
padding:1em;
width:300px;
color: white; font-size: 24px; font-weight: bold; text-align: center;
background-image:radial-gradient(circle 400px at 0% 0%,white,#a1cbff,#849bba);
box-shadow: 1px 1px 5px #b0b0b0;}
--></style>
<div class="ameagari">雨あがり</div>

 

梅雨の晴れ間カラー。水溜りに映った空のイメージ。

梅雨の晴れ間
<style><!--
.tsuyunoharema{
position:relative;
border-radius:5px;
border:0px solid black;
padding:1em;
width:300px;
color: white; font-size: 24px; font-weight: bold; text-align: center;
background-image:radial-gradient(circle 300px at 0% 80%,white,#2ef8ff,#8affda);
box-shadow: 1px 1px 5px #b0b0b0;}
--></style>
<div class="tsuyunoharema">梅雨の晴れ間</div>
 
雨のしずくカラー。ポツン、と落ちてくる波紋。
雨のしずく
<style><!--
.amenoshizuku{
position:relative;
border-radius:5px;
border:0px solid black;
padding:1em;
width:300px;
color: white; font-size: 24px; font-weight: bold; text-align: center;
background-image:radial-gradient(circle 40px at 5% 35%,white,#249cff,white,#055dff,white,#249cff,white,#055dff,white,#338bff);
box-shadow: 1px 1px 5px #b0b0b0;}
--></style>
<div class="amenoshizuku">雨のしずく</div>
 
紫陽花カラー。青と紫のまだら。
紫 陽 花
<style><!--
.ajisai{
position:relative;
border-radius:5px;
border:0px solid black;
padding:1em;
width:300px;
color: white; font-size: 24px; font-weight: bold; text-align: center;
background-image:radial-gradient(circle 300px at 20% 80%,#d77df0,#7d8ef0,#f571c9);
box-shadow: 1px 1px 5px #b0b0b0;}
--></style>
<div class="ajisai">紫 陽 花</div>
 
雨あがりは空気が澄んでいて土の匂いが良いです。
学校帰りに水溜りにいるアメンボを覗き込んでいたのを
思い出しましたが
今と変わってないような気もします。
 
LSSさんの少し前の記事を参考にさせていただきました。

円形グラデーションの背景に
box-shadowを付け足して、文字色、位置を変更して
すでに原型を留めていませんが。。
詳しいコード説明はそちらにあります!(丸投げ)
 
コードも追記してみましたが
もしかしたらなんか間違ってるか余計な物もあるかも。。
(borderの行とか)
でも見えてるからきっと大丈夫!なはずです(笑)。
不安じゃなければご自由にお使いくださいませ。
 
さじ
 
6/15オマケ追加。
打ち上げ花火。6月の一斉花火はみられなかったです。
打ち上げ花火
<style><!--
.uchiagehanabi{
position:relative;
border-radius:5px;
border:0px solid black;
padding:1em;
width:300px;
color: white; font-size: 24px; font-weight: bold; text-align: center; text-shadow:0px 0px 3px white;
background-image:radial-gradient(circle 50px at 95% 70%,red,orange,#554944,orange,red,orange,#554944,orange,red,orange,#554944,#00215e);
box-shadow: 1px 1px 5px #b0b0b0;}
--></style>
<div class="uchiagehanabi">打ち上げ花火</div>