Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】色々なマーカーを考えてみました

 どうも!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版カラーパレット

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^