iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
1
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 27

[蛻變事實/D27] 設計師勇闖前端城-(處理icon的那些小事-P2)

有時看著螢幕腦中一直會想起一句話

「做法沒有好或不好,只有最適合」

我相信能說出這句話的人,不管是在處理什麼事
肯定是經過一番辛苦日子! 由衷之言啊!

/images/emoticon/emoticon67.gif/images/emoticon/emoticon67.gif/images/emoticon/emoticon67.gif/images/emoticon/emoticon67.gif
ps.我現在內心就一直在翻滾這句話呀~


昨天是分享用網路資源「Font Awesome」,處理在網頁處理上的icon小事
它是方便但總不可能收到的設計稿每回都是一樣地吧!?

今天就來整理一下及分享,這二天忙在icon上的小心得。


首先我們我們最常看到的應該是這種小icon:

這是網站上最基本會看到的
今天就用它來說明幾個做法啦~

懶人+無設計要求法


//HTML 結構
<div class="wrap">
    <ul class="box1">
      <li><a href="">購物說明</a></li>
      <li><a href="">購物說明</a></li>
      <li><a href="">購物說明</a></li>
  </div>

 // 利用after選擇器+ content屬性,懶人法用文字代替 XD
.box1 {
     li {
        color: red;
        &::after {
          content: ">"; //利用字型或符號代表來做內容
          margin: 0px 13px 0 0;
          }
        }
 }

結果:

加註:如果設計不要求就給它偷吃步 ></images/emoticon/emoticon01.gif


B&F偽類法(Before/After)

//HTML結構
<div class="wrap">
    <ul class="box2">
      <li><a href="">購物說明<span></span></a></li>
      <li><a href="">購物說明<span></span></a></li>
      <li><a href="">購物說明<span></span></a></li>
    </ul>
  </div>
//SCSS結構
// 增加spen標籤 做一個正方型,再做旋轉角度
    .box2 {
        li {
            position: relative;
            padding-right: 25px;
        }
        span {
            display: block;
            position: absolute;
            top: 11px;
            right: 15px;
            width: 7px;
            height: 7px;
            border: solid red;
            border-width: 0 0.4px 0.4px 0;
            transform: translateY(-50%) rotate(-45deg);
        }
    }

結果:

加註:如果是單純的 < > 符號,
用border+旋轉又快又好,還可以加粗變細或換色!
超方便的!/images/emoticon/emoticon42.gif

B&F偽類+各式影像處理

//HTML

<div class="wrap">
    <ul class="box3">
      <li><a href="">購物說明</a></li>
      <li><a href="">購物說明</a></li>
      <li><a href="">購物說明</a></li>
    </ul>
  </div>

// 利用after選擇器+背景影像設定
.box3 {
        li {
            display: inline-block;
            padding-right: 25px;
        }
        a {
            position: relative;
            padding-right: 25px;
            display: block;
            &::after {
                content: "";
                top: 0;
                right: 0;
                width: 18px;
                height: 18px;
                position: absolute;
                background: url(http://icons-for-free.com/icon/download-atm_bank_business_buy_cash_coin_conversion_dollar_ecommerce_economy_finance_financial_money_price_shop_sign_icon-313936.png) no-repeat;
                background-size: cover;
                
            }
        }

結果:

第三種方法好處就是將設計提供的精美小圖處理的精/細/美!
針對自定的圖示,用CSS的背景圖處理,是必用的方法啦

參考資料:

連至DEMO


上一篇
[蛻變事實/D26] 設計師勇闖前端城-(處理icon的那些小事-P1)
下一篇
[蛻變事實/D28] 設計師勇闖前端城-(死背處理CSS 那些鎖事-P1)
系列文
蛻變事實-UI設計師勇闖前端城35

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2018-11-11 21:52:05

每個人的正義,都是正義,但你的是你的,我都是我的/images/emoticon/emoticon37.gif

我要留言

立即登入留言