加快你的網(wǎng)頁排版游戲本教程使用分層的字體在WebFlow CMS標(biāo)題。

分層的字體（又名三維字體，彩色字體，和色?字體）字體，有幾個(gè)變種看起來可以層創(chuàng)建各種有趣和美麗的排版效果。

巴爾博亞加，話語中，Sutro Shaded是非常受歡迎的例子，分層的字體，但有你在那里做的3D選項(xiàng)

我們將使用這個(gè)教程卡爾的陰影。圖片來源：英文字體識(shí)別

結(jié)合WebFlow的CMS，分層的字體是非常容易使用，可以讓你的標(biāo)題和其他文本元素的一個(gè)獨(dú)特的，有特色的看。

這些字體設(shè)計(jì)者提供一個(gè)令人興奮的設(shè)計(jì)方案：在一個(gè)文本顯示多種顏色和材質(zhì)的能力。不幸的是，分層的字體沒有被廣泛使用的網(wǎng)絡(luò)上，因?yàn)橄冗M(jìn)的設(shè)計(jì)技術(shù)要求，以及文件的重量可以添加到網(wǎng)站。

使用分層字體的標(biāo)題，例如，您需要?jiǎng)?chuàng)建每一層要使用的字體的一個(gè)標(biāo)題元素，然后用CSS層精確定位屬性。

我們將使用這個(gè)設(shè)計(jì)的靈感：

一個(gè)分層的字體可以使用在Webflow

我們將使用蘇特羅的陰影，如Typekit它是可用的，它包含在Adobe CC。但你可以使用任何適合你的幻想-分層字體只知道我們將要使用的各種名稱卡爾陰影類名稱在教程，所以如果你使用不同的字體，你會(huì)用不同的名字，最有可能的。

知識(shí)，許多Web字體可以減緩你的網(wǎng)站

為了建立這個(gè)例子中，我都是裝的變化，海水的陰影，爆炸我的試劑盒的重量708k！對(duì)生產(chǎn)現(xiàn)場(chǎng)的不可接受的，所以一定要限制數(shù)量的層可以使用。

一個(gè)動(dòng)態(tài)的收集

你可以使用這個(gè)技術(shù)，你的站點(diǎn)上的任何文字，但真正開始了自己當(dāng)使用動(dòng)態(tài)內(nèi)容。

現(xiàn)在，在與節(jié)目！

步驟1：添加你的第一個(gè)字體層

首先，我們需要?jiǎng)?chuàng)建一個(gè)元素包含我們的標(biāo)題。所以我們會(huì)把一個(gè)div畫布上，稱之為“分層標(biāo)題容器。”然后我們就把這個(gè)div的相對(duì)位置。

因?yàn)槲覀冋诮⒁粋€(gè)動(dòng)態(tài)的文章標(biāo)題，我們會(huì)把標(biāo)題元素div，設(shè)置它為H2，并命名為“分層卡爾的稱號(hào)。”

注：一般來說，你不會(huì)想在一個(gè)類名使用特定的字體的名稱，你可能會(huì)決定切換到一個(gè)不同的分層字體在未來。

步驟2：設(shè)計(jì)你的標(biāo)題層

接下來我們將風(fēng)格我們的H2，選擇享受原字體陰影，給它一個(gè)很厚實(shí)的45px大小。由于字體是充滿了細(xì)節(jié)，我們需要它來渲染好大。

現(xiàn)在讓我們創(chuàng)建一個(gè)組合類稱為“陰影小學(xué)”并把它的位置：絕對(duì)的，與頂部和左側(cè)設(shè)置為0。

步驟3：再添加一個(gè)文本層

因?yàn)槲覀儾幌攵郒2S與我們頁面上的文字一樣，我們會(huì)在頁面中添加一個(gè)文本元素并給它的階級(jí)分層Sutro標(biāo)題“所以它會(huì)看作為第一個(gè)標(biāo)題層相同。

因?yàn)樗墙^對(duì)定位，應(yīng)該會(huì)出現(xiàn)新的層在第一層的上面。如果你不能看到它不要恐慌：它的存在。

現(xiàn)在，取代“陰影原“組合類在這個(gè)新的文字層，一個(gè)新的組合類稱為“陰影填補(bǔ)。”

然后選擇享受的字體“填充”的變體，并給它一個(gè)不同的顏色，這樣我們就可以在我們看到它。

步驟4：為你的字體需要重復(fù)

現(xiàn)在，讓我們重復(fù)操作2次“你好”和“梯度”層，選擇字體相應(yīng)的變?yōu)槊恳粋€(gè)新的文本層和組合類。只是一定要給每一層不同的顏色來簡(jiǎn)化設(shè)計(jì)過程。

步驟5：為了讓你的層

一旦你得到了所有你需要的圖層，你要確保他們?yōu)椤?/p>

要做到這一點(diǎn)，使用導(dǎo)航面板上選擇第一層，給它一個(gè)Z指數(shù)1。然后重復(fù)如下：

填充層：Z指數(shù)2

高亮度：2層的Z

梯度層：Z -指數(shù)：3

調(diào)整每個(gè)顏色，你應(yīng)該看看這個(gè)：

步驟6：鉤到了CMS

在這一點(diǎn)上，你可能已經(jīng)意識(shí)到，這個(gè)標(biāo)題是非常密集的工作。每次你想改變它，你就很難達(dá)到選擇元素要做4次。

這是什么使CMS偉大的方式來使用這些分層字體-因?yàn)樗鼤?huì)處理所有的辛勤工作的編輯為你。

鏈接你的新奇的去收集，選擇標(biāo)題div容器放在一個(gè)動(dòng)態(tài)列表或集合模板頁面。

然后，一個(gè)接一個(gè)，選擇每層，告訴它“文本”的稱號(hào)（可能是你的名字你的CMS采集現(xiàn)場(chǎng)）。第一層后，它會(huì)看起來像這樣：

一旦你所有的層都連接到適當(dāng)?shù)念I(lǐng)域，你可能需要調(diào)整行高（否則，較低的線將重疊以上）。只是一定要調(diào)整的行的高度roottitle元素的類（如果你使用我們的樣本類的名字，那就是“分層Sutro標(biāo)題”否則，只是每個(gè)組合類的第一個(gè)元素），那么它會(huì)影響所有的層，讓你的標(biāo)題。

和你做！現(xiàn)在，每一個(gè)動(dòng)態(tài)的帖子標(biāo)題將顯示在你的漂亮的字體風(fēng)格分層，無需你做所有的工作。好的，對(duì)嗎？

你最喜歡的字體的蓬勃發(fā)展是什么？

分層的字體可以是一個(gè)強(qiáng)大的文體工具，特別是如果你正在建設(shè)一個(gè)復(fù)古風(fēng)格的CMS驅(qū)動(dòng)的網(wǎng)站。但也有其他偉大的印刷方法很多。讓我們知道你最喜歡的是，我們會(huì)看到它創(chuàng)建一個(gè)適合的分層的字體。

當(dāng)前題目：成都網(wǎng)絡(luò)公司：字體設(shè)計(jì)的分層處理
標(biāo)題鏈接：http://m.newbst.com/news38/315388.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、品牌網(wǎng)站設(shè)計(jì)、建站公司、網(wǎng)站排名、靜態(tài)網(wǎng)站、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)