Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <div class="wrapper">
        <h1>實用 CSS3 background pattern</h1>
        <p>
            參考資料：<br><br>
            <a class="btn" target="_blank" href="https://jsfiddle.net/JohnnyWorker/r30oqptu/?utm_source=website&utm_medium=embed&utm_campaign=r30oqptu">來源一：JSFiddle</a>
            <a class="btn" target="_blank" href="http://lea.verou.me/css3patterns/">來源二：CSS3 Patterns Gallery</a>
            <a class="btn" target="_blank" href="http://codepen.io/frank890417/pen/jrAKbO?editors=0100">來源三：Codepen_Comic Texture</a>
        </p>
​
        <div class="r1">
            <div class="block block0">
                <div class="txt">
                    <h2>圓點 .block0</h2>
                    <span>CSS</span>
                    background: radial-gradient(#ff8da1 30%, pink 34%);<br>
                    background-size: 30px 30px;<br><br>
                    <span>TIP</span>
                    背景色要比圓點多1~5%，視background-size而定<br>
                    ※ background-size越小，%數差距要越多<br>
                    → 差距太小：邊緣會有鋸齒<br>
                    → 差距太大：邊緣會模糊<br>
                </div>
            </div>
        </div>
​
        <div class="r1">
            <div class="c1">
                <div class="block block1">
                    <div class="txt">
                        <h3>大圓點 .block1</h3>
                        <span>CSS</span>
                        background: radial-gradient(pink 60%, #ff8da1 62%);<br>
                        background-size: 70px 70px;<br><br>
                    </div>
                </div>
            </div>
            <div class="c2">
                <div class="block block2">
                    <div class="txt">
                        <h3>小圓點 .block2</h3>
                        <span>CSS</span>
                        background: radial-gradient(pink 15%, #ff8da1 20%);<br>
                        background-size: 15px 15px;<br><br>
                    </div>
                </div>
            </div>
        </div>
​
​
        <div class="r1">
            <div class="block block3">
                <div class="txt">
                    <h2>線條 .block3</h2>
                    <span>CSS</span>
                    background: linear-gradient(90deg, lightblue 50%, #dceef4 0%);<br>
                    background-size: 30px 30px;<br><br>
                    <span>TIP</span>
                    ※ 橫條紋：0deg<br>
                    ※ 斜線並不是45deg，要用其他方法
                </div>
            </div>
        </div>
​
        <div class="r1">
            <div class="c1">
                <div class="block block4">
                    <div class="txt">
                        <h3>斜線 .block4</h3>
                        <span>CSS</span>
                        background-size: 26px 26px;<br>
                        background-color: lightblue;<br>
                        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);<br><br>
                        <span>TIP</span>
                        要特定數字的px才不會有鋸齒，經實驗過後有：<br>
                        8, 10, 12, 16, 18, 19, 26, 30, 32, 34....
                    </div>
                </div>
            </div>
            <div class="c2">
                <div class="block block5">
                    <div class="txt">
                        <h3>細斜線 .block5</h3>
                        <span>CSS</span>
                        background-size: 8px 8px;<br>
                        background-color: lightblue;<br>
                        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);<br><br>
                        <span>TIP</span>
                        要特定數字的px才不會有鋸齒，經實驗過後有：<br>
                        8, 10, 12, 16, 18, 19, 26, 30, 32, 34....
                    </div>
                </div>
            </div>
        </div>
​
        <div class="r1">
            <div class="block block6">
                <div class="txt">
                    <h3>格紋 .block6</h3>
                    <span>CSS</span>
                    background-color: #86c5da;<br>
                    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 50%, transparent 50%), linear-gradient(rgba(255, 255, 255, 0.3) 50%, transparent 50%);<br>
                    background-size: 25px 25px;<br><br>
                </div>
            </div>
        </div>
​
        <div class="r1">
            <div class="c1">
                <div class="block block7">
                    <div class="txt">
                        <h3>斜格紋 .block7</h3>
                        <span>CSS</span>
                        background-size: 26px 26px;<br>
                        babackground-color: #86c5da;<br>
                        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent), linear-gradient(135deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);<br><br>
                    </div>
                </div>
            </div>
            <div class="c2">
                <div class="block block8">
                    <div class="txt">
                        <h3>細格紋 .block8</h3>
                        <span>CSS</span>
                        background: radial-gradient(lightblue 50%, #5fb3ce 50%);<br>
                        background-size: 5px 5px;<br><br>
                    </div>
                </div>
            </div>
        </div>
​
        <div class="r1">
            <div class="c1">
                <div class="block block9">
                    <div class="txt">
                        <h3>變化型格紋 .block9</h3>
                        <span>CSS</span>
                        background-color: lightblue;<br>
                        background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);<br>
                        background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;<br>
                        background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;<br><br>
                    </div>
                </div>
            </div>
            <div class="c2">
                <div class="block block10">
                    <div class="txt">
                        <h3>變化型格紋 .block10</h3>
                        <span>CSS</span>
                        background-color: lightblue;<br>
                        background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05)), linear-gradient(120deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));<br>
                        background-size: 70px 120px;<br><br>
                    </div>
                </div>
            </div>
        </div>
​
        <div class="r1">
            <div class="c1">
                <div class="block block11">
                    <div class="txt">
                        <h3>棋盤型 .block11</h3>
                        <span>CSS</span>
                        background-color: #d4ebf2;<br>
                        background-image: linear-gradient(45deg, lightblue 25%, transparent 25%, transparent 75%, lightblue 75%, lightblue), linear-gradient(45deg, lightblue 25%, transparent 25%, transparent 75%, lightblue 75%, lightblue);<br>
                        background-size: 60px 60px;<br>
                        background-position: 0 0, 30px 30px;<br><br>
                    </div>
                </div>
            </div>
            <div class="c2">
                <div class="block block12">
                    <div class="txt">
                        <h3>假3D .block12</h3>
                        <span>CSS</span>
                        background-color: lightblue;<br>
                        background-image: linear-gradient(30deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(150deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(30deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(150deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(60deg, #86c5da 25%, transparent 25.5%, transparent 75%, #86c5da 75%, #86c5da), linear-gradient(60deg, #86c5da 25%, transparent 25.5%, transparent 75%, #86c5da 75%, #86c5da);<br>
                        background-size: 80px 140px;<br>
                        background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;<br><br>
                        <span>TIP</span>
                        改色要改很多地方，建議用sass顏色變數
                    </div>
                </div>
            </div>
        </div>
    </div>
​
​
</body>
</html>
 
@charset "UTF-8";
* {
  box-sizing: border-box;
}
​
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微軟正黑體", Verdana, Arial;
}
​
html .wrapper, body .wrapper {
  max-width: 1600px;
  margin: 0 auto;
}
​
.r1:after, .block:after, .r1:before, .block:before {
  content: "";
  display: table;
}
​
.r1:after, .block:after {
  clear: both;
}
​
.r1 {
  margin: 0 auto 10px;
}
​
.r1 .c1 {
  margin-bottom: 10px;
}
​
.r1 .txt {
  float: right;
  background: rgba(255, 255, 255, 0.93);
  color: #333;
  width: 100%;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
​
.r1 .txt span {
  display: block;
  width: 60px;
  height: 30px;
  line-height: 30px;
  background: gray;
  color: white;
  text-align: center;
  margin-bottom: 10px;
}
​
h2, h3 {
  color: gray;
  font-size: 20px;
  margin: 0 auto 10px;
}
​
a.btn {
  display: inline-block;
  background: gray;
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
}
​
.block {
  position: relative;
  height: 100%;
  padding: 20px;
}
​
/*==========================範例 重點============================*/
.block0 {
  background: radial-gradient(#ff8da1 30%, pink 34%);
  background-size: 30px 30px;
}
​
.block1 {
  background: radial-gradient(pink 60%, #ff8da1 62%);
  background-size: 70px 70px;
}
​
.block2 {
  background: radial-gradient(pink 15%, #ff8da1 20%);
  background-size: 15px 15px;
}
​
.block3 {
  background: linear-gradient(90deg, lightblue 50%, #dceef4 0%);
  background-size: 30px 30px;
}
​
.block4 {
  background-size: 26px 26px;
  background-color: lightblue;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
}
​
.block5 {
  background-size: 8px 8px;
  background-color: lightblue;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
}
​
.block6 {
  background-color: #86c5da;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 50%, transparent 50%), linear-gradient(rgba(255, 255, 255, 0.3) 50%, transparent 50%);
  background-size: 25px 25px;
}
​
.block7 {
  background-size: 26px 26px;
  background-color: #86c5da;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent), linear-gradient(135deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
}
​
.block8 {
  background: radial-gradient(lightblue 50%, #5fb3ce 50%);
  background-size: 5px 5px;
}
​
.block9 {
  background-color: lightblue;
  background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
​
.block10 {
  background-color: lightblue;
  background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05)), linear-gradient(120deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
  background-size: 70px 120px;
}
​
.block11 {
  background-color: #d4ebf2;
  background-image: linear-gradient(45deg, lightblue 25%, transparent 25%, transparent 75%, lightblue 75%, lightblue), linear-gradient(45deg, lightblue 25%, transparent 25%, transparent 75%, lightblue 75%, lightblue);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}
​
.block12 {
  background-color: lightblue;
  background-image: linear-gradient(30deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(150deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(30deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(150deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(60deg, #86c5da 25%, transparent 25.5%, transparent 75%, #86c5da 75%, #86c5da), linear-gradient(60deg, #86c5da 25%, transparent 25.5%, transparent 75%, #86c5da 75%, #86c5da);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}
​
@media screen and (min-width: 900px) {
  .r1 .c1, .r1 .c2 {
    width: 49%;
  }
  .r1 .c1 {
    float: left;
    margin-bottom: 0px;
  }
  .r1 .c2 {
    float: right;
  }
  .r1 .txt {
    width: 70%;
  }
}
 
$(function(){
​
        var iItemH = 0;
​
        $(window).on("resize", function(){
            fnChangeHeight();
        }).trigger("resize");
​
        function fnChangeHeight(){
            $(".r1").each(function(){
                if( $(this).find(".c1").length > 0){
​
                    //先歸零成auto
                    $(this).find(".c1, .c2").css({height:"auto"});
                    iItemH = $(this).height();
​
                    // 改變高度
                    $(this).find(".c1, .c2").css({height:iItemH});
                }
​
            });
        }
​
    });
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
yakim-shupro
0viewers