蛍光ペンで線を引いたようなラインを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

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

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

記事を読む

CSS

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

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

記事を読む

CSS

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

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

記事を読む

CSS

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

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

記事を読む

CSS

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

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

記事を読む

Web

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

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

記事を読む

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 ↑