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

用Hoefler字體進行排版

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

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

用Sass造型

斑馬串的表很簡單：

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

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

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

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

有效的YouTube嵌入

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

<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="黑闇騎士升起：出了什麼問題？ -  WISECRACK版" width="560"></iframe>

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

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

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

我的簡歷部分並不復(fù)雜：我創(chuàng)建了18<div>元素（3個長度<em>2種樣式</em>3種代碼類型），並使用JavaScript在它們之間切換?；队脩暨x擇計算類字符串，在隱藏其他人時揭示相應(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 =長度流式式CodeClass; $（“。bio”）。 hide（）; $（selector）.show（）; }）;</pre> <p>我之所以使用jQuery，是因為它已經(jīng)集成到網(wǎng)站中（以及Fitvids）。未來的重寫可能涉及刪除jQuery並簡化生物選項。</p> <h3 id="ztext-js和動畫標(biāo)題"> ztext.js和動畫標(biāo)題</h3> <p>標(biāo)題使用ZTEXT.JS，增加了Webby Flair的觸感。這種動畫水平可能不適合高流量站點，但是它對訪問者頻率較低的站點效果很好。</p> <h3 id="SVG背景和頁腳效果"> SVG背景和頁腳效果</h3> <p>我利用更新的SVG背景站點來創(chuàng)建背景。我選擇了<code>background-attachment: fixed ，並在桌面上包括滑出的頁腳效果。頁腳效應(yīng)可能需要完善；在動態(tài)背景下，它更具影響力。

與過濾器一致的鏈接樣式

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

答：焦點，丁頓：焦點，
答：懸停，.button：Hover {
  過濾器：亮度（120％）；
}

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