イイダリョウのブログ。textというスタイルだった。このスタイルで出来ること、出来ないことを検証してみました。Xsのページを見てたらこんな表現がありました。はて?文字のうしろが画像みたいだぞ。文字の形で画像を切り抜いているってことか?それにしても一文字ごとの背景ではなくテキストボックス全体が画像になっているようだ。textというスタイルのようだった。写真は前回と同じ、小田急線のインスタ写真です。instagram.comこんなコードです。url(../img/hoge.jpg);}文字の色を透明にする。背景を文字形に切らぬく。-webkitが必要でした。付けないとうまく当たらなかった。外側のセクションに設定したら見出しと本文も一体として設定できた。CodePenさて、ここからやりたいことがあります。※やりたいこと:背景を画像ではなくCSSのグラデにしたいCSSアニメでグラデの色変更をループさせたいbackground-imageをbackground-colorにするまずは背景を画像ではなく普通の一色にしてみる。CodePen.ありゃ?背景全体が出てしまって、文字の形で切り抜かれない。この設定ってもしかして画像のみに適用できる設定なのかな?調べたところ、background-clipが適用できるのはbackground-imageとbackground-colorのみらしい。境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。なければ、境界は異なるマスク方法になります。先に背景backgroundを書くと大丈夫みたい。これをグラデにしてみませう!背景をCSSグラデーションlinear-gradientに変更するCSSのグラデはlinear-gradient()です。rgba(0,0,0,0);}CSS関数linear-gradient()の第1引数は角度で-45度傾けています。いブルーから薄いブルーにしてます。animationでループアニメさあ次はCSSアニメでこのグラデをループしたい!これは背景画像background-imageではできなかったこと。cssアニメは以前、transitionを使って要素をふわっと動かしました。animationを使います。キーフレームで細かく段階的な設定ができます。Qiitaさっそく書いてみる。infiniteはループさせるという設定キーフレーム開始fromは元のグラデスタイルキーフレーム中間50%はグラデの色を逆さまにキーフレーム終了toで色を元に戻すこれでグラデの濃い所と薄い所がジンワリと入れ替わる5秒のループアニメを期待してる。調べてみると、どうやらグラデのアニメは背景サイズを大きくして、表示位置を動かすこと方法がセオリーのようでした。WebLifeTimes書き換えてみた。}}グラデのスタイルはキーフレームではなくセクションに書く背景サイズbackground-size、高さと幅を200%に(4倍の大きさ)キーフレームの開始fromで背景位置background-positionを上0%、左0%(左上)キーフレームの中間50%の背景位置を上100%、左100%(右下)に移動キーフレームの終了toで背景位置background-positionを上0%、左0%(左上)に戻る背景サイズbackground-sizeの幅と高さが倍の200%だと面積は4倍。背景位置background-positionは左上基準なので上100%左100%は左上が中間地点なので右下に移動するわけです。CodePen.やった!ジンワリと動いた!※2019/09/04追記コメントでステイサムさんよりご指摘いただきました。環境によってはsectionの文字色設定をtransparentにしないと動かないようです。Overflowrgba()は不透明度を4つめの引数で指定しますが、transparentは不透明度ではなく「透明」という設定です。終わりにわかったことまとめ。背景サイズを広げて背景位置を移動する。※私ごとですがタブレットを購入しまして今回、ほぼほぼタブレットのみでブログ書きました。慣れてないので苦戦した。※追記:その後、フリック用のアプリ「片手キーボードPRO」を入れてみたらストレスフリーに!(今それで打っています)次回はこれでコードも含めてブログを書いて見ようかと思う。海外で主流というグライド入力(一筆書き)も試すべく「Gboard」も入れてみた。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-08-24【CSS】form用のリセット設定(ノーマライズCSS、リセットCSSとの比較)フォームのCSSって結構手間がかかったり、効いてくれなかったり...2019-08-04【CSS】conic-gradientで放射状の光線を放つ太陽を作るCSSのグラデーションで最近追加されたconic-gradient。これを使...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。