エスエムティの愉快な仲間たち

こんばんわばさっちです!!
テキストやボーダーを2色にする場合は画像を使わないとできないと思っていたのですが、調べてみたら簡単に実装できそうなのでご紹介したいと思います。

■テキスト編
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
を使えば簡単に実装することができます。



.text {
background: rgb(34,193,195);
background: -moz-linear-gradient(0deg, rgba(34,193,195,1) 50%, rgba(253,187,45,1) 50%);
background: -webkit-linear-gradient(0deg, rgba(34,193,195,1) 50%, rgba(253,187,45,1) 50%);
background: linear-gradient(0deg, rgba(34,193,195,1) 50%, rgba(253,187,45,1) 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 30px 0;
}

■ボーダー編
こっちはもっと簡単です。
:beforeを使うこと実装することができちゃいます。



.border {
padding: 20px 0;
border-left: 5px solid rgba(0,212,255,1);
padding-left: 20px;
position: relative;
}

.border:before {
position: absolute;
content: ” “;
display: block;
border-left : solid 5px rgba(2,0,36,1);
left: -5px;
width: 5px;
height: 50%;
top:0;
}

どちらも手間がかからず簡単に実装することが可能です!!
ちょっとしたアクセントにこういったスタイルもいいですよね!!!