蘋果風格的底線

今天研究一個利用text-shadow和:after偽對象做成的蘋果風格的底線效果。

線上研究點這裡，下載收藏點這裡。

好啦，開工啦，先看html了

<span class="underlined">everybody go go go!</span>

CSS重點，我們用到了google web font，我們使用了上一篇文章裡介紹的google web font sass mixin。

@mixin gwf($fonts) {    $url: "http://fonts.googleapis.com/css?family=";    $nb: 0;        @each $font-name in $fonts {      $nb: $nb + 1;      $nb-word: 0;            @each $word in $font-name {        $nb-word: $nb-word + 1;        $url: $url + $word;                @if $nb-word < length($font-name) {          $url: $url + "+";         }       }            @if $nb < length($fonts) {         $url: $url + "|";       }    }        @import url(#{$url});  }  $fonts: Condiment, The Girl Next Door,Nothing You Could Do;  @include gwf($fonts); 

然後，就是正章啦

/* 設定字型顏色，背景顏色 */body {  background-color: #32a5fc;  color: #fff;}/* 設定字型,注意我們要把底線放到字型下面，所以需要position:absolute; */span {  position: absolute;  margin:100px;    font-family: Condiment;   font-size: 60px;  font-weight: 300;}/* 設定陰影，相當於描邊文字 */.underlined {  text-shadow:    -5px 0 0 #32a5fc,    5px 0 0 #32a5fc,    0 -5px 0 #32a5fc,    0 5px 0 #32a5fc;}/* 底線 */.underlined:after {  z-index: -1;  position: absolute;  bottom: -1px;  left: 0;  content: "";  width: 100%;  height: 2px;  background-color: #fff;}

完工。

---------------------------------------------------------------

前端開發whqet，關注web前端開發技術，分享網頁相關資源。
---------------------------------------------------------------