Webサイト制作

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

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

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

まずは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 などで囲えばテキストの背景指定もできます。
色々使えそう。

文字の形にきりぬくよ

- Webサイト制作
-

関連記事

no image

サイト制作に役立つTips_リンク集

目次1 スタイルなどの装飾1.1 ボタンのホバーアニメ1.2 角丸とシャドウのジェネレーター1.3 グラデーションジェネレーター1.4 CSS三角形作成ツール1.5 吹き出し作成のジェネレーター1.6 ...

tableのwidth幅指定のメモ

サイト制作している時、 時々テーブルを使うけどIEやfirefoxでwidth指定がきかなかったので対応のメモ。 thやtdに対して幅を指定する場合 Chromeならcalc();が使えるけど、IEで ...

Amazon Product Advertising APIを使って気づいた事

目次1 APIの使い方が分からない時は2 最低価格(MinPrice)、最高価格(MaxPrice)の結果がおかしいと思ったら2.1 価格は*100にします3 一度に取得できる情報の件数4 よく分から ...

no image

cssで作るタイトルやテキストの装飾色々メモ

目次1 タイトルの背景を斜めボーダーにしたい2 タイトルの左右に画像を配置3 タテキストにグラデーションをかけたい タイトルの背景を斜めボーダーにしたい 斜めボーダー背景。 色の組み合わせで色々な雰囲 ...

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

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 目次1 まずはhtml2 つぎにcss3 cssの中身の解説4 高さ ...