無料登録ログインソースコードを投稿タグ:CSS3(126)CSS3:グリッド背景を作るgoto_jp|2,533views|更新:2014年5月12日ストックいいね!1サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/GywcdCSS3のlinear-gradientの応用で背景をグリッド状にすることが可能です。IEも10以降(?)であれば対応しています。repeat;}肝要のbackground-imageは分かりやすいようプロパティ内改行を入れています。linear-gradientで透明から黒を変化するグラデーションを設定しており、background-sizeを指定することで背景を20×20のサイズでタイル状にしてリピートさせています。);}//※background-imageのみ抜粋bg1の内容とほぼ変わらないのですが、グラデーション内の色を透明95%、黒5%で位置を指定しています。グラデーションの仕様上px値で指定できないのですが、こうすることで黒が限りなく細くなり、サンプル通り線が連続して引かれているように見えます。);}//※background-imageのみ抜粋CSS3では背景イメージを複数設定できます。その要領でlinear-gradientを複数追加しています。することでグラデーションの向きを変え、グリッド状の背景を作っています。新規登録またはメールアドレスで新規登録SNSアカウントをご利用いただけます。FacebookGitHubTwitterログインメールアドレスまたはユーザー名パスワードログイン状態を保存するログインパスワードをお忘れですか?hacknoteを利用することでソースコードを簡単に共有できます。新規登録してコメントするこのソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。キュレーター424hacksgoto_jpフロントコーディングと効率化などについてよく書きます。