文字要素ひとつにCSSでボーダーをいっぱいつける遊び

css3を使ってweb1.0感のあるデコレーションをするほうほうをはっけんしたよ!\くだらねー/

1447494279Z58i4vnZzoe5bui1447494278

(gifパージョン)

スクリーンショット 2015-11-14 18.37.51

background: linear-gradientを透過せずに50%でかける

スクリーンショット 2015-11-14 18.38.05

background-positionの上下方向をずらすとサンドイッチになるんだよ!

スクリーンショット 2015-11-14 18.36.16

border-topとbottomとbox-shadowとtext-decoration: line-throughもつけてフォントカラーかえてみたのがこちらです

最終的にspan要素に
background: linear-gradient(rgba(248, 18, 18, 0) 50%, #FF0000 0%);
border-bottom: 12px solid #BC02F9;
background-position: 0px 50px;
border-top: 13px solid #FB01C5;
box-shadow: 0px 65px 0px #00b9eb;
color: #0BF16B;
text-decoration: line-through;
をつけました

【追記】

background: linear-gradientを透過なし50%に加えてbackground-sizeも変えるとこうなるのであった

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です