利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下:

(注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!)

注:该效果可以在Safari, Chrome,Firefox和Opera在看到效果,IE上由于对HTML5的支持不完全,所以看不出效果。

第一步:创建基本HTML和正方形

首先添加基本的HTML结构以及构建基本的正方形,代码如下:

XML/HTML Code复制内容到剪贴板
  1. <ul>
  2. <li><a href=”#”>
  3. <h2>Dudu:</h2>
  4. <p>最近咋没有美女发帖呢?我一定给个头条推荐,recommend!recommend!</p>
  5. </a></li>
  6. <li><a href=”#”>
  7. <h2>汤姆大叔:</h2>
  8. <p>Team的一个成员去了Microsoft做SDE3,又得hire new member了</p>
  9. </a></li>
  10. <li><a href=”#”>
  11. <h2>技术弟弟:</h2>
  12. <p>O2DS和我翻译的书是一样,我一定要比他翻得快, 晚上加班翻,fast! fast! fast!</p>
  13. </a></li>
  14. <li><a href=”#”>
  15. <h2>Artech:</h2>
  16. <p>WCF的帖子真是少,看来我得多发点帖子让大家学习呢</p>
  17. </a></li>
  18. <li><a href=”#”>
  19. <h2>吉日嘎拉:</h2>
  20. <p>将权限管理、工作流管理做到我能力的极致,一个人只能做好那么很少的几件事情</p>
  21. </a></li>
  22. <li><a href=”#”>
  23. <h2>某武林高手:</h2>
  24. <p>低于25000块的面试再也不去了,它grandma的</p>
  25. </a></li>
  26. </ul>

每个note都加一个href连接,主要是为了支持键盘访问,CSS代码如下:

CSS Code复制内容到剪贴板
  1. *{
  2. margin:0;
  3. padding:0;
  4. }
  5. body{
  6. font-family:arial,sans-serif;
  7. font-size:100%;
  8. margin:3em;
  9. background:#666  ;
  10. color:#fff  ;
  11. }
  12. h2,p{
  13. font-size:100%;
  14. font-weight:normal;
  15. }
  16. ul,li{
  17. list-style:none;
  18. }
  19. ul{
  20. overflow:hidden;
  21. padding:3em;
  22. }
  23. ul li a{
  24. text-decoration:none;
  25. color:#000  ;
  26. background:#ffc  ;
  27. display:block;
  28. height:10em;
  29. width:10em;
  30. padding:1em;
  31. }
  32. ul li{
  33. margin:1em;
  34. float:left;
  35. }

效果如下:

第二步:阴影和手写草体字

这一步,是我们要实现正方形的阴影效果,并且将字体改为草体(仅限英文),由于google提供了Font API的支持,所以我们可以直接使用了,首先添加对Google API的调用:

XML/HTML Code复制内容到剪贴板
  1. <link href=”http://fonts.googleapis.com/css?family=Reenie+Beanie:regular” rel=”stylesheet” type=”text/css”>

然后设置引用这个字体:

XML/HTML Code复制内容到剪贴板
  1. ul li h2
  2. {
  3. font-size: 140%;
  4. font-weight: bold;
  5. padding-bottom: 10px;
  6. }
  7. ul li p
  8. {
  9. font-family: “Reenie Beanie” ,arial,sans-serif,微软雅黑;
  10. font-size: 110%;
  11. }

关于阴影,由于各个浏览器还都不完全支持,所以需要分别处理,代码如下:

XML/HTML Code复制内容到剪贴板
  1. ul li a
  2. {
  3. text-decoration: none;
  4. color: #000  ;
  5. background: #ffc  ;
  6. display: block;
  7. height: 10em;
  8. width: 10em;
  9. padding: 1em; /* Firefox */
  10. -moz-box-shadow: 5px 5px 7px rgba(33,33,33,1)  ; /* Safari+Chrome */
  11. -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7)  ; /* Opera */
  12. box-shadow: 5px 5px 7px rgba(33,33,33,.7)  ;
  13. }

效果如下:

倾斜正方形

第三步:倾斜正方形

为了让正方形倾斜,我们需要在li->a里添加如下代码:

XML/HTML Code复制内容到剪贴板
  1. ul li a{
  2. -webkit-transform:rotate(-6deg);
  3. -o-transform:rotate(-6deg);
  4. -moz-transform:rotate(-6deg);
  5. }

但是为了能让正方形随机倾斜,而不是全部都倾斜,我们需要使用新的CSS3选择器,让正方形在每2个倾斜4个deg,每3个倾斜负3个deg,每5个倾斜5个deg:

CSS Code复制内容到剪贴板
  1. ul li:nth-child(even) a{
  2. -o-transform:rotate(4deg);
  3. -webkit-transform:rotate(4deg);
  4. -moz-transform:rotate(4deg);
  5. position:relative;
  6. top:5px;
  7. }
  8. ul li:nth-child(3n) a{
  9. -o-transform:rotate(-3deg);
  10. -webkit-transform:rotate(-3deg);
  11. -moz-transform:rotate(-3deg);
  12. position:relative;
  13. top:-5px;
  14. }
  15. ul li:nth-child(5n) a{
  16. -o-transform:rotate(5deg);
  17. -webkit-transform:rotate(5deg);
  18. -moz-transform:rotate(5deg);
  19. position:relative;
  20. top:-10px;
  21. }

效果如下:

第四步:Hover和Focus时放缩正方形

想在hover和focus的时候达到缩放的效果,我们需要添加如下代码:

 
CSS Code复制内容到剪贴板
  1. ul li a:hover,ul li a:focus{
  2. -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7)  ;
  3. -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7)  ;
  4. box-shadow:10px 10px 7px rgba(0,0,0,.7)  ;
  5. -webkit-transform: scale(1.25);
  6. -moz-transform: scale(1.25);
  7. -o-transform: scale(1.25);
  8. position:relative;
  9. z-index:5;
  10. }

设置z-index为5是为了让正方形在放大的时候盖住其它的正方形,同时因为也设置了focus,所以也支持Tab键切换访问,

效果如下:

平滑过渡和添加颜色

第五步:平滑过渡和添加颜色

第四步的特效,看起来有些生硬,我们可以添加Transition来达到平滑动画的效果,另外颜色比较单一,我们可以设置一下不同的颜色,首先在ul->li->a里添加Transition:

CSS Code复制内容到剪贴板
  1. -moz-transition:-moz-transform .15s linear;
  2. -o-transition:-o-transform .15s linear;
  3. -webkit-transition:-webkit-transform .15s linear;

然后在even和3n里定义不同的颜色:

 
CSS Code复制内容到剪贴板
  1. ul li:nth-child(even) a{
  2. -o-transform:rotate(4deg);
  3. -webkit-transform:rotate(4deg);
  4. -moz-transform:rotate(4deg);
  5. position:relative;
  6. top:5px;
  7. background:#cfc  ;
  8. }
  9. ul li:nth-child(3n) a{
  10. -o-transform:rotate(-3deg);
  11. -webkit-transform:rotate(-3deg);
  12. -moz-transform:rotate(-3deg);
  13. position:relative;
  14. top:-5px;
  15. background:#ccf  ;
  16. }

这样,就完成了我们最终的效果:

总结

至此,我们利用了HTML5和CSS3的基本特性做成了一个还不错的便签贴效果,HTML5/CSS3确实很强大,如果在加一些高级特性,比如和JavaScript结合起来,能实现更加牛逼的效果,从当耐特砖家给大家的HTML5实验室系列文章,就可以看出来了。

使用HTML5/CSS3制作便签贴的更多相关文章

  1. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  2. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

  3. 纯HTML5+CSS3制作生日蛋糕

    以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊.写的比较简陋,感兴趣的看一下吧. 先发个效果图吧 蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分.HTML的布 ...

  4. JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局

    一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...

  5. 使用HTML5+CSS3制作圆角内发光按钮----示例

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

  7. html5+css3 制作音乐播放器

    //css// body , html{    margin:0;    padding:0;    font:12px Arial, Helvetica, sans-serif;    } .Mus ...

  8. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  9. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

随机推荐

  1. Android 内部存储相关的函数(getCacheDir,getDir, getFileStreamPath,getFilesDir,openFileInput, ...)

    为了保证应用程序存储数据的安全性,开发人员在开发应用程序的过程中须要注意使用Android 应用程序的内部存储空间. 依据不同的要求.将相应的数据文件.缓存文件.暂时文件等分别存储在相应的位置. 注意 ...

  2. 电子设计省赛--DMA与ADC

    //2014年4月17日 //2014年6月20日入"未完毕" //2014年6月21日 DMA可实现无需cpu控制中断的传输数据保存. 特别是ADC转换多个通道时要用到. 关键是 ...

  3. 设置Android设备在睡眠期间始终保持WLAN开启的代码实现

    MainActivity例如以下: package cc.ab; import android.os.Bundle; import android.provider.Settings; import ...

  4. vs debug 快捷键

    命令名 快捷键 说明 调试.应用代码更改 Alt + F10 启动生成操作,利用它可以通过“编辑并继续”功能应用对正在调试的代码所作的更改. 调试.自动窗口 Ctrl + D,Ctrl + A 显示“ ...

  5. linux下挂载iso镜像文件(转)

    挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用到的. 命令格式: mount [-t vfstype] [-o optio ...

  6. Android应用开发中webview上传文件的几种思路

    1. 常规方法,重写WebChromeClient 的 openFileChooser 方法 private class MyWebChromeClient extends WebChromeClie ...

  7. 禁掉a链接的几种方法

    这次遇到链接 先留着  但不能有任何作用的需求  ,我只能说顾客的需求真是多种多样,奇奇怪怪啊 啊啊啊啊啊啊啊啊啊啊啊 我用span代替了a 标签,但是后来想想维护起来可能不太方便  所以上网查资料, ...

  8. android中页面的返回刷新

    android中从A activity 打开B activity 操作之后返回A activity,并且A activity状态改变就要用到刷新 我就介绍一下我开发中最常用的方法 引用函数 setRe ...

  9. mysql+php+pdo批量添加大数据

    1.使用insert into插入 ini_set('max_execution_time','0');//限制超时时间,因为第一种时间较长,索性设为0不限制 $pdo = new PDO(" ...

  10. JSP中Filter中访问Spring管理的beans

    @Override public void init(FilterConfig filterConfig) {  //unchecked = filterConfig.getInitParameter ...