サイト制作メモ

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

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

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

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

cssを追加します。

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

文字の形にきりぬくよ

背景画像をおいて、
テキスト部分を透過するんですね。

font-sizeやmargin,paddingはお好みでどうぞ。

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

文字の形にきりぬくよ

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

文字の形にきりぬくよ

- サイト制作メモ
-

関連記事

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

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

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

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

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

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

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

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

パーマリンクの設定

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

翻訳する