色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

我如何在Fontawesome中復制抖音標志(帶顏色)

CSS
老白2年前8瀏覽0評論

抖音圖標是去年添加到FontAwesome的。太棒了。法-tiktok)，但當然，這是一個單位的顏色。我想在CSS樣式，以符合抖音品牌指南。那是淺藍色和粉紅色。

我試著用濾鏡來創建一個解決方案:但是它切掉了原來的(黑色)字體。這是我目前為止得到的信息:

.fab .fa-tiktok {
  color: #111111;
  filter: drop-shadow(-5px -5px 0 #24f6f0) contrast(150%) brightness(110%);
  z-index: -1;
}

.fab .fa-tiktok::after {
  filter: drop-shadow(5px 5px 0 #F70250) contrast(150%) brightness(110%);
  z-index: -1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<i class="fab fa-tiktok fa-2x"></i>

你的css甚至沒有得到適當的應用，因為。法-tiktok不是。正如你的代碼所描述的那樣。

無論如何，添加兩個陰影到。fa-具有2px邊緣的tiktok(藍色為負，紅色為正)。

.fa-tiktok {
  color: #111111;
  
  filter: drop-shadow(2px 0px 0px #FD3E3E) drop-shadow(-2px -2px 0px #4DE8F4);
}

<link rel="stylesheet"  integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<i class="fab fa-tiktok fa-2x"></i>

你可以使用混合模式來增加顏色。問題是兩種官方顏色(青色和洋紅色)加起來不是黑色，它們需要一種黃色成分，而這種成分是不存在的。所以我在洋紅色中添加了一些黃色，使其接近紅色，但整體效果與官方標志幾乎相同。

.tiktoklogo {
  font-size: 100px;
  position: relative;
  color: #00fff8;
}
.tiktoklogo i:last-child {
  mix-blend-mode: multiply;
  color: #ff0010;
  position: absolute;
  left: 5px;
  top: 7px;
}

<link rel="stylesheet"  />

<div class="tiktoklogo">
  <i class="fab fa-tiktok"></i>
  <i class="fab fa-tiktok"></i>
</div>

檢查這個，我復制了2份，用不同的顏色放置

.fab .fa-tiktok {
  color: #111111;
  filter: drop-shadow(-5px -5px 0 #24f6f0) contrast(150%) brightness(110%);
  z-index: -1;
  
}

.fab .fa-tiktok::after {
  filter: drop-shadow(5px 5px 0 #F70250) contrast(150%) brightness(110%);
  z-index: -1;
}
i{
    position: absolute;
font-size:200px
}

i:nth-of-type(1){
    color: #E62259;
    right: 10px;

}


i:nth-of-type(2){
    color: #02F4EB;
    top: -2px;
    opacity: 0.7;
}
.container{
    position: relative;
    width: 40px;
    height: 200px;
    background-color: white;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet"  integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

</head>
<div class ="container">
<i class="fab fa-tiktok fa-2x"></i>
<i class="fab fa-tiktok fa-2x"></i>
<i class="fab fa-tiktok fa-2x"></i>
</div>



<script src="test.js"></script>
</body>
</html>