26-自定义下划线
背景知识：css 渐变、background-size、text-shadow、'条纹背景'
介绍：默认的下划线虽然很实用，但是太普通，可能无法满满广大设计师们的审美需求，这里介绍一种自定义下划线的最佳方案。
防止下划线穿过文字底部、虚线下划线
<p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p> <p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p> /** * Custom underlines */ body { font: 250%/1.6 Baskerville, Palatino, serif; } a { background: linear-gradient(gray, gray) no-repeat; background-size: 100% 1px; background-position: 0 1.02em; text-shadow: .05em 0 white, -.05em 0 white; } p:nth-child(2) a { background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x; background-size: .2em 2px; background-position: 0 1em; }
波浪下划线
<p>“The only way to <a>get rrid of a temptatoin</a> is to <a>yeild</a> to it.”</p> /** * Wavy underlines */ body { font: 250%/1.6 Baskerville, Palatino, serif; } a { background: linear-gradient(-45deg, transparent 40%, red 0, red 60%, transparent 0) 0 1em, linear-gradient(45deg, transparent 40%, red 0, red 60%, transparent 0) .1em 1em; background-repeat: repeat-x; background-size: .2em .1em; text-shadow: .05em 0 white, -.05em 0 white; }
27-现实中的文字效果
背景知识：text-shadow
介绍：介绍几种艺术文字的实现方案
凸版印刷效果
/** * Letterpress */ body { font: 250%/1.6 Baskerville, Palatino, serif; } p { padding: .8em 1em; background: hsl(210, 13%, 60%); color: hsl(210, 13%, 30%); text-shadow: 0 1px 1px hsla(0,0%,100%,.8); } p + p { background: hsl(210, 13%, 30%); color: hsl(210, 13%, 60%); text-shadow: 0 -1px 1px black; }
空心字效果
/** * Stroked text */ h1 { margin: 0; color: white; } h1:first-child { text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; } h1 text { fill: currentColor } h1 use { stroke: black; stroke-width: 6; stroke-linejoin: round; } body { background: deeppink; font: bold 200%/1 Rockwell, serif; }
文字外发光效果
<a href="http://csssecrets.io">Glow</a> /** * Glowing text */ body { background: #203; font: bold 500%/1 Rockwell, serif; } a { color: #ffc; text-decoration: none; transition: 1s; } a:hover { text-shadow: 0 0 .1em, 0 0 .3em; }
文字凸起效果
/** * Extruded text */ body { background: #58a; color: white; text-shadow: 0 1px hsl(0,0%,85%), 0 2px hsl(0,0%,80%), 0 3px hsl(0,0%,75%), 0 4px hsl(0,0%,70%), 0 5px hsl(0,0%,65%), 0 5px 10px black; font: bold 500%/1 Rockwell, serif; }
28-环形文字
背景知识：基本的 SVG
介绍：通过使用 SVG 路径来实现环形排列的文字效果
/** * Text on a circle */ body { font: bold 120% Helvetica, sans-serif; } .circular { width: 30em; height: 30em; margin: 4em auto 0; } .circular svg { display: block; overflow: visible; transition: 10s linear transform; } .circular svg:hover { transform: rotate(-2turn); } .circular text { fill: currentColor } .circular path { fill: none; }
29-选中合适的鼠标光标
主要就是介绍了 css3 中提供的一些新的鼠标光标效果，其中重点推荐了 cursor: not-allowed 和 隐藏光标的方法 cursor：none;
30-扩大可点击区域
介绍：根据Fitts 法则，我们推论出，目标越大，越容易到达，所以在目标大小固定的情况下，将可点击范围扩大，也可以提高用户体验，这里介绍两种方法。
透明边框 border 来实现
<button>+</button> /** * Extending the hit area — with generated content */ button { position: relative; padding: .3em .5em; background: #58a; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); box-shadow: 0 .1em .2em -.05em rgba(0,0,0,.5); color: white; font: bold 150%/1 sans-serif; cursor: pointer; } button:before { content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; }
伪元素来实现
使用透明伪元素覆盖，并将半径向外延伸10px 来实现
<button>+</button> /** * Extending the hit area — with generated content */ button { position: relative; padding: .3em .5em; background: #58a; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); box-shadow: 0 .1em .2em -.05em rgba(0,0,0,.5); color: white; font: bold 150%/1 sans-serif; cursor: pointer; } button:before { content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; }
