蛍光ペンで線を引いたようなラインをCSSで。

公開日: : 最終更新日:2014/11/04 CSS

CSS

CSSでちょっとだけテキストにオシャレな小技を。

CSSだけで少し手書き感を出したい時などに便利なCSS。

文字に蛍光ペンで引いたような線をつけるためには、
linear-gradientを使います。

<p id="line">
 今日はとってもいい天気でした。
 <strong>ここにラインをつけたいよ。</strong>
 明日もいい天気になりますように。
</p>


 #line strong {
    background: linear-gradient(transparent 40%, #ff9 40%);  
 }



transparent透明という意味。
数値を変更すると線の太さで変えることができます。

上記のタグで実際に表示されるのはこんな感じ。

今日はとってもいい天気でした。
ここにラインをつけたいよ。
明日もいい天気になりますように。

簡単だ。

ad

関連記事

CSS

文字の強調『傍点』をCSSで表現するには

文字の上に点々をつけて、強調させる傍点をCSSで表現する方法のメモ。

記事を読む

CSS

CSSでナンバリングする方法(CSSでナンバーを付ける)

ランキングにCSSでランキングの数字を付けたくて、方法を探してみました。 このサイトの

記事を読む

CSS

Google Map(グーグルマップ)をレスポンシブ対応に。

Google Mapを埋め込むときにレスポンシブ対応させる方法。 そのままコピペすれば

記事を読む

Web

Adobe Typekitで、一瞬違うフォントが表示される時の対処法

最近、Adobe Typekitを使用し始めたのですが ページを表示させた際、 一瞬です

記事を読む

CSS

背景だけを透過させるCSSの書き方

タイトルの通り、背景だけを透過させるCSSの書き方。 簡単にいうと、 背景の

記事を読む

CSS

CSSだけで矢印をつくる方法

参考サイトのままです。 メモなので、簡単に。 情報元:スマートフォン

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑