Warning: Trying to access array offset on value of type bool in /home/hopehope/cocuu.jp/public_html/blog/wp-content/plugins/pixabay-images/pixabay-images.php on line 34

Warning: Trying to access array offset on value of type bool in /home/hopehope/cocuu.jp/public_html/blog/wp-content/plugins/pixabay-images/pixabay-images.php on line 34
CSSのおしゃれなマーカー | 穀雨通信

CSSのおしゃれなマーカー

2022年3月2日

たまたま見たJAXAの宇宙飛行士募集のサイトに使用されていたグラデーションのマーカーがとてもおしゃれだったのでメモします。
それがこちら↓

ロゴのグラデーションデザインとセットになっていて、とてもかっこいいですよね。


引用:JAXA

スペースシャトルの快適な旅を

◆HTML

<span class="jaxa">スペースシャトルの快適な旅を</span>

◆CSS

.jaxa {
background: linear-gradient(to right,#000107,#001976 30%,#209bd5);
color: #000107;
color: #fff;
padding: 2px 0;
}

ついでにCSSを使用したおしゃれなマーカーをたくさん書いてみようと思います。
コピペで使えるのでぜひ参考に💁💁💁

↑ちなみにHTMLで絵文字ってどうやるのという方はこちらのページを参考にしてください。

(以下、まだ工事中です🙇 順次追加します。)

html・css

Posted by admin