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サイト制作
-

関連記事

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。 width:100%; background:url()center center no-repeat f ...

Product Advertising APIで商品情報を取得してみる

ノンプログラマーがProduct Advertising APIでの商品情報取得にチャレンジしました。 検索しても情報が少なく苦労したので、同じような方の参考になればと思います。 目次1 amazon ...

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...

no image

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

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