水平條紋是最容易用代碼寫出來的,但用戶在網頁上看到的條紋圖案很多都不是水平的。
有些條紋是垂直的(如圖1-1),而且某些形態的斜條紋或許更受歡迎,看起來更有趣。
幸運的是,CSS 漸變同樣也能幫助我們創建出這些效果,只是難度稍有不同。
垂直條紋的代碼跟水平條紋幾乎一樣的,主要區別在于:我們需要在開頭加上一個額外的參數來指定漸變的方向。
在水平條紋的代碼中,我們其實也可以加上這個參數,只不過它的默認值 to bottom 本來就跟我們的意圖一致,于是就省略了。最后,我們還需要把 background-size 的值顛倒一下。
background:linear-gradient(to right,#fb3 50%,#58a 0);
background-size:30px 100%;
圖1-1
在完成了水平和垂直條紋后,我們繼續思考:如果再次改變 backgroun-size 的值和漸變的方向,是不是就可以得到斜向(比如45度)的條紋圖案呢?(如圖1-2)
圖1-2
background: linear-gradient(45deg,#fb3 50%, #58a 0);
background-size: 30px 30px;
可以發現,這個辦法行不通。
原因在于:我們只是把每個“貼片”內部的漸變旋轉 45 度,而不是把整個重復的背景都旋轉了。
試著回憶一下,我們以前用位圖來生成斜向條紋時是怎么做的?
做法類似 (圖1-3),單個貼片包含了四條條紋,而不是兩條,只有這樣才有可能做到無縫拼接。它正是我們需要在 CSS 代碼中重新實現的貼片,因此我們需要增加一些色標。
圖1-3
background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size:30px 30px;
如圖1-4所見,我們成功創建了斜向條紋,但是這些條紋看起來比前面制作的水平條紋和垂直條紋更細一些。
為了理解其中的緣由,我們需要回憶勾股定理,計算直角三角形的斜邊:一個直角三角形。
圖1-4
幸運的是,linear-gradient() 和 radial-gradient() 還各有一個循環式的加強版:repeating-linear-gradient() 和 repeating-radial-gradient()。
它們的工作方式跟前兩者類似,只是色標是無限循環重復的,直到鋪滿整個背景。下面是一個重復漸變的例子(圖1-5)
圖1-5
background:repeating-linear-gradient(45deg,#fb3,#58a 30px);
重復線性漸變完美適用于條紋效果,這得益于它可以無限循環色標。
現在就可以隨心所欲地改變漸變的角度了,但是請注意,在這個方法中,不論是什么角度,我們都需要用到四個色標。
這意味著,水平和垂直條紋還是用原來的方法——斜向條紋來實現。
在多數情況下,我們想要的條紋都不是由差異極大的顏色組成的,而是屬于同一色系的,在透明度上有一些差異的顏色,例如圖1-6。
圖1-6
background:repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 30px);
在圖中我們可以看到,條紋是由一個主色調 #58a 和它的淺色變體組成的。
但是,這兩種顏色之間的關系在代碼中并沒有體現出來,如果我們想要改變這個主色調,需要修改四處。
幸運的是,有一種更好的方法:不再為每種條紋單獨指定顏色,而是把最深的顏色指定為背景色,同時把半透明色的條紋疊加在背景色之上來得到淺色條紋。
background:#58a;
background-image:repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,transparent 0,transparent 30px);
現在,我們只需要修改一個地方就可以改變所有顏色了。
以上就是本期使用 CSS 創建垂直、斜向、同色系等不同條紋背景的實踐分享,希望對大家有幫助。
下期給大家分享更多實戰中的點滴,如果大家對此感興趣,歡迎各位關注、留言,大家的支持就是我的動力!
WEB開發中,HTML負責網頁的結構,CSS負責網頁上各個元素的展示樣式,JS則負責網頁和用戶的交互。想要成為一名優秀的前端工程師,首先要做的就是遵守這三者各司其職的原則,讓我們的代碼易于維護和擴展。
但是,有時候我們常常一不小心就破壞了這個原則。又或者,我們為了實現業務需求,根本不管這個規則。這都會導致我們的代碼結構混亂,維護困難。
比如,我們有一個任務,它的具體需求是這樣的:給一個網頁實現一個深色系和淺色系主題的切換,以使得在夜晚訪問這個網頁的讀者能夠使用“夜間模式”。
這個網頁的HTML大概是這樣的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>深夜食堂</title>
<style>
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
padding: 10px;
box-sizing: border-box;
}
div.pic img {
width: 100%;
}
#modeBtn {
font-size: 2rem;
float: right;
}
</style>
</head>
<body>
<header>
<button id="modeBtn"></button>
<h1>深夜食堂</h1>
</header>
<main>
<div class="pic">
<img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
</div>
<div class="description">
<p>
這是一間營業時間從午夜十二點到早上七點的特殊食堂。這里的老板,不太愛說話,卻總叫人吃得熱淚盈
眶。在這里,自卑的舞蹈演員偶遇隱退多年舞界前輩,前輩不惜講述自己不堪回首的經歷不斷鼓舞年輕人,最終令其重拾自信;輕言絕交的閨蜜因為吃到共同喜愛的美食,回憶起從前的友誼,重歸于好;樂觀的絕癥患者遇到同命相連的女孩,兩人相愛并相互給予力量,陪伴彼此完美地走過了最后一程;一味追求事業成功的白領,在這里結交了真正暖心的朋友,發現真情比成功更有意義。食物、故事、真情,匯聚了整部劇的主題,教會人們坦然面對得失,對生活充滿期許和熱情。每一個故事背后都飽含深情,情節跌宕起伏,令人流連忘返 [6] 。
</p>
</div>
</main>
</body>
</html>
現在的頁面,在手機上看起來是這樣的效果:
需求是當用戶點擊網頁右上角的太陽圖標時,將網頁變為深夜模式,即用深色背景、淺色字體來顯示網頁內容,同時太陽標記變為月亮標記。
這個任務很簡單,你可能非??斓木蛯懗鲆韵麓a:
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(e.target.innerHTML === '') {
body.style.backgroundColor = 'black';
body.style.color = 'white';
e.target.innerHTML = '';
} else {
body.style.backgroundColor = 'white';
body.style.color = 'black';
e.target.innerHTML = '';
}
});
這個代碼當然是可以work的。
這是點擊按鈕后切換的網頁呈現效果:
看起來,我們完美地實現了產品的需求,可以交差了。但是實際上,上面的代碼存在以下三個問題:
那么,我們怎么實現以上需求更好呢?
大家可以思考一下,然后給我們留言。
以上內容的答案,在《前端進階十日談》中有詳細描述哦。
oundation 默認設置
Foundation 使用瀏覽器默認字體大小 (font-size:100%
)。對于大多數桌面瀏覽器來說,字體默認為 16px。對于大多數移動端瀏覽器來說,字體默認為 12px。默認的字體為 "Helvetica Neue"
, line-height 默認為 1.5
。
以上默認的設置均是針對 <body>
元素。
Foundation 文字排列設計
我們將討論 Foundation 的文字排列設計。
以下實例的真實樣式請通過點擊"嘗試一下"按鈕查看。
<h1> - <h6>
Foundation 渲染的 HTML 標題 (<h1>
到 <h6>
) 如下所示:
實例
<h1>h1 標題</h1><h2>h2 標題</h2><h3>h3 標題</h3><h4>h4 標題</h4><h5>h5 標題</h5><h6>h6 標題</h6>
嘗試一下 ?
提示: 如果需要創建一個淺色的標題,可以在元素上添加 .subheader
類:
實例
<h1class="subheader">h1.subheader</h1><h2class="subheader">h2.subheader</h2><h3class="subheader">h3.subheader</h3><h4class="subheader">h4.subheader</h4><h5class="subheader">h5.subheader</h5><h6class="subheader">h6.subheader</h6>
<small>
在 Foundation 中, HTML <small>
元素用于創建一個淺色的副標題:
實例
<h1>h1 heading <small>secondary text</small></h1><h2>h2 heading <small>secondary text</small></h2><h3>h3 heading <small>secondary text</small></h3><h4>h4 heading <small>secondary text</small></h4><h5>h5 heading <small>secondary text</small></h5><h6>h6 heading <small>secondary text</small></h6>
嘗試一下 ?
<a>
Foundation <a>
元素的樣式如下所示:
實例
<p>這是一個 <aclass="a"href="#">鏈接</a>。</p>
<abbr>
Foundation <abbr>
元素的樣式如下所示:
實例
<p>The <abbrtitle="World Health Organization">WHO</abbr> was founded in 1948.</p>
嘗試一下 ?
<blockquote>
Foundation <blockquote>
元素的樣式如下所示:
實例
<blockquote><p>學的不僅是技術,更是夢想!</p><cite>菜鳥教程</cite></blockquote>
嘗試一下 ?
<dl>
Foundation <dl>
元素的樣式如下所示:
實例
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
嘗試一下 ?
<code>
Foundation <code>
元素的樣式如下所示:
實例
<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 是文檔的一部分。</p>
嘗試一下 ?
<kbd>
Foundation <kbd>
元素的樣式如下所示:
實例
<p>按下 <kbd>ctrl + p</kbd> 鍵打開打印窗口。</p>
嘗試一下 ?
<hr>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。