CSS WEB制作

CSS★テキストにグラデーションをつける

投稿日:

文字にグラデーションカラーをつけるといえば、イラストレーターなどで画像を用意してからサイト内に配置というのがお約束だったんだけど、CSSだけで実現できるようになりました。

先日の勉強会で習ったばかりのコードをメモ。
最近の新しいCSSは従来のものと分けて「モダンCSS」と呼ぶらしい。

テキストに
グラデーションを
つける!

p.gra {
    /* 背景グラデーション */
    background: linear-gradient(30deg, #44d0f7, #f900fd);
    /* テキストの形に背景を切り抜く */
    -webkit-background-clip: text;
    background-crip: text;
    /* テキストの色を透明にする */
    color: transparent;
}

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-CSS, WEB制作

執筆者:

関連記事

CSS★奇数・偶数・n番目の要素を指定するセレクタ

リストの表示で、奇数の li 要素にだけ効くCSS設定をしたかったので、調べてみた。 奇数番目の要素にスタイルを適用する <span style="font-size: 130%;&q …

CSS★h1やh2に特定のクラスを付ける

サイトを構築していて、特定のh2だけにクラスを指定して、見た目を変えたいときにどのように設定すればいいのか、わからなかったので調べてみた。 誤: .article h2 .title 正: .arti …

CSS★長いURLが改行されないではみ出してしまうときの対処法

サイトの表示テストを行っていて、指摘を受けたので調べてみました。 Macではこの現象がでなかったから気付かなかった。。。 長いURLはどうして自動改行されないの? WEBページの文章は、画面の端やボッ …

CSS★span要素内のテキストを上下中央に配置する

ナビ項目の文字の後ろに「▼」をつけたのですが、そのままだと、文字よりも「▼」のほうが大きく見えてしまい、文字よりも「▼」が目立ってしまった(汗) それを解消するために「span」で「▼」だけフォントサ …

WP★吹き出し風デザインをCSSだけでやる方法

ワードプレスでプラグインを使わずに、 HTMLとCSSだけで下のような感じの会話風レイアウトの作り方。   手順はこちら   [codepen_embed height=”400 …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。