サイト制作メモ

cssだけで画像をテキストの形に切り抜き表示してみる

投稿日:2018年5月29日 更新日:

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。

まずはhtml

何でもいいので適当なクラスか何かあたえておいてください。

<p class="text-kirinuki">文字の形にきりぬくよ</p>

cssを追加します。

.text-kirinuki {
  background: url('画像のパス'.jpg) -160px 250px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: bold;
  font-size: 65px;
  width: 80%;
  margin: 50px auto;
  text-align: center;
}

するとこんな感じで切り抜いたようになります。

文字の形にきりぬくよ

背景画像をおいて、 テキスト部分を透過するんですね。
font-sizeやmargin,paddingはお好みでどうぞ。

背景にグラデーションを指定するとこんな感じに。
ページのタイトルなどポイントで使えそう。

文字の形にきりぬくよ

テキストの背景指定も

クラス指定したテキストを div などで囲えばテキストの背景指定もできます。
色々使えそう。

文字の形にきりぬくよ

- サイト制作メモ
-

関連記事

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...

パーマリンクの設定

stinger8のダウンロードサイトにはパーマリンク設定を"postname"にしているとあったのでそのように設定してみた。 で、実際に新規で記事を追加すると 記事のタイトルが反映されURLは以下のよ ...

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 cssでドロップダウンメニューサンプル まずはhtml 一般的な入れ ...

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml <h1 ...

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenuあまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。オプションで色々設定もできるみたいなので、初 ...

ゆずむ自己紹介画像
name:ゆずむ
作業時間は平日9:30~17:00です。

翻訳する