苹果风格的下划线

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/whqet/article/details/21407523

今天研究一个利用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前端开发技术,分享网页相关资源。
---------------------------------------------------------------

阅读更多

没有更多推荐了,返回首页