简单使用CSS3实现炫酷读者墙效果
读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD
使用基础的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实现炫酷读者墙
如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处. 先看demo(请使用Chrome或者Firefox浏览,IE的靠边): 点此查看实例 觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行. ...
- 为你的WordPress博客添加CSS3炫酷读者墙
为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...
- css3 之炫酷的loading效果
css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...
- css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效
这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...
- Android高级控件(四)——VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷
Android高级控件(四)--VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷 是不是感觉QQ空间什么的每次新版本更新那炫炫的引导页就特别的激动,哈哈,其实他实现起来真的很简单很 ...
- 一个炫酷的Actionbar效果
今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...
- GJM :JS + CSS3 打造炫酷3D相册 [转载]
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- WebGIS简单实现一个区域炫酷的3D立体地图效果
1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...
随机推荐
- spring boot thymeleaf常用方式
动态和静态区别 静态页面的return默认是跳转到/static/index.html,当在pom.xml中引入了thymeleaf组件,动态跳转会覆盖默认的静态跳转,默认就会跳转到/template ...
- 一、redis系列之基础知识与centos下环境搭建
1. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久化,可以将内存中的数据保持在磁盘中,重启的时候可以再次加载进行使用. Redis不仅仅支持简单的ke ...
- 美团针对Redis Rehash机制的探索和实践
背景 Squirrel(松鼠)是美团技术团队基于Redis Cluster打造的缓存系统.经过不断的迭代研发,目前已形成一整套自动化运维体系,涵盖一键运维集群.细粒度的监控.支持自动扩缩容以及热点Ke ...
- Linux软件管理(rpm、yum、tar)
RPM软件包安装 YUM安装 源代码安装 TAR包管理:实现对文件的备份和压缩 rpm包管理 rpm命令是RPM软件包的管理工具. -a:查询所有套件:-b<完成阶段><套件档> ...
- [python]源码-对象的创建和行为
(明天论文就要送审了!!!距离毕业一个月!!!) 现在还记得刚开始学python时候被这种动态语言惊到的那种感觉,列表和字典对象可以随意伸缩,简直不能更帅了,但是一直不知道内部到底是怎么实现的,pyt ...
- DNS隧道工具iodine
DNS隧道工具iodine 在受限制的网络中,如果DNS请求没有被限制,就可以通过DNS请求建立隧道而突破网络限制.iodine是Kali Linux提供的一款DNS隧道工具.该工具分为服务器端i ...
- 打开tcp_tw_recycle引起的一次投诉分析
背景: 我们有个基于oauth2.0协议给第三方授权以及信息的业务,年前对接入层.业务层做了次迁移.业务架构简单介绍下: lvs接入---> nginx ---> tomcat 问题: ...
- C# NPOCO 轻量级ORM框架(入门)
目前公司使用这个框架,搜不到很详细的中文资料. 只有英文wiki,所以翻译学习一下. 因为博主也是低水平的,可能会有一些理解不到位的地方. 可能会有错误的地方,如果有园友发现可以指出. wiki地址: ...
- bzoj2660: [Beijing wc2012]最多的方案
题目链接 bzoj2660: [Beijing wc2012]最多的方案 题解 对于一个数的斐波那契数列分解,他的最少项分解是唯一的 我们在拆分成的相临两项之间分解后者,这样形成的方案是最优且不重的 ...
- java设计模式(三)模板模式
抽象类中公开定义了执行它的方法的方式,子类可以按需求重写方法实现,但调用将以抽象类中定义的方式进行,典型应用如银行办理业务流程.冲泡饮料流程.下面给出简单例子,用沸水冲泡饮料,分为四步:将水煮沸.泡制 ...