サイト制作メモ

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

文字の形にきりぬくよ

- サイト制作メモ
-

関連記事

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

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

no image

クリック開閉のタグ[jQuery+css使用]

jQuery+cssを使用したクリック開閉のタグ。 簡単に設置できるのでお世話になっています。 jQueryのタグ <script> jQuery(function($){ $('.box ...

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 通常、画像でできたアイ ...

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

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

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

翻訳する