最近，我給了我的個(gè)人網(wǎng)站刷新 - 一個(gè)有趣的獨(dú)奏項(xiàng)目！這是我的創(chuàng)意渠道，是自我表達(dá)和實(shí)驗(yàn)的空間。這不是一個(gè)完整的大修，更像是一件新鮮的油漆。讓我們探索我使用的一些有趣的技術(shù)。

用Hoefler字體進(jìn)行排版

Inkwell字體家庭很棒！我喜歡混合體重，襯線，sans-serifs和資本化風(fēng)格。當(dāng)我在以前的設(shè)計(jì)中使用Inkwell時(shí)，我覺(jué)得這對(duì)于博客文章Body Text來(lái)說(shuō)太有趣了。我的寫(xiě)作風(fēng)格是隨意的，但并非總是如此，而且Inkwell的Jovial性質(zhì)并不適合更嚴(yán)肅的話題。以前，我將其與理想的sans配對(duì)，但是組合卻失敗了。

這次，我選擇了惠特尼進(jìn)行身體副本。它保持輕松的感覺(jué)，但可以與更簡(jiǎn)單的內(nèi)容配合使用。

用Sass造型

斑馬串的表很簡(jiǎn)單：

 tr：nth-??child（偶）{
  背景色：var（ -  color-1）;
}
tr：nth-??child（奇數(shù)）{
  背景色：var（ -  color-2）;
}

但是，騎自行車四種顏色呢？ :nth-child選擇器，帶有偏移，整齊地處理此操作。這是列表項(xiàng)目的一個(gè)示例：

 li {
  ＆：nth-??child（4n）a {
    顏色：$藍(lán)色；
  }
  ＆：nth-??child（4n 1）a {
    顏色：$黃色；
  }
  ＆：nth-??child（4n 2）a {
    顏色：$紅色；
  }
  ＆：nth-??child（4n 3）a {
    顏色：$紫色；
  }
}

這種方法創(chuàng)建了顏色的Blogroll。由于Sass在項(xiàng)目中的存在，我使用了Sass； Codekit毫不費(fèi)力地處理了匯編。是的，Blogrolls再次很酷！

有效的YouTube嵌入

我采用了巧妙的點(diǎn)擊加載YouTube技術(shù)。我使用靜態(tài)圖像占位符，而不是嵌入完整的YouTube IFRAME，它加載了許多資源。這在維持類似的用戶體驗(yàn)的同時(shí)大大提高了性能。

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Y8Wp3dafaMQ" srcdoc="*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}<a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'>?</a>" title="黑暗騎士升起：出了什么問(wèn)題？ -  WISECRACK版" width="560"></iframe>

自定義帖子類型和數(shù)據(jù)結(jié)構(gòu)

我是結(jié)構(gòu)化數(shù)據(jù)的堅(jiān)定擁護(hù)者。在WordPress中，這通常涉及自定義帖子類型與諸如高級(jí)自定義字段之類的插件結(jié)合使用。這允許靈活的數(shù)據(jù)處理并簡(jiǎn)化未來(lái)的站點(diǎn)修改。

動(dòng)態(tài)生物發(fā)生器

我的簡(jiǎn)歷部分并不復(fù)雜：我創(chuàng)建了18<div>元素（3個(gè)長(zhǎng)度<em>2種樣式</em>3種代碼類型），并使用JavaScript在它們之間切換。基于用戶選擇計(jì)算類字符串，在隱藏其他人時(shí)揭示相應(yīng)的生物。<pre class="brush:php;toolbar:false"> $（“。生物選擇輸入”）。on（“ change”，function（）{ var Length Length Class =“ .bio-” $（“輸入[name = length]：checked''）。attr（“ id”）; var styleclass =“ .bio-” $（“輸入[name = style]：checked”）。attr（“ id”）; var codeclass =“ .bio-” $（“輸入[name = code]：checked'）。attr（“ id”）; var selector =長(zhǎng)度流式式CodeClass; $（“。bio”）。hide（）; $（selector）.show（）; }）;</pre> <p>我之所以使用jQuery，是因?yàn)樗呀?jīng)集成到網(wǎng)站中（以及Fitvids）。未來(lái)的重寫(xiě)可能涉及刪除jQuery并簡(jiǎn)化生物選項(xiàng)。</p> <h3 id="ztext-js和動(dòng)畫(huà)標(biāo)題"> ztext.js和動(dòng)畫(huà)標(biāo)題</h3> <p>標(biāo)題使用ZTEXT.JS，增加了Webby Flair的觸感。這種動(dòng)畫(huà)水平可能不適合高流量站點(diǎn)，但是它對(duì)訪問(wèn)者頻率較低的站點(diǎn)效果很好。</p> <h3 id="SVG背景和頁(yè)腳效果"> SVG背景和頁(yè)腳效果</h3> <p>我利用更新的SVG背景站點(diǎn)來(lái)創(chuàng)建背景。我選擇了<code>background-attachment: fixed ，并在桌面上包括滑出的頁(yè)腳效果。頁(yè)腳效應(yīng)可能需要完善；在動(dòng)態(tài)背景下，它更具影響力。

與過(guò)濾器一致的鏈接樣式

不同的部分使用不同的高光顏色，我將部分鏈接鏈接到它們各自的顏色。盡管這可能是值得商bat的（通常優(yōu)選一致的鏈接顏色），但我發(fā)現(xiàn)它在視覺(jué)上很吸引人。 filter: brightness(120%);技巧可確保持續(xù)的懸停和聚焦樣式中的所有顏色，從而簡(jiǎn)化樣式。

答：焦點(diǎn)，丁頓：焦點(diǎn)，
答：懸停，.button：Hover {
  過(guò)濾器：亮度（120％）；
}

這是一個(gè)相對(duì)快速的更新，主要受到Codepen挑戰(zhàn)的啟發(fā)。但是，與往常一樣，一個(gè)小變化導(dǎo)致了另一個(gè)變化，我最終進(jìn)行了比最初計(jì)劃的更大的修改！