仕事の合間の息抜きに植物を育てています♡もっと詳しくみる最近テキストが半分隠れていたり、上下に分割されていたりするサイトをよく見かけます。上下分割は、上用と下用でテキストをダブルで用意していたり、分割しているように見えるように線が上から引かれていたりします。今回は、半分隠れているように見える↓こんな感じのテキストを作ってみます。ボーダーがあって、最初の1文字だけ出ていて、2文字目以降のボーダーから下が消えているみたいに見えるテキストです。Designer」の下部分に乗っかっているだけなんですね。Designer実際のマークアップテキストなのでコピーできますまず、HTMLで必要なのは以下の3行だけです。Designer」というテキストが出来ますよね。ここから、疑似要素をうまく使って、ボーダーと長方形を作り出します。CSSを見ていきます。relative;で位置を基準に設定します。背景色を指定しておきます。16px;}ここで、txt_wrapにbeforeを使って疑似要素を作ります。これをボーダーにしてみます。幅は親要素に基づく100%で、高さは1px(ボーダーの太さ)の箱を作って、背景色を黒くすると、ボーダーに見えます。absolute;で配置を決めます。親要素のtxt_wrapを基準としていますので、txt_wrapのbottomから16pxの位置にボーダーが来るようにしました。この辺は適宜調整してみてください。20px;}次に、font-sizeとpaddingを入れます。このpaddingによって、次に作る長方形の左からの位置が変わってきます。ここまでで、ボーダーが上に乗った状態ですね。ここに、背景色(今回は白)と同じ白で作った長方形を重ねていきます。49px;}.txtにbeforeを使って白い長方形を作成します。widthは適当(隠したい文字が隠れる程度の幅)を指定し、heightはボーダーの位置が下から16pxなので、分かりやすく16pxにしました。場所は、bottom(一番下から)0の位置、leftは文字の左に開いている余白(.txtのpadding-left)を考慮して、49pxになっていますが、適宜調整してみてください。これだけで、簡単に隠れたように見える文字が作成できます。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。Δコメントは承認後に表示されます。コメント投稿後元記事のトップに戻ります。使って画像の好きな場所をトリミングする【CSS】Instagram風フレームコーディングはどうやる?【css】hover(マウスオン)で画像を大きくする【css】コピペOK!ボタンデザインまとめAboutこのサイトは、これからWebデザイナーを志す方の為の、情報発信サイトです。【css】テキストを右から左に流すアニメーションProfileSearch\Instagramでもwebデザイン情報発信中/このサイトについてプライバシーポリシーサイトマップ©chiiweb.net。