透明图片阴影效果+使用 ::before 添加按钮的图标

CSS 大约有两百个属性。很多属性都是相互关联的，理清楚每一个属性细节是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考。

1. 打字效果

测试.gif

网页设计变得越来越有创意。在 CSS 动画的协调下，你的网页会像活的一样。在这个例子中，我们将使用 animation 和 @keyframes 属性去实现打字效果。

具体来说，在这个演示中，我们通过 steps() 属性来实现分割文本的效果。首先，你必须指定 step() 中传入的数量，在这个例子中就是文本的长度。

接着，第二步，我们使用 @keyframes 去声明什么时候开始执行动画。

如果你在文本 Typing effect for text 后面添加内容，而不改变 step() 中的数字，将不会产生这种效果。

这种效果并不是特别新鲜。然而，很多开发者却使用 JavaScript 库去实现，而不是使用 CSS。

    
Typing effect for text

  .typing {
   height: 80vh;
   display: flex;
   align-items: center;
   justify-content: center;
  }

  .typing-effect {
   width: 22ch;
   white-space: nowrap;
   overflow: hidden;
   border-right: 3px solid;
   font-family: monospace;
   font-size: 2em;
   animation: typing 2s steps(22), effect .5s step-end infinite alternate;
  }

  @keyframes typing {
   from {
    width: 0;
   }
  }

  @keyframes effect {
   50% {
    border-color: transparent;
   }
  }

2. 透明图片阴影效果

image.png

你是否使用过 box-shadow 为透明的图片添加阴影，却让其看起来像添加了一个边框一样？然而解决方案是使用 drop-shadow。

drop-shadow 的工作方式是，其遵循给给定图片的 Alpha 通道。因此阴影是基于图片的内部形状，而不是显示在图片外面。

      

        
box-shadow
        
      
      

        
drop-shadow
        
      
    

.transparent-shadow {
        height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .margin-right {
        margin-right: 2em;
      }
      .margin-bottom {
        margin-bottom: 1em;
      }
      .align-center {
        text-align: center;
      }
      .box-shadow {
        box-shadow: 2px 4px 8px #3723a1;
      }
      .drop-shadow {
        filter: drop-shadow(2px 4px 8px #3723a1);
      }

10. 使用 ::before 添加按钮的图标

image.png

每当我需要链接到外部其他资源的时候，我都会使用自定义的按钮来实现。准确来说，是一个添加图标的按钮。简单的谷歌搜索，你会发现很多 button generators ，但是我对可以随时使用的通用解决方案更感兴趣。

所以，为了实现这个目标，我为特定按钮创建了一个 :before 伪元素。需要声明的是，代码片段中的 content:"/0000a0"; 是   的 Unicode 转义。

你可以通过宽高属性来调整图标的尺寸，以更好适应按钮样式。

 

      
Documentation
    

 .card .card-body .btn {
        display: block;
        width: 200px;
        height: 48px;
        line-height: 48px;
        background-color: blue;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        font-weight: 700;
      }
      .card .card-body .btn-docu:before {
        content: '/0000a0';
        display: inline-flex;
        height: 24px;
        width: 24px;
        line-height: 24px;
        margin: 0px 10px 0px 0px;
        position: relative;
        top: 0px;
        left: 0px;
        background: url(https://stackdiary.com/docu.svg) no-repeat left center transparent;
        background-size: 100% 100%;
      }