CSS Tip 系列（四）

1. 文字描边效果

<p class="outline">Why didn't I know about this sooner?</p>

<style>
.outline {
  color: white;
  -webkit-text-stroke: 2px black;
}
</style>

2. 在 Grid 布局中实现垂直居中

<div class="grid">
  <div class="grid-item">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, in?</p>
  </div>
</div>

<style>
.grid {
  display: grid;
  place-items: center;
}
</style>

3. 通过 outline 排查问题

在网页布局中，有时候会莫名其妙出现横向滚动条，不知道那个元素导致。这个时候，可以给网页所有元素加上 outline 方便快速定完问题。

* { outline: 2px solid limegreen; }

4. 实现浮动标签效果（float label）

<div class="input-field">
  <input type="text" placeholder="Enter your first name" id="fname" />
  <label for="fname">First name</label>
</div>

<div class="input-field">
  <input type="text" placeholder="Enter your last name" id="lname" />
  <label for="lname">Last name</label>
</div>

<style>
label {
  /* 默认标签文本是透明的 */
  opacity: 0;
  /* 有所偏移的 */
  transform: translateY(5px);
  /* 设置了过渡动画效果的（针对 opacity 和 transform 属性） */
  transition: opacity linear 200ms, transform ease-in 150ms;
}

/* 在输入框中输入内容后，占位文本不可见，词条声明生效 */
input:not(:placeholder-shown) ~ label {
  /* 标签文本设置为可见 */
  opacity: 1;
  /* 与 transition 结合起来，标签文本在可见的过程中，出现浮动效果 */
  transform: translateY(0px);
}
<style>

5. 混合模式

<h1>混合模式：颜色减淡</h1>

<style>
h1 {
   mix-blend-mode: color-dodge; /* 这里 */ 
   font-family: yahei;
   font-size: 5rem;
   text-align: center;
   margin: 0; 
   padding: 20vh 200px;
   color: #D1956C;
 }

 html,
 body {
   margin: 0;
   background-color: white;
 }

 body {

   background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
   overflow: hidden;
 }
</style>