ブログパーツとか: CSSシミュレータ（background-image:linear-gradient()）

【使い方】textareaの中身（値）を書き換えて色々と試してみるサンプル / linear-gradient

to right,              /*①方向*/
black 0%,              /*②色と位置（開始色）*/
white 50%,             /*②色と位置（途中色）*/
black 100%             /*②色と位置（終了色）*/

to top right,          /*①方向*/
black 0%,              /*②色と位置（開始色）*/
white 50%,             /*②色と位置（途中色）*/
black 50%,             /*②色と位置（途中色）*/
white 100%             /*②色と位置（終了色）*/

to right,              /*①方向*/
black 0%,              /*②色と位置（開始色）*/
black 50%,             /*②色と位置（途中色）*/
white 50%,             /*②色と位置（途中色）*/
white 100%             /*②色と位置（終了色）*/

サンプル / repeating-linear-gradient

to right,              /*①方向*/
black 0%,              /*②色と位置（開始色）*/
black 5%,              /*②色と位置（途中色）*/
green 5%,              /*②色と位置（途中色）*/
green 10%,             /*②色と位置（途中色）*/
orangered 10%,         /*②色と位置（途中色）*/
orangered 15%          /*②色と位置（終了色）*/

to right,              /*①方向*/
black 40%,             /*②色と位置（開始色）*/
white 50%              /*②色と位置（終了色）*/

45deg,                 /*①方向*/
gray 0%,               /*②色と位置（開始色）*/
gray 1%,               /*②色と位置（途中色）*/
pink 1%,               /*②色と位置（途中色）*/
pink 2%                /*②色と位置（終了色）*/

①方向
　上へ / to top = 0deg
　右へ / to right = 90deg = -270deg
　下へ / to bottom = 180deg = -180deg　（初期値）
　左へ / to left = 270deg = -90deg
　右上（対角線）へ / to top right
　右下（対角線）へ / to bottom right
　左下（対角線）へ / to bottom left
　左上（対角線）へ / to top left

②位置と色 / 位置はpxか%で指定。色はカラーネーム、カラーコード、RGB、RGBAで指定
　1カ所に1色指定すれば、境界線がグラデーション
　1カ所に2色指定すれば、境界線がくっきり
　続けて同じ色を指定すれば、べた塗り
　位置を指定しなければ、等分（指定数-1）

③画像の繰り返し表示 / background-repeat
　no-repeat / 1回限り、繰り返しなし
　repeat / 縦横両方向に繰り返し
　repeat-x / 横方向に繰り返し
　repeat-y / 縦方向に繰り返し

④背景の表示領域 / background-clip（background-colorで確認すればわかりやすい）
　border-box / borderとpaddingを含む領域に表示
　padding-box / borderを除きpaddingを含む領域に表示
　content-box / borderとpaddingを除く領域に表示

⑤画像の表示起点 / background-origin
　padding-box / borderを除きpaddingを含む領域の左上が起点
　border-box / borderとpaddingを含む領域の左上が起点
　content-box / borderとpaddingを除く領域の左上が起点

HTML

<div id="backgroundImageDisplay3"></div>

<⚠textarea style="width:99%;height:350px;font-family:monospace;" id="backgroundImageTextarea3" onInput="backgroundImageSimulator3();">
<style>
#backgroundImageDisplay3 {
    height:300px;border:15px dashed lime;padding:20px;box-sizing-border-box;
    background-image:linear-gradient(          /*💥*/
        to bottom ,                            /*①方向*/
                  ,                            /*②色と位置（開始色）*/
                  ,                            /*②色と位置（途中色）*/
                                               /*②色と位置（終了色）*/
       );
    background-image:repeating-linear-gradient(/*💥開始色と終了色の位置を境にして、前後に繰り返す*/
        to bottom ,                            /*①方向*/
                  ,                            /*②色と位置（開始色）*/
                  ,                            /*②色と位置（途中色）*/
                                               /*②色と位置（終了色）*/
       );
/*💥borderがnoneかsolidなら、③④⑤は不要*/
    background-repeat: repeat ;                /*③画像の繰り返し表示*/
    background-clip: border-box ;              /*④背景の表示領域*/
    background-origin: padding-box ;           /*⑤画像の表示起点*/
   }
</style>
<⚠/textarea><!--⚠は削除する-->

JavaScript

<script>
var backgroundImageSimulator3=function(){
    document.getElementById("backgroundImageDisplay3").innerHTML=document.getElementById("backgroundImageTextarea3").value;
   }
onLoad=backgroundImageSimulator3();
</script>

2020年4月7日火曜日

CSSシミュレータ（background-image:linear-gradient()）