どうも!LSSです!!
先日の記事で、グラデーションをグラデーションしないようにしたら、よくあるマーカーになった話を書きましたが(←日本語大丈夫か?w)、今回はそこからちょっとひねったようなマーカーをいくつか考えてみました。
マーカー色々(マーカーと言えないようなものもw)
上部が薄いマーカー
例えば、こんな感じのサンプルみたいなの。
<span style="background-image: linear-gradient(transparent 40%,orange 95%);">こんな感じのサンプル</span>
マーカーというより筒のような?
例えば、こんな感じのサンプルみたいなの。
<span style="background-image: linear-gradient(lightblue 0%,transparent 50%,lightblue 100%);">こんな感じのサンプル</span>
ふちどりマーカー
例えば、こんな感じのサンプルみたいなの。
<span style="background-image: linear-gradient(transparent 60%,pink 60%,lightblue 80%,pink 100%);">こんな感じのサンプル</span>
上下薄くして淡い感じのマーカー
例えば、こんな感じのサンプルみたいなの。
<span style="background-image: linear-gradient(transparent 40%,pink 70%,transparent 100%);">こんな感じのサンプル</span>
ラジアルなマーカー
例えば、こんな感じのサンプルみたいなの。
<span style="background-image: radial-gradient(ellipse 50% 50%,yellow,pink);">こんな感じのサンプル</span>
使い方
そのままコピペして、ご自由にお使いください^^
コード内で赤字にしている部分が色を指定している部分ですので、他の色に書き換えてまた違った雰囲気を楽しむのもアリアリです!
※色探しに使える記事→HSL版カラーパレット
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^