梅雨のグラデーション、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>
.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>
.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>
.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>
.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>
