2016-03-08 35 views
1

很確定這可能與CSS3,但我不知道如何。鑑於這種設計模式使用CSS創建響應式重複各種高度垂直線模式

Repeating Vertical Hash Marks of Varying Heights

創建CSS3放大或縮小,以填補一個負責任的容器水平井號(作爲背景?)。

Chris Coyier提供了這個Vertical Stripe CodePen,但是如何修改以重新創建上面的模式呢?

HTML

<div class="module"> 
<h2 class="stripe-6">Vertical</h2> 
<p>You could do some schenigans where you have a big rotated element within 
this header area (with hidden overflow) that has these stripes. That way 
you could get away with not using repeating-linear-gradient.</p> 
</div> 

CSS

.module { 
    background: white; 
    border: 1px solid #ccc; 
    margin: 3%; 
    > h2 { 
    padding: 1rem; 
    margin: 0 0 0.5rem 0; 
    } 
    > p { 
    padding: 0 1rem; 
    } 
} 

.stripe-6 { 
    color: black; 
    background: repeating-linear-gradient(
    to right, 
    #f6ba52, 
    #f6ba52 10px, 
    #ffd180 10px, 
    #ffd180 20px 
); 
} 

這裏有一個更大,更高對比度的圖像查看模式更好(感謝@馬丁!)larger, higher-contrast image

+0

我幾乎看不到什麼的圖片... – martin

+0

感謝超市沒有意識到圖像很難看。我添加了一個更大,更高對比度的圖像,以便您可以看到。 – KillerDesigner

回答

2

是的,這是絕對有可能使用linear-gradient背景圖像創建此模式。與Chris Coyier生成的模式不同,這需要兩個線性漸變,因爲有兩個不同高度和間距的條紋。

.bg-pattern{ 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: rgb(115,199,192); 
 
    background-image: linear-gradient(to right, rgba(0,0,0,0.25) 6px, transparent 6px), linear-gradient(to right, transparent 12px, rgba(0,0,0,0.25) 12px, rgba(0,0,0,0.25) 14px, transparent 14px, transparent 20px, rgba(0,0,0,0.25) 20px, rgba(0,0,0,0.25) 22px, transparent 22px, transparent 28px, rgba(0,0,0,0.25) 28px, rgba(0,0,0,0.25) 30px, transparent 30px, transparent 36px, rgba(0,0,0,0.25) 36px, rgba(0,0,0,0.25) 38px, transparent 38px); 
 
    background-repeat: repeat-x; 
 
    background-size: 44px 30px, 44px 20px; 
 
    background-position: 8px 0px; 
 
    border-top: 2px solid rgba(0,0,0,0.25); 
 
}
<div class='bg-pattern'></div>


以下片段中添加到您的代碼相同的模式:

.module { 
 
    background: white; 
 
    border: 1px solid #ccc; 
 
    margin: 3%; 
 
} 
 
.module > h2 { 
 
    padding: 1rem; 
 
    margin: 0 0 0.5rem 0; 
 
} 
 
} 
 
.module > p { 
 
    padding: 0 1rem; 
 
} 
 
.stripe-6 { 
 
    color: black; 
 
    height: 50px; 
 
    background-color: rgb(115, 199, 192); 
 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25) 6px, transparent 6px), linear-gradient(to right, transparent 12px, rgba(0, 0, 0, 0.25) 12px, rgba(0, 0, 0, 0.25) 14px, transparent 14px, transparent 20px, rgba(0, 0, 0, 0.25) 20px, rgba(0, 0, 0, 0.25) 22px, transparent 22px, transparent 28px, rgba(0, 0, 0, 0.25) 28px, rgba(0, 0, 0, 0.25) 30px, transparent 30px, transparent 36px, rgba(0, 0, 0, 0.25) 36px, rgba(0, 0, 0, 0.25) 38px, transparent 38px); 
 
    background-repeat: repeat-x; 
 
    background-size: 44px 30px, 44px 20px; 
 
    background-position: 8px 0px; 
 
    border-top: 2px solid rgba(0, 0, 0, 0.25); 
 
}
<div class="module"> 
 
    <h2 class="stripe-6">Vertical</h2> 
 
    <p>You could do some schenigans where you have a big rotated element within this header area (with hidden overflow) that has these stripes. That way you could get away with not using repeating-linear-gradient.</p> 
 
</div>

+2

哇,那真是太棒了!謝謝@哈利!我將不得不研究這個來理解你是如何創建它的。我非常感謝你的專業知識。 – KillerDesigner

+0

酷!玩完你的代碼之後,我有了很好的理解。再次感謝!遵循問題(即使合法?)....可以應用三個梯度嗎?所以我們現在有兩個,但是如果我們想要一個對比的背景,比如說200px或者其他什麼,然後是另一個顏色,如下所示:[Dropbox image](https://www.dropbox。 com/s/b3qdj7707hh5b5j /截圖%202016-03-09%2011.04.22.png?dl = 0) – KillerDesigner

+0

[CODEPEN](http://codepen.io/KillerDesigner/pen/QNNVoG) – KillerDesigner