一些伪元素的小玩意儿

在shadow的处理上,text-shadow本身就能很好的完成投影效果

  1. text-shadow: #666 1px 1px 0;

用伪元素虽然可以完成一模一样的投影,但总归是多了一堆代码。

  1. .after{
  2. position: relative;
  3. display: block;
  4. color: #ff9900;
  5. margin:20px 100px;
  6. }
  7. .after:after{
  8. position: absolute;
  9. display: block;
  10. top:1px;
  11. left: 1px;
  12. font-size:16px;
  13. color: #666;
  14. content: attr(data-text);
  15. z-index: -1;
  16. }

不过,伪元素既然可以多出来可以控制的标签,必然可以实现更多的效果,比如下面这个demo里。。。。。

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

body{

font-size:16px;

line-height: 14px;

color: #333;

}

.after{

position: relative;

display: block;

color: #ff9900;

margin:20px 100px;

}

.after:after{

position: absolute;

display: block;

top:1px;

left: 1px;

font-size:16px;

color: #666;

content: attr(data-text);

z-index: -1;

}

.shadow{

display: block;

color: #ff9900;

margin:20px 100px;

text-shadow: #666 1px 1px 0;

}

.after-2{

position: relative;

display: block;

color: #ff9900;

margin:20px 100px;

overflow: hidden;

height: 14px;

}

.after-2:after{

position: absolute;

display: block;

top: 0px;

left: 0px;

color: #666;

content: attr(data-text);

z-index: 1;

overflow: hidden;

height: 7px;

}

.after-3{

position: relative;

display: block;

color: #ff9900;

margin:20px 100px;

overflow: hidden;

height: 14px;

}

.after-3:after{

position: absolute;

display: block;

top: 0px;

left: 0px;

color: #87CEFA;

content: attr(data-text);

z-index: 2;

overflow: hidden;

height: 4px;

}

.after-3:before{

position: absolute;

display: block;

top: 0px;

left: 0px;

color: #FF00FF;

content: attr(data-text);

z-index: 1;

overflow: hidden;

height: 10px;

}

</style>

</head>

<body>

<p class="shadow">shadow字体投影效果</p>

<p data-text="伪元素字体投影效果" class="after">伪元素字体投影效果</p>

<p data-text="伪元素字体效果" class="after-2">伪元素字体效果</p>

<p data-text="伪元素字体效果" class="after-3">伪元素字体效果</p>

</body>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区