透明圖片陰影效果+使用 ::before 添加按鈕的圖標

CSS 大約有兩百個屬性。很多屬性都是相互關(guān)聯(lián)的睬涧,理清楚每一個屬性細節(jié)是不可能的舱权。所以矗晃,本文分享一些有用的 CSS 小技巧,方便開發(fā)者和設(shè)計師參考宴倍。

1. 打字效果

測試.gif

網(wǎng)頁設(shè)計變得越來越有創(chuàng)意张症。在 CSS 動畫的協(xié)調(diào)下,你的網(wǎng)頁會像活的一樣鸵贬。在這個例子中俗他,我們將使用 animation 和 @keyframes 屬性去實現(xiàn)打字效果。

具體來說阔逼,在這個演示中兆衅,我們通過 steps() 屬性來實現(xiàn)分割文本的效果。首先,你必須指定 step() 中傳入的數(shù)量羡亩,在這個例子中就是文本的長度摩疑。

接著,第二步畏铆,我們使用 @keyframes 去聲明什么時候開始執(zhí)行動畫雷袋。

如果你在文本 Typing effect for text 后面添加內(nèi)容,而不改變 step() 中的數(shù)字辞居,將不會產(chǎn)生這種效果楷怒。

這種效果并不是特別新鮮。然而速侈,很多開發(fā)者卻使用 JavaScript 庫去實現(xiàn)率寡,而不是使用 CSS。

<div class="typing">    <div class="typing-effect">Typing effect for text</div></div>
  .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 通道捅僵。因此陰影是基于圖片的內(nèi)部形狀,而不是顯示在圖片外面眨层。

<div class="transparent-shadow">
      <div class="margin-right">
        <div class="margin-bottom align-center">box-shadow</div>
        <img class="box-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="box-shadow example (transparent)" />
      </div>
      <div>
        <div class="margin-bottom align-center">drop-shadow</div>
        <img class="drop-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="drop-shadow example (transparent)" />
      </div>
    </div>
.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

每當我需要鏈接到外部其他資源的時候庙楚,我都會使用自定義的按鈕來實現(xiàn)。準確來說趴樱,是一個添加圖標的按鈕馒闷。簡單的谷歌搜索,你會發(fā)現(xiàn)很多 button generators 叁征,但是我對可以隨時使用的通用解決方案更感興趣纳账。

所以,為了實現(xiàn)這個目標捺疼,我為特定按鈕創(chuàng)建了一個 :before 偽元素疏虫。需要聲明的是,代碼片段中的 content:"\0000a0"; 是 &nbsp; 的 Unicode 轉(zhuǎn)義啤呼。

你可以通過寬高屬性來調(diào)整圖標的尺寸卧秘,以更好適應(yīng)按鈕樣式。

 <div class="card">
      <div class="card-body"><a href="" target="_blank" class="btn btn-docu" rel="noopener">Documentation</a></div>
    </div>
 .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%;
      }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末官扣,一起剝皮案震驚了整個濱河市翅敌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌醇锚,老刑警劉巖哼御,帶你破解...
    沈念sama閱讀 211,423評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件坯临,死亡現(xiàn)場離奇詭異,居然都是意外死亡恋昼,警方通過查閱死者的電腦和手機看靠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,147評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來液肌,“玉大人挟炬,你說我怎么就攤上這事∴露撸” “怎么了谤祖?”我有些...
    開封第一講書人閱讀 157,019評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長老速。 經(jīng)常有香客問我粥喜,道長,這世上最難降的妖魔是什么橘券? 我笑而不...
    開封第一講書人閱讀 56,443評論 1 283
  • 正文 為了忘掉前任额湘,我火速辦了婚禮,結(jié)果婚禮上旁舰,老公的妹妹穿的比我還像新娘锋华。我一直安慰自己,他們只是感情好箭窜,可當我...
    茶點故事閱讀 65,535評論 6 385
  • 文/花漫 我一把揭開白布毯焕。 她就那樣靜靜地躺著,像睡著了一般磺樱。 火紅的嫁衣襯著肌膚如雪纳猫。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,798評論 1 290
  • 那天竹捉,我揣著相機與錄音续担,去河邊找鬼。 笑死活孩,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的乖仇。 我是一名探鬼主播憾儒,決...
    沈念sama閱讀 38,941評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼乃沙!你這毒婦竟也來了起趾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,704評論 0 266
  • 序言:老撾萬榮一對情侶失蹤警儒,失蹤者是張志新(化名)和其女友劉穎训裆,沒想到半個月后眶根,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,152評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡边琉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,494評論 2 327
  • 正文 我和宋清朗相戀三年属百,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片变姨。...
    茶點故事閱讀 38,629評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡族扰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出定欧,到底是詐尸還是另有隱情渔呵,我是刑警寧澤,帶...
    沈念sama閱讀 34,295評論 4 329
  • 正文 年R本政府宣布砍鸠,位于F島的核電站扩氢,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏爷辱。R本人自食惡果不足惜录豺,卻給世界環(huán)境...
    茶點故事閱讀 39,901評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望托嚣。 院中可真熱鬧巩检,春花似錦、人聲如沸示启。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽夫嗓。三九已至迟螺,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間舍咖,已是汗流浹背矩父。 一陣腳步聲響...
    開封第一講書人閱讀 31,978評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留排霉,地道東北人窍株。 一個月前我還...
    沈念sama閱讀 46,333評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像攻柠,于是被迫代替她去往敵國和親球订。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,499評論 2 348

推薦閱讀更多精彩內(nèi)容