制作網(wǎng)站使用CSS形狀的網(wǎng)絡(luò)藝術(shù)指導(dǎo)

2009-12-24 網(wǎng)站建設(shè)觀點(diǎn)

從不懼怕使用CSS創(chuàng)造令人興奮的新設(shè)計(jì)時(shí)突破界限。在本教程中，他超越了基本的CSS形狀，并展示了如何使用它們?yōu)樗囆g(shù)指導(dǎo)的設(shè)計(jì)創(chuàng)建五種類型的獨(dú)特且引人入勝的布局。

在其中她向讀者重新介紹了使用CSS Shapes的基礎(chǔ)知識(shí)。對(duì)于任何希望了解如何使用類似性質(zhì)shape-outside，shape-margin和shape-image-threshold，Rachel的是理想的底漆。

我見過使用屬性的例子很多，但走的很少數(shù)超越基本形狀，包括circle()，ellipse()，inset()。即使使用polygon()形狀的示例也很少能超越它們。考慮到CSS Shapes提供的創(chuàng)新機(jī)會(huì)，這令人失望。但是，我敢肯定，只要有一點(diǎn)啟發(fā)和想象力，我們就能做出更具特色和吸引力的設(shè)計(jì)。因此，我將向您展示如何使用CSS Shapes創(chuàng)建以下五種不同類型的布局：

一點(diǎn)啟發(fā)

不幸的是，您不會(huì)找到許多使用CSS Shapes的啟發(fā)性示例。這并不意味著靈感就不存在-您只需要在廣告，雜志和海報(bào)設(shè)計(jì)上再往前看。但是，僅模仿以前的時(shí)代和媒介的工作對(duì)我們來說是愚蠢的。

在過去的幾年中，我為Dropbox文件夾注入了靈感，我真的應(yīng)該將這些示例移至Pinterest。幸運(yùn)的是，克里斯托弗·范·桑特（Kristopher Van Sant）比我更加勤奮地編寫了一個(gè)充滿啟發(fā)性的“文本形狀”示例的Pinterest董事會(huì)。

形狀為設(shè)計(jì)增添了能量，這種動(dòng)作吸引了人們。它們有助于將觀眾與您的故事聯(lián)系起來，并在視覺和書面內(nèi)容之間建立更緊密的聯(lián)系。

當(dāng)需要讓內(nèi)容圍繞形狀流動(dòng)時(shí)，請(qǐng)使用shape-outside屬性。您必須向左或向右浮動(dòng)元素shape-outside才能生效。

注意：當(dāng)您圍繞形狀傳遞內(nèi)容時(shí)，請(qǐng)注意不要讓任何文本行變得太窄并且只能容納一個(gè)或兩個(gè)單詞。

開發(fā)動(dòng)態(tài)和原始布局時(shí)，通常只需很少的標(biāo)記即可。我的這五個(gè)設(shè)計(jì)系列的HTML僅由標(biāo)題和主要元素，圖形和圖像組成，并且通常不比這復(fù)雜：

1. V型

對(duì)我來說，現(xiàn)代CSS最令人難以置信的方面之一是，我可以從部分透明的圖像的Alpha通道創(chuàng)建形狀，而無需繪制多邊形路徑。我只需要?jiǎng)?chuàng)建一個(gè)圖像，然后瀏覽器將負(fù)責(zé)其余的工作。

我認(rèn)為這是CSS最激動(dòng)人心的附加功能之一，它使網(wǎng)絡(luò)的藝術(shù)指導(dǎo)發(fā)展起來更加簡單，尤其是當(dāng)您使用內(nèi)容管理系統(tǒng)并動(dòng)態(tài)生成內(nèi)容時(shí)。

如果沒有CSS Shapes，這種設(shè)計(jì)將變得沉悶而毫無生氣。右圖：創(chuàng)建V形可使此設(shè)計(jì)更具特色和吸引力。

要從圖像中繪制形狀，它們必須具有完全或部分透明的Alpha通道。在第一個(gè)設(shè)計(jì)中，我無需繪制多邊形即可使內(nèi)容在我的內(nèi)容兩側(cè)的三角形之間流動(dòng)。相反，我只需要指定圖像文件的URL作為shape-outside值：

Firefox現(xiàn)在已經(jīng)發(fā)布了支持CSS Shapes的版本，并在其Developer Tools中啟動(dòng)了Shape Path Editor，現(xiàn)在只有Edge不支持Shapes。既然微軟宣布將自己的EdgeHTML渲染引擎更改為Chromium的Blink（與Chrome和Opera相同的引擎），這種情況將很快改變。

現(xiàn)在，諸如CSS Shapes之類的工具為我們提供了無數(shù)機(jī)會(huì)來使用藝術(shù)指導(dǎo)來吸引讀者的注意力并使他們保持參與。我希望到目前為止，您和我一樣對(duì)他們感到興奮！

上一篇：建立CSS布局：Rachel Andrew直播返回觀點(diǎn)列表下一篇：這家做網(wǎng)站公司使用Angular管理圖像斷點(diǎn)

本文標(biāo)簽：

本文地址： http://www.bmwdream.cn/a/669.html

相關(guān)專題

品牌官網(wǎng)設(shè)計(jì)
杭州派迪科技為高端客戶提供品牌官網(wǎng)咨詢策劃，品牌官網(wǎng)設(shè)計(jì)，品牌官網(wǎng)建設(shè)開發(fā)服務(wù)，以國際化視野和標(biāo)準(zhǔn)為基礎(chǔ)，為各行業(yè)領(lǐng)軍品牌提供高端企業(yè)網(wǎng)站定制、策劃、設(shè)計(jì)、互動(dòng)與制作
查看詳情
大策略營銷門戶網(wǎng)站
杭州派迪科技有自己的營銷型網(wǎng)站CMS系統(tǒng)，適合白帽SEO網(wǎng)站。特別對(duì)大策略的營銷型門戶網(wǎng)站制作有一定的經(jīng)驗(yàn)，曾經(jīng)為上海天擎外貿(mào)行業(yè)網(wǎng)站、浙江兆龍營銷型門戶、先臨三維門戶營銷網(wǎng)站提供全程的技術(shù)支持及SEO優(yōu)化指導(dǎo)
查看詳情
集團(tuán)/上市公司網(wǎng)站
杭州派迪科技為杭州本地集團(tuán)公司提供網(wǎng)頁設(shè)計(jì)、制作、開發(fā)服務(wù)，為集團(tuán)公司網(wǎng)站建設(shè)提供了響應(yīng)式、營銷型、品牌型、門戶型網(wǎng)站建設(shè)需求，歡迎廣大集團(tuán)公司客戶咨詢
查看詳情
外貿(mào)網(wǎng)站建設(shè)
杭州派迪科技為高端客戶提供外貿(mào)網(wǎng)站咨詢策劃，外貿(mào)官網(wǎng)設(shè)計(jì)，外貿(mào)官網(wǎng)建設(shè)開發(fā)服務(wù)，以谷歌搜索引起算法為基礎(chǔ)，為各行業(yè)外貿(mào)公司提供高端企業(yè)外貿(mào)網(wǎng)站定制、策劃、設(shè)計(jì)、互動(dòng)與制作
查看詳情
企業(yè)網(wǎng)站建設(shè)
高端專業(yè)、令人印象深刻的用戶界面、易于訪問——企業(yè)網(wǎng)站必須反映一切，因?yàn)榕傻峡萍荚谶@里提供幫助，憑借精湛的技術(shù)、豐富的經(jīng)驗(yàn)、與客戶的持續(xù)溝通以及對(duì)每一個(gè)細(xì)節(jié)的關(guān)注，我們確保在快速的周期時(shí)間內(nèi)提供優(yōu)質(zhì)的服務(wù)。
查看詳情
半定制網(wǎng)站
杭州派迪科技模板網(wǎng)站建設(shè)專題_各行業(yè)方案專題欄目提供各行業(yè)產(chǎn)品適合的網(wǎng)站建設(shè)方案,幫助企業(yè)了解派迪科技建站效果等信息,您可以通過本站了解各行業(yè)網(wǎng)站建設(shè)方案,如需要獲取本行業(yè)定制網(wǎng)站建設(shè)方案,可以聯(lián)系在線客服或撥打電話咨詢
查看詳情