文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン > CSSでチェック柄

CSSでチェック柄を作成

CSSでチェック柄のパターンを作成するには「repeating-linear-gradient」を利用することで簡単に作成することが出来ます。
当ページでは、チェック柄の色や幅、重なりの透明度などを自由に指定しながら実際のデザインを確認することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

いろいろチェック柄を試してみよう

チェック柄の幅
幅1
幅2
チェック柄の色1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
チェック柄の向き
チェック柄の色2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<div class="box">
</div>
生成したCSS
<style type="text/css">
 /* --- チェック背景 --------------------------------------- */
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                    /* チェックパターンのCSS */
  background-color : #fff;
  background-image :
      repeating-linear-gradient(45deg,
                                rgba(255, 77, 77, 0.50),
                                rgba(255, 77, 77, 0.50) 50px,
                                rgba(0, 0, 0, 0) 0,
                                rgba(0, 0, 0, 0) 100px),
      repeating-linear-gradient(315deg,
                                rgba(255, 77, 77, 0.50),
                                rgba(255, 77, 77, 0.50) 50px,
                                rgba(0, 0, 0, 0) 0,
                                rgba(0, 0, 0, 0) 100px);
}
</style>
広告
広告
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン