我个人网站上的小东西

最近，我给了我的个人网站刷新 - 一个有趣的独奏项目！这是我的创意渠道，是自我表达和实验的空间。这不是一个完整的大修，更像是一件新鲜的油漆。让我们探索我使用的一些有趣的技术。

用Hoefler字体进行排版

Inkwell字体家庭很棒！我喜欢混合体重，衬线，sans-serifs和资本化风格。当我在以前的设计中使用Inkwell时，我觉得这对于博客文章Body Text来说太有趣了。我的写作风格是随意的，但并非总是如此，而且Inkwell的Jovial性质并不适合更严肃的话题。以前，我将其与理想的sans配对，但是组合却失败了。

这次，我选择了惠特尼进行身体副本。它保持轻松的感觉，但可以与更简单的内容配合使用。

用Sass造型

斑马串的表很简单：

 tr：nth-​​child（偶）{
  背景色：var（ -  color-1）;
}
tr：nth-​​child（奇数）{
  背景色：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 {
    颜色：$紫色；
  }
}

这种方法创建了颜色的Blogroll。由于Sass在项目中的存在，我使用了Sass； Codekit毫不费力地处理了汇编。是的，Blogrolls再次很酷！

有效的YouTube嵌入

我采用了巧妙的点击加载YouTube技术。我使用静态图像占位符，而不是嵌入完整的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>

自定义帖子类型和数据结构

我是结构化数据的坚定拥护者。在WordPress中，这通常涉及自定义帖子类型与诸如高级自定义字段之类的插件结合使用。这允许灵活的数据处理并简化未来的站点修改。

动态生物发生器

我的简历部分并不复杂：我创建了18<div>元素（3个长度<em>2种样式</em>3种代码类型），并使用JavaScript在它们之间切换。基于用户选择计算类字符串，在隐藏其他人时揭示相应的生物。<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登录后复制</div></div> <p>我之所以使用jQuery，是因为它已经集成到网站中（以及Fitvids）。未来的重写可能涉及删除jQuery并简化生物选项。</p> <h3 id="ztext-js和动画标题"> ztext.js和动画标题</h3> <p>标题使用ZTEXT.JS，增加了Webby Flair的触感。这种动画水平可能不适合高流量站点，但是它对访问者频率较低的站点效果很好。</p> <h3 id="SVG背景和页脚效果"> SVG背景和页脚效果</h3> <p>我利用更新的SVG背景站点来创建背景。我选择了<code>background-attachment: fixed ，并在桌面上包括滑出的页脚效果。页脚效应可能需要完善；在动态背景下，它更具影响力。

与过滤器一致的链接样式

不同的部分使用不同的高光颜色，我将部分链接链接到它们各自的颜色。尽管这可能是值得商bat的（通常优选一致的链接颜色），但我发现它在视觉上很吸引人。 filter: brightness(120%);技巧可确保持续的悬停和聚焦样式中的所有颜色，从而简化样式。

答：焦点，丁顿：焦点，
答：悬停，.button：Hover {
  过滤器：亮度（120％）；
}

这是一个相对快速的更新，主要受到Codepen挑战的启发。但是，与往常一样，一个小变化导致了另一个变化，我最终进行了比最初计划的更大的修改！

以上是我个人网站上的小东西的详细内容。更多信息请关注PHP中文网其他相关文章！