【css】重なり部分とはみだし部分で要素の色を変えるテクニック
やりたいこと
要素の重なった部分とはみ出している部分で色が変わるようにしたい。
考え方
仕組みとしてはシンプルで、背景によって色を変えたい要素をふたつ用意して重ねるだけです。
要素のはみだし部分をoverflow:hedden;を活用して非表示にすることで、任意の範囲で色が変わっているように見えます。
サンプルはこちら
ボタンをホバーすると矢印が右に動くのですが、その際に矢印の色が背景のある部分とはみ出している部分で変化しています。
See the Pen
Untitled by nanami (@nanami_po)
on CodePen.
.link_btn a::beforeがボタン内にある白い線で、link_btn_itemがはみ出している矢印の要素です。
アニメーションの部分は、以下のcss部分です。
.link_btn a:hover::before {
right: -10px;
}
.link_btn:hover .link_btn_item::before {
right: -40px;
}
.link_btn:hover .link_btn_item::after {
right: -34px;
}
ホバー時に右に動かす指示ですね。要素が右に動いた際にはみ出しを防ぐために.link_btn aにoverflow: hidden;が指定してあります。
テキストを使用したパターンも同様に実装できます。
See the Pen
Untitled by nanami (@nanami_po)
on CodePen.
.overlap_front, .overlap_back::afterのrightではみ出す部分の割合を調整できます。マイナスにすればするほどはみ出す部分の割合が大きくなります。また、こちらはレスポンシブにも対応しているので、要素全体の幅をwidthで指定してください◎
テキストに改行を加えたい場合は以下のソースを参照してください。
See the Pen
Untitled by nanami (@nanami_po)
on CodePen.
wrapを追加することで、要素全体の大きさを調整しています。はみ出す部分の割合は先程と同様に、.overlap_front,.overlap_back::afterのrightで調整できます。
実は疑似要素も改行できるんですよね。\Aが改行コードで、white-space: pre;とセットで指定することで反映されます。white-space: pre;は自動改行をしません。なので、\Aがある部分だけ改行されることになります。
以上で解説は終了です。良かったら参考にしてください◎
関連記事
