HTML/CSS 文字を画像などの境目で左右違う色に変更する方法。
何パターンか記事にしてみました。
今回は画像の位置がずれると、色の変更部分も
ズレていく感じで出来ました。
この辺は、サンプルコードも書いときますので、
色々数値変更してやってみてください。
完成したものは下記になります。
単純な境目で文字の色が変わる。
もう１個違う基本パターン
右側の画像のサイズ変更して上にかぶせた感じ
今回何パターンか作ってみたので書いときます。
パソコン環境によっては多少挙動が違って見える場合があります。
その場合は、微調整お願いいたします。
単純な境目で文字の色が変わる。
まずは、基本形の左右の色違いのコンテンツがあり
その上の文字が切れ目で左右違う色にする設定。
書いたコードはこちら
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <h1 class="settei-title">1.単純に文字のかさね</h1> <section class="kensyou"> <div> <h2 class="text-black"> 今回は画像とbackgroundの境目で <br> 左右の色を変更する方法やってみた。 </h2> </div> <div> <h2 class="text-white"> 今回は画像とbackgroundの境目で <br> 左右の色を変更する方法やってみた。 </h2> </div> </section> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
* { margin: 0; padding: 0; box-sizing: border-box; } .settei-title { color: black; margin: 100px 0; font-size: 48px; text-align: center; } section { position: relative; width: 100%; max-width: 1200px; height: 100vh; display: flex; margin: auto; overflow: hidden; } section div { position: relative; width: 40%; background: #b6d67f; overflow: hidden; } section div h2 { position: absolute; white-space: pre; font-size: 40px; font-weight: bold; } section div:nth-child(2) { position: relative; width: 60%; background: url(http://inomiti.com/a/lnk/256/); background-position: center; background-size: cover; overflow: hidden; } .text-black { color: black; top: 25%; left: 40%; } .text-white { color: #ffffff; top: 25%; left: -40%; } |
私が一番最初に、この効果のやり方探した時に
一番カスタマイズしやすかったのがこのパターンでした。
これで文字が変わっていきます。
細かい設定等はいろいろいじってみてください。
もう１個違う基本パターン
基本のパターン：afterを使った方法。
もう１つが、：：after要素を使ったやり方です。
この方法でも可能でした。
こちらも画像のサイズ変更して、重ね効果してます。
書いたコードがこちら
HTML
|
1 2 3 4 5 6 7 8 |
<section class="content"> <div class="h-inner"> <div class="outer"> <div class="black">今回は画像と backgroundの境目で <br>左右の色を変更する方法やってみた。</div> <div class="red"></div><!-- /.white --> </div> </div> </section> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.h-inner { width: 100%; height: 100vh; background: linear-gradient(90deg, #D3B893 50%, #ffffff 50% ); /* padding-bottom: 61px; */ } .outer { position:relative; background-image: url(http://inomiti.com/a/lnk/256/); background-size: 60% 500px; background-repeat: no-repeat; background-position: right; top: 25%; } .black { color: black; position: absolute; left: 350px; top: 130px; font-size: 48px; font-weight: bold; line-height: 1.7; white-space: pre; } .red { position: relative; width: 40%; height: 500px; overflow: hidden; } .red::after{ position:absolute; left:350px; top: 130px; content:"今回は画像と backgroundの境目で\A左右の色を変更する方法やってみた。"; white-space: pre; font-size:48px; font-weight:bold; line-height: 1.7; color: red; } |
文字が横に動くアニメーションパターン
アニメーションなのでCodePen載せときます。
文字の折り返し位置と、スタート位置の調整。
@keyframes animate {
100% {
transform: translateX(-50%);
}
この部分の数値の場所まで文字が流れる。
スタート位置は、.text-black .text-whiteそれぞれの
leftの数値で調整しました。
書いたコードはこちら
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body> <section class="content"> <div> <h2 class="text-black"> 今回は画像とbackgroundの境目で <br> 左右の色を変更する方法やってみた。 </h2> </div> <div> <h2 class="text-white"> 今回は画像とbackgroundの境目で <br> 左右の色を変更する方法やってみた。 </h2> </div> </section> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
* { margin: 0; padding: 0; box-sizing: border-box; } section { position: relative; width: 100%; max-width: 1200px; height: 100vh; display: flex; margin: auto; overflow: hidden; } section div { position: relative; width: 50%; background: #b6d67f; overflow: hidden; } section div h2 { position: absolute; white-space: pre; font-size: 40px; font-weight: bold; animation: animate 5s linear infinite; } @keyframes animate { 0% { transform: translateX(0); } 100% { /* 折り返し位置の指定 */ transform: translateX(-55%); } } section div:nth-child(2) { position: absolute; width: 60%; background: pink; background-size: cover; overflow: hidden; height: 80vh; margin-top: 43px; right: 0; } .text-black { color: black; top: 25%; /* ここで文字の最初指定 */ left: 60%; } .text-white { color: #ffffff; top: 25%; /* ここで文字の最初指定 */ left: -17%; } |
右側の画像のサイズ変更して上にかぶせた感じ
左右の画像の重なり入れて、その重なり部分で文字の色が
変わる設定にしてます。
画像の重なりで、widthの割合変えてるので、文字の配置
の微調整が必要になった。
右側の画像を浮かせるために、position: relative;を
position: absolute;に変更してる。
box-shadowを使用して、BOXに影つけてる。
書いたコードはこちらになります。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <section class="content"> <div> <h2 class="text-black"> 今回は画像とバックグランドの境目で <br> 左右の色を変更する方法やってみた。 </h2> </div> <div> <h2 class="text-white"> 今回は画像とバックグランドの境目で <br> 左右の色を変更する方法やってみた。 </h2> </div> </section> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
* { margin: 0; padding: 0; box-sizing: border-box; } section { position: relative; width: 100%; max-width: 1400px; height: 100vh; display: flex; margin: auto; overflow: hidden; } section div { position: relative; width: 50%; background: #b6d67f; overflow: hidden; } section div h2 { position: absolute; white-space: pre; font-size: 40px; font-weight: bold; } section div:nth-child(2) { position: absolute; width: 60%; background: pink; background-size: cover; overflow: hidden; height: 80vh; margin-top: 43px; right: 0; box-shadow: 10px 5px 20px 6px rgba(0,0,0,0.3); } .text-black { color: black; top: 25%; left: 32%; } .text-white { color: #ffffff; top: 25.5%; left: -40%; } |
 |
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 新品価格 |
高単価案件が最短二日で決まる！フリーランスエンジニア案件情報サイト【ポテパンフリーランス】
YouTube動画にもしてみました
これからコーディング動画アップしていく予定ですので、
よかったらチャンネル登録お願いいたします。
コメント