BLOG

中抜きのテキストで縁取りをCSSでやってみる

| HTML / CSS

背景が真っ白で縁取りの文字はtext-shadowとかつかって表示させることはできるんですが、
背景が画像とかで中抜きのテキストで縁取りをしたものはSVGとかつかってする感じなってたと思います。
IEがサポート外になれば、他の方法もでてくるんで、今回はその方法をご紹介です。

<div class="fuchidori">縁取りの文字です</div>

<style>
.fuchidori{
  color: rgba(0,0,0,0);
  -webkit-text-stroke: 1px rgba(253,151,31, .4);
  text-stroke: 1px rgba(253,151,31, .4);
}
</style>

と、こんな感じで指定するといいみたいです。
一応、対応ブラウザはこんな感じです。
firefoxとEdgeに対応するために、-webkitのプレフィックスが必要です。
的なことを調べたらかいてたんですが、chromeもsafariも必要そうですね。
ってPCほぼ必要やんっていう状態でございます。
なにか、条件があるんかな・・・・iPhoneもだめやった・・・
結局、-webkitは必須ってことですね。

RECENT POSTS

我が家の植物たち

カスタムフィールドを含む複数の条件でソートをする【WordPress】

脱jQuery!$.ajax使わない書き方

検索用のフォームを設置する【wordpress】

docker-composeをつかってWEBサーバーをたてる

カスタムフィールドを検索範囲にいれる【ACF】

WordPressに大量に投稿をインポートする【CSV】

iOSのsafariでbackground-attachmentが使えないので対策【CSSのみ】

一周回ってapple 純正メモって使いやすい

使わないとかない!flexでの間隔の設定が簡単にできるgap!

CATEGORY

POPULAR POSTS

PAGE TOP