在 決定下一步行動(dòng)」，真正讓待辦清單為你所用 看到幾張漂亮的手寫(xiě)字體插圖她奥。討論區(qū)也都在問(wèn)這幾張插圖是如何做出來(lái)的黎做。
格子紙-圖片來(lái)自少數(shù)派
用 Markdown 生成漂亮的手寫(xiě)圖 (Mac Only) 一文用純 CSS 實(shí)現(xiàn)了這個(gè)效果。一直使用 Windows 平臺(tái)靖避，就嘗試在用純 CSS 寫(xiě)一個(gè)類似效果。放大原圖可看到一些噪點(diǎn)比默，讓紙張的感覺(jué)更加逼真筋蓖。噪點(diǎn)使用 NoisePNG 實(shí)現(xiàn)的。NoisePGN 是把背景當(dāng)圖片來(lái)處理退敦，這里只是用純 CSS 實(shí)現(xiàn)粘咖，所以只能是說(shuō)近似原圖效果。
代碼如下：
<style>
body {
background-color: #F5F9F4;
color: black;
font-family: 翩翩體-簡(jiǎn);
font-size: large;
background-size: 50px 50px, 50px 50px; /* grid size */
background-image:
/* horizontal line */
/* the first size is defines horizontal line,while the second defines transeparent */
-moz-linear-gradient(90deg, gray 2px, transparent 2px),
/* vertical line */
-moz-linear-gradient(0, gray 2px, transparent 2px);
}
</style>
參考：css3pie
