2019.12.05
274
フォトショでグラデーション作るのまんどくせ(・8・)
まじまんどくせ(・8・)
切り出すのもまんどくせ(・8・)
と思い試しにcssだけで作ってみました。
<div>
大丈夫だ、問題ない。
</div>
#enoch{
color:#fff;
font-size:20px;
height:100px;
padding:10px;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #00f, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF,endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
}
<div>
大丈夫だ、問題ない。
</div>
#enoch2{
color:#fff;
font-size:20px;
height:100px;
padding:10px;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(left top, #00f, #fff 70%);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=1)";
<div>
大丈夫だ、問題ない。
</div>
#enoch3{
color:#fff;
font-size:20px;
height:100px;
padding:10px;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f);
/* For Internet Explorer */
/* As if... */
}
これ使ってちょっとした見出しができて便利^^
でも対応してないブラウザのバージョンがあるためあまり使用することはお勧めできないかもです っ(・ω・`)