css使用技巧三

该系列所有的技巧都来至于 《css揭秘》 提取码：9x8n

字体排版

1. 插入换行

在指定位置通过换行符进行换行 display: inline + content: '\A' + white-space: pre

css部分

.box48 dt,
.box48 dd {
  color: rgb(230, 59, 82);
  display: inline;/*这儿不要使用inline-block */
}

.box48 dd {
  margin: 0;
  font-weight: bold;
}

/* 在非第一个dt的前面都加上换行符 */
.box48 dt:not(:first-child)::before {
  content: "\A";
  white-space: pre;
  /* 保留空白符，否则content: "\A"不会生效 */
}

/* 在每一个非首个dd的前面加上， */
.box48 dd+dd::before {
  content: ', ';
}

html 部分

<div class="box48">
  <dl>
    <dt>Name:</dt>
    <dd>Lea Verou</dd>
    <dd>leaverou@mit.edu</dd>
    <dt>Email:</dt>
    <dd>lea@verou.me</dd>
    <dt>Location:</dt>
    <dd>Earth</dd>
  </dl>
</div>

效果

2. 文本行的斑马条纹

linear-gradient

每一个条纹的高度刚好是文字的行高

.wrapper {
  width: 150px;
  padding: .5em;
  line-height: 1.5;
  background-origin: content-box;
  /* 设置背景以content开始计算 */
  background-clip: content-box;
  /* 将背景进行裁剪 */
  color: rgb(131, 24, 39);
  background-image: linear-gradient(rgba(230, 59, 82, 0.5) 50%, transparent 0);
  background-size: auto 3em;
}

效果

3. 华丽的&符号

通过 @font-face 引入本地特殊的字体，用 unicode-range 指定哪些字符串需要使用这些字体

 @font-face {
  font-family: Ampersand;
  src: local('Baskerville-Italic'), /* 因为只有斜体才会有效果，所以后面都加上-Italic */
    local('GoudyOldStyle-Italic'), local('Garamond-Italic'), local('Palatino-Italic'), local('BookAntiqua-Italic');
  unicode-range: U+26; /* &对应的unicode吗 */
}

h1 {
  color: rgb(230, 59, 82);
  font-family: Ampersand, Helvetica, sans-serif; /* 将Ampersand放到最前面 */
}

4. 自定义下划线

linear-gradient + text-shadow

.wrapper {
  color: rgb(230, 59, 82);
  width: 400px;
  line-height: 1.5em;
  font-size: 30px;
  display: inline-block;
  background: linear-gradient(to top, rgb(122, 12, 27) 1px, transparent 0);
  /* 形成下划线 */
  background-size: 100% 1.5em;
  background-position: 0 1.3em;
  text-shadow: .05em 0 white, -.05em 0 white;
  /* 超出部分将下划线断开的效果 */
}

效果

5. 凹凸效果

浅色背景深字 + 深色背景浅字

/* 浅色背景深字 */
.p1 {
  padding: 20px 20px;
  background: pink;
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8);
  color: rgb(122, 12, 27);
}
/* 深色背景浅字 */
.p2 {
  padding: 20px 20px;
  background: rgb(122, 12, 27);
  color: pink;
  text-shadow: 0 -1px 1px black;
}

效果

6. 发光字体

通过 text-shadow 多层叠加

.wrapper {
  width: 200px;
  font-size: 40px;
  text-align: center;
  color: rgb(230, 59, 82);
  text-shadow: 0 0 .1em #ffc, 0 0 .3em #ffc;
  background: rgb(61, 4, 12);
}

效果

用户体验

1. 选用合适的鼠标光标

1-1 禁用光标

cursor: not-allowed;

1-2 隐藏鼠标

cursor: url('transparent.gif'); /*半透明图片，回退机制*/
cursor: none

2. 扩大可点击区域

当点击的目标太小的时候，可以通过 padding 调整目标的大小

3. 背景虚化

伪元素（模糊背景补偿） + 背景 + filter:blur()

css部分

.box {
  overflow: hidden;
  /* 设置了这个，那么模糊的边缘将从被裁切的边缘开始 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
}

.box::after,
.img {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url('./images/test.jpg') 0/cover no-repeat;
}

/* 放到模糊背景的后面，作为模糊的补偿 */
.box::after {
  z-index: -1;
  content: '';
}

.img {
  filter: blur(5px); /* 模糊背景 */
}

.inner {
  position: relative;
  padding: 10px;
  background-color: #fff;
}

html部分

<div class="box">
  <div class="img"></div>
  <div class="inner">我是内容</div>
</div>

效果

4. 交互式图片

resize: horizontal（设置可拖动） + cursor: ew-resize（设置鼠标放上去的样式）

css部分

.wrapper {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 200px;
}

.mask {
  max-width: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  overflow: hidden;
  right: 50%;
  bottom: 0;
  resize: horizontal;
  background-color: rgba(0, 0, 0, .3);
}

/* 自定义可拖动的样式 */
.mask::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  right: 0;
  bottom: 0;
  cursor: ew-resize;
  background: linear-gradient(-45deg, white 50%, transparent 0);
}

img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

html部分

<div class="wrapper">
  <div class="mask"></div>
  <img src="./images/test.jpg" alt="">
</div>

效果

结构与布局

1. 自适应内部元素

max-width: min-content;

父元素包裹子元素，匹配内部最大的图片或者定宽元素

css部分

figure {
  padding: 10px;
  border: solid 1px #eee;
  max-width: 200px;
  /* 回退机制 */
  max-width: min-content;
  margin: auto;
}

img {
  width: 200px;
}

html 部分

<figure>
  <img src="./images/test.jpg" />
  <figcaption>
    The great Sir Adam Catlace was named after
    Countess Ada Lovelace, the first programmer.
  </figcaption>
</figure>

效果

2. 根据兄弟元素的数量来设置样式

li:only-child {}

==>
/* 即时第一个又是最后一个 */
li:first-child:nth-last-child(1) {}

3. 紧贴底部的页脚

html部分

 <header>
  </header>

  <main>
  </main>

  <footer>
  </footer>

3-1 顶部和底部固定高度

header {
  height: 50px;
}

main {
  min-height: calc(100vh - 100px); /* 计算内容的最小高度 */
}

footer {
  height: 50px;
}

3-2 顶部和底部不固定

flex

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
main {
  flex: 1;
}