gradientの書き方

2018.05.17

■linear-gradient

/* linear-gradient(to 終了位置, 開始色, 終了色) */
background: linear-gradient(to bottom, #FFFFFF, #F3F3F3);

1 2	/* linear-gradient(to 終了位置, 開始色, 終了色) */ background: linear-gradient(to bottom, #FFFFFF, #F3F3F3);

アンドロイドや、 iOSに対応するために、webkitのベンダープレフィックス付きで記述する必要があります。

■linear-gradientで途中の色を指定する

/* linear-gradient(to 終了位置, 開始色, 途中色 位置, 終了色) */
background: linear-gradient(to bottom, #FFFFFF, #CCCCCC 30%, #333333);
<pre>

■斜めにグラデーション
<pre>
background: linear-gradient(45deg, #FFFFFF, #CCCCCC 30%, #333333);/* 45度右上にグラデーション */

/* linear-gradient(to 終了位置, 開始色, 途中色位置, 終了色) */

background: linear-gradient(to bottom, #FFFFFF, #CCCCCC 30%, #333333);

<pre>

■斜めにグラデーション

<pre>

background: linear-gradient(45deg, #FFFFFF, #CCCCCC 30%, #333333);/* 45度右上にグラデーション */

■円形のグラデーション　radial-gradient

background: radial-gradient(left center 0deg, ellipse farthest-side, #FFFFFF, #CCCCCC 50px, #333333);

1	background: radial-gradient(left center 0deg, ellipse farthest-side, #FFFFFF, #CCCCCC 50px, #333333);

開始位置の初期値はcenterです。
left, right, top, bottomをpx, %の数値で指定できます。

この記事を見た人は次の記事も見ています。

IEで＜br＞が正しく表示されない

WP「MW WP Form」のエラー文言を変更する

gradientの書き方

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

疑似クラス

wpプラグインulikeボタンを記事一覧でも表示させる方法

ネガティブマージン

[jQuery]地域別にコンテンツをカテゴリー分けするメニュー

トップページのSEO設定方法

pcとsp時での条件分岐