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制作

執筆者:

関連記事

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

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

CSS ★ inline-blockで横並びにした要素を上揃えにする

CSSで横並びさせたい時によく使うのが、 display:inline-block。 でも、縦のラインがきれいに揃わないで困ることがある。 そんな時に、 たった1行追加するだけでOKなセレクタがあった …

no image

HTML特殊文字—ちょっと使いたい時に

 よく使う記号、使われる記号、いざという時の… < &lt; &#60; > &gt; &#62; 左の二つは、HTMLなどのマークアップ言語で …

CSS★floatの解除にclearfix

floatの解除方法はいくつかありますが、 clearfixを使う方法が1番使い勝手がよいのでメモ。 floatを設定すると、要素が浮くことになり、 高さが消失してしまいます。 きちんとfloatを解 …

CSS★最後の要素だけスタイルを適用させない

最後の要素だけスタイルを適用させたくないときには、疑似要素を使って指定するのが定番。CSSにもいろんな書き方があるけど、便利な方法を見つけたのでメモしておく。 兄弟要素の最後の要素だけスタイルを適用し …

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