如题,给大家介绍和讲解几个常用的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实现炫酷读者墙

简单CSS3实现炫酷读者墙的更多相关文章

  1. 简单使用CSS3实现炫酷读者墙效果

    读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头 ...

  2. 为你的WordPress博客添加CSS3炫酷读者墙

    为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...

  3. css3 之炫酷的loading效果

    css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...

  4. GJM :JS + CSS3 打造炫酷3D相册 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  5. css3制作炫酷导航栏效果

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

  6. css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效

    这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...

  7. 简单实现Win10炫酷下滑关机

    实现效果如下图,鼠标左键按下下拉关机: 先说下实现思路和实现过程(包括失败过程),不想了解的可直接往下拉查看红色字体标注的最终实现方法. 首先实现下滑关机的Windows自带的一个功能(程序)Slid ...

  8. WordPress酷炫CSS3读者墙代码

    前几日在大前端看到他站点中最新的CSS3读者墙代码,一看效果绚丽的不得鸟,立刻就开始研究了,多次研究未果,可终究是研究出来了,昨天刚成功,今天啊和童鞋来我站说读者墙头像显示不对,我一看,还真是,头像都 ...

  9. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

随机推荐

  1. Linux安全基础:find命令的使用

    find 命令用于查找文件系统中的指定文件. *命令格式:find pathname -option [-print -exex -ok] 1.pathname要查找的目录路径 ~表示home目录 . ...

  2. Sharepoint学习笔记—ECM系列--文档集(Document Set)的实现

    文档集是 SharePoint Server 2010 中的一项新功能,它使组织能够管理单个可交付文档或工作产品(可包含多个文档或文件).文档集是特殊类型的文件夹,它合并了唯一的文档集属性以及文件夹和 ...

  3. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q136-Q138)

    Question 136You need to create a custom content type and specify the content type ID.What should you ...

  4. iOS多线程之3.NSThread的线程间通信

      我们把一些耗时操作放在子线程,例如下载图片,但是下载完毕我们不能在子线程更新UI,因为只有主线程才可以更新UI和处理用户的触摸事件,否则程序会崩溃.此时,我们就需要把子线程下载完毕的数据传递到主线 ...

  5. UITextView回收或关闭键盘

    iOS开发中,发现UITextView没有像UITextField中textFieldShouldReturn:这样的方法,那么要实现UITextView关闭键盘,就必须使用其他的方法,下面是可以使用 ...

  6. 转载文档:Storm实战常见问题及解决方案

    该文档为实实在在的原创文档,转载请注明: http://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html 类型 详细 备注 该文档是群里几个朋友在storm实 ...

  7. Reporting Service 服务启动时报错The service did not respond to the start or control request in a timely fashion

    案例环境: 启动一台数据库服务器(Windows Server 2003)的Reporting Service(SQL Server 2008 R2)服务时,出现如下错误信息: System.Inva ...

  8. MySQL性能优化——索引

    原文地址:http://blog.codinglabs.org/articles/theory-of-mysql-index.html InnoDB使用B+Tree作为索引结构 最左前缀原理与相关优化 ...

  9. nginx 配置php

    安装php yum install php   yum install php-mysql php-gd php-imap php-ldap php-odbc php-pear php-xml php ...

  10. Vim插件管理

    一.简介 二.管理器 1)Vundle https://github.com/gmarik/vundle.git 2)vim-plug https://github.com/junegunn/vim- ...