一段CSS代码让你的广告位“立起来”

王小优
王小优
王小优
231
文章
0
评论
2015年12月6日
评论
3,811 913字阅读3分2秒

很多网站上都会投放广告,但一般情况下广告都不那么“好看”,如果我们对广告位稍微进行美化,说不定能出人意料呢。

广告对于网站来说一直是一把双刃剑,既能给网站带来利益又很有可能影响用户体验,特别是广告联盟,你永远不知道下一个广告会是什么内容。有时候我们稍微对广告模块就行美化,在一定程度上能够增色不少。

比如王小优就对一个336*280px大小的矩形广告进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,如下图:

一段CSS代码让你的广告位“立起来”

怎么做到的呢?其实也就是一段CSS的功夫。

先确定下HTML结构,在你的广告div盒子里增加一个class为ad-shadow的div区块:

  1. <div class="ad-warp">
  2. <div class="ad-shadow"></div>
  3. <!-- 这里是广告内容,或图片或JS代码 -->
  4. </div>

然后加入CSS代码:

  1. .ad-warp {
  2. margin20px auto;
  3. width346px;
  4. height290px;
  5. positionrelative;
  6. border5px solid #d2d2d2;
  7. -webkit-box-sizing: border-box;
  8. -moz-box-sizing: border-box;
  9. box-sizing: border-box;
  10. }
  11. .ad-shadow {
  12. border-color#e9e9e9 #fff #fff;
  13. border-stylesolid;
  14. border-width130px 0 0 130px;
  15. height: 0;
  16. width: 0;
  17. positionabsolute;
  18. left: -135px;
  19. bottombottom: -5px;
  20. }

本文是以一个336*280px的矩形广告为例,你可以根据你的广告尺寸来调整CSS中的代码。

主要原理还是利用CSS常见的border属性,通过设置其上下左右的尺寸和颜色来达到透视的效果,本文就不赘述了,有兴趣研究的朋友可以自行百度border样式。

至于好不好看,这个仁者见仁了,王小优只是本着分享的态度写出来。当然不仅仅是只能用于广告,其他的版块也可以使用这种CSS方法,看你怎么用了~

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
CSS样式表属性最佳书写顺序是怎样的? CSS

CSS样式表属性最佳书写顺序是怎样的?

混乱的CSS属性书写顺序会对网页的加载渲染造成影响,拖慢页面加载速度。一个规范的CSS属性书写属性也是网页优化的组成部分,值得每一位前端爱好者重视。 这段时间稍微整理了一下之前写的样式表,就来说下CS...
常用的几个CSS前端效果 更轻松的写页面 CSS

常用的几个CSS前端效果 更轻松的写页面

本文收集了20多个常用的CSS效果,在写页面的时候可以直接使用,不用再一遍一遍的做无用功了,大大提高了开发效率。 做页面需要一定的CSS基本功,虽然现在有很多成熟的框架如Bootstrap等,我们轻松...
HTML中引入CSS的四种常用方法及各自的缺点 CSS

HTML中引入CSS的四种常用方法及各自的缺点

在WEB前端开发中最基本是就是HTML+CSS了,HTML就好比是骨架,CSS就是皮肉,那么你知道在HTML中引入CSS有哪些方法以及各自的缺点么? 在WEB前端开发中最基本是就是HTML+CSS了,...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: