关注前端开发
关注用户体验

详细解说:简单CSS3实现炫酷读者墙

如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处。

先看demo(请使用Chrome或者Firefox浏览,IE的靠边):

点此查看实例

觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行。

使用基础的Html和CSS写出雏形

需要一提的是头像(img)的排版。给外面a标签padding-left:;,img自身float:left;margin-left:;,这种写法避免了不少因浮动产生的问题,且代码简明,推荐适当的使用此方法。

使用并解说所用CSS3

接下来给大家说说这个读者墙所应用到的css3属性,及其具体的使用方法,老鸟可以飞了。

渐变:

background-image:-webkit-linear-gradient(#aaa,#bbb); 这是最简单的线性渐变,所以写起来也比较爽。

渐变方式:由上至下渐变,#aaa开始,#bbb结束

兼容浏览器的写法:-webkit-linear-gradient,-moz-linear-gradient,-o-linear-gradient,linear-gradient

圆角:

border-radius:2px; 不多说,2像素弧度的圆角,对背景、边框、图片都适用。

不要小看这简单的代码,可以当圆规使:

  • 圆角矩形;
  • 椭圆;
  • 圆;
  • 可选择性圆角,border-radius:2px 0 0 2px;

圆角方式:border-radius: a b c d; 顺序是:a=上左、b=上右、c=下右、d=下左;

具体怎么个圆法,靠你练习了,这绝对是CSS3中最最常用到的一个属性;

阴影:

box-shadow:len1 len2 len3 len4 color (inset); 详解如下:

  • len1:第1个长度值用来设置对象的阴影水平偏移值。可为负值;
  • len2:第2个长度值用来设置对象的阴影垂直偏移值。可为负值;
  • len3:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值;
  • len4:如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值;
  • color:设置对象的阴影的颜色。
  • inset:设置对象的阴影类型为内阴影。不设置时,则对象的阴影类型为外阴影

高级用法:box-shadow:len1 len2 len3 len4 color (inset) , len5 len6 len7 color ;  属性后可以跟多个阴影配置,用逗号隔开。

box-shadow的实际应用相当广泛,不仅可设置对象阴影,还可描边、内发光等等,一般是作为立体效果的按钮。

和box-shadow类似的css3属性text-shadow,设置文本阴影。

变换:

transition:property duration timing-function; 这是定义动画的变换方式,也是css3动画的核心。

property 可以是:

  • all – 表示对象内所有元素执行变换;
  • none – 表示不执行变换;

duration 是设置整个变换所用的时间,格式:.2s 或 2s ;

timing-function 是设置变换效果,可以是后面的任意一个:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),默认值时easy;各个值的效果不同,各式各样的变换效果可以满足部分体验的需求。

兼容浏览器的写法:-webkit-transition,-moz-transition,-o-transition,transition

结语

css3确实很强大,但不要泛滥使用,恰到好处的使用css3会给交互带来很好的体验。

So,更多的了解和学习css3的各个属性的使用方法是必须的,尤其是用在移动开发上。

未经允许不得转载:大前端 » 详细解说:简单CSS3实现炫酷读者墙
分享到: 更多 (0)

评论 53

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #39

    daanjia.com lanvbo.com

    2881个月前 (07-17)回复
  2. #38

    很喜欢你这个网站

    肥水养花3年前 (2014-03-24)回复
  3. #37

    好像有漏点吧 行高设置下 或者高度

    肥水养花4年前 (2013-10-28)回复
  4. #36

    求贴代码,新手实在不懂啊

    小白5年前 (2012-10-05)回复
    • 要动脑子滴

      gefangshuai5年前 (2013-01-24)回复
  5. #35

    每天必须来

    80后男人5年前 (2012-06-29)回复
  6. #34

    学习了..慢慢研究下..看着好像很复杂的样子…

    乐乐堂5年前 (2012-06-21)回复
  7. #33

    这样定两套不同的样式,绝对定位一下就行

    hh5年前 (2012-05-29)回复
  8. #32

    现在浏览器又不通用,你在旋有个P用。自己看(旋)吧!

    简单5年前 (2012-05-10)回复
    • 没看上没说明吗?再说了CSS ie本来就不兼容

      5年前 (2012-06-19)回复
  9. #31

    感谢分享这么好的读者墙

    andychow19896年前 (2012-02-23)回复
  10. #30

    冒昧的问一句到底怎么用啊,表示对这些不是很懂

    一堵墙6年前 (2012-01-31)回复
  11. #29

    终于找到了,这个要看啊

    一堵墙6年前 (2012-01-31)回复
  12. #28

    很炫的功能,关注中

    四叶草6年前 (2012-01-30)回复
  13. #27

    已经弄好了,早看到这个教程就好了,会少走点弯路

    分享元素6年前 (2012-01-27)回复
  14. #26

    手动添加用户?有没有办法自动按评论次数的多少自动添加上去?

    VPS ROLL6年前 (2012-01-26)回复
  15. #25

    我也想给自己的博客做个读者墙,奈何风格调不好啊

    胡小易6年前 (2012-01-19)回复
  16. #24

    你好,想请问下你的HTML和CSS代码高亮是怎么实现的呀?

    salman6年前 (2011-12-20)回复
    • 代码高亮,D4本身没有支持,是在编辑模式下用code标签能得到不错的效果,至于真正实现代码高亮,你可以借住在线代码高亮或者插件实现,建议使用在线代码高亮!

      浩子6年前 (2011-12-21)回复
      • 谢谢。能介绍一个比较好的在线代码高亮吗? 😀

        salyang6年前 (2011-12-21)回复
  17. #23

    这么好的资料,淡定不了啦!

    21think6年前 (2011-12-19)回复
  18. #22

    之前博客也用wordpress了,后来由于自己非常不熟悉,网站又急于上线,所以就没有,以后有机会一定用用,有这么好的资源不用可惜了,哈哈

    脂肪肝饮食6年前 (2011-12-15)回复
  19. #21

    厉害 😳

    羊叨6年前 (2011-12-15)回复
  20. #20

    :mrgreen: 不错啊,学习了

    Joyce6年前 (2011-12-08)回复
  21. #19

    都是厉害的人啊

    网站建设6年前 (2011-11-17)回复
  22. #18

    这可真是好东西呀,怎么应用到侧边栏上去的

    操蛋事6年前 (2011-11-13)回复
    • 侧边栏不适合放这一款特效呢! 🙄 🙄

      折子戏6年前 (2011-11-13)回复
  23. #17

    学习了,非常不错哇~~哈哈不过携程那边上墙好难 😡

    小波6年前 (2011-11-09)回复
  24. #16

    这个效果太给力了。晚上我也来折腾

    Demon6年前 (2011-11-05)回复
  25. #15

    :mrgreen: 灰常给力!赞一个
    本人刚出道,CSS3还没有接触过! 努力学习,天天向上!

    ricky6年前 (2011-11-03)回复
  26. #14

    :mrgreen: 灰常给力!赞一个!
    刚出道,想往前段发展!请各位多多指点!

    ricky6年前 (2011-11-03)回复
  27. #13

    😛 w哇哦。效果超赞。刚刚接触html5和css3. 其作用已经无法掩盖了。

    Robin6年前 (2011-11-02)回复
  28. #12

    我擦…什么时候又搞了个这个….用户体验很好的说….

    忆夏天6年前 (2011-10-31)回复
  29. #11

    CSS3无限强大啊,一直觉得变换的效果应该要用JS才行

    Ben6年前 (2011-10-20)回复
  30. #10

    研究了好久,最终还是通过《演示,携程UED读者墙》中的作者帮助我实现了,还是非常感谢啊,正是因为有了这篇文章才让我实现。

    折子戏6年前 (2011-10-18)回复
  31. #9

    谢谢!已经挪用到PJblog上了!

    Lvtu6年前 (2011-10-18)回复
  32. #8

    哇,不错 😛 😛

    liuliu6年前 (2011-10-15)回复
  33. #7

    研究了下,还是不行啊。能否有篇明朗一点的教程。。

    折子戏6年前 (2011-10-13)回复
  34. #6

    博主是携程的?

    loosky6年前 (2011-10-12)回复
  35. #5

    犀利啊!上次的CSS3的读者墙用了感觉不错啊。没想到今天又出新款了,话说D神你的D4主题什么时候出啊。可是等了好久了呢!

    折子戏6年前 (2011-10-12)回复
  36. #4

    对携程 真不了解 应该是个不错的 公司吧

    将夜6年前 (2011-10-12)回复
  37. #3

    效果确实不错。看来你下面的主题就要用这个了。

    wmtimes6年前 (2011-10-12)回复
  38. #2

    给力啊!浩子这儿关于css3的东西都超赞!!

    那些事儿6年前 (2011-10-11)回复
    • Yes,哥们的赞赏也很给力,继续!!

      浩子6年前 (2011-10-11)回复
      • 确实赞啊,支持一个

        李楠6年前 (2011-11-09)回复
  39. #1

    沙发~~~看来我要学习一下了,最近在学习html css js
    到时候有问题要来请教一下

    iSayme6年前 (2011-10-11)回复

themebetter 国内更好的WordPress主题服务商

立即前往