網(wǎng)站設(shè)計

Website development

字體設(shè)計的分層處理

發(fā)布時間：2016-12-15 10:16:46

TAGS：網(wǎng)站設(shè)計

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

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

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

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

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

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

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

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

一個分層的字體可以使用在Webflow

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

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

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

一個動態(tài)的收集

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

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

步驟1：添加你的第一個字體層

首先，我們需要創(chuàng)建一個元素包含我們的標題。所以我們會把一個div畫布上，稱之為“分層標題容器?！比缓笪覀兙桶堰@個div的相對位置。

因為我們正在建立一個動態(tài)的文章標題，我們會把標題元素div，設(shè)置它為H2，并命名為“分層卡爾的稱號?！?/span>

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

步驟2：設(shè)計你的標題層

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

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

步驟3：再添加一個文本層

因為我們不想多H2S與我們頁面上的文字一樣，我們會在頁面中添加一個文本元素并給它的階級分層Sutro標題“所以它會看作為第一個標題層相同。

因為它是絕對定位，應(yīng)該會出現(xiàn)新的層在第一層的上面。如果你不能看到它不要恐慌：它的存在。

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

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

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

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

步驟5：為了讓你的層

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

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

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

高亮度：2層的Z

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

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

步驟6：鉤到了CMS

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

這是什么使CMS偉大的方式來使用這些分層字體-因為它會處理所有的辛勤工作的編輯為你。

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

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

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

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

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

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

原創(chuàng)不易，未經(jīng)授權(quán)，嚴禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,6990,0.html

上一篇：軟件開發(fā)結(jié)構(gòu)用戶測試和功能應(yīng)用測速

下一篇：好的網(wǎng)頁設(shè)計99%是排版

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計
程序設(shè)
計研發(fā)
資料錄
入優(yōu)化
確認交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團隊。

潘濤
我是東方龍馬集團，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理