css秘密花园
picture元素
http://www.w3cplus.com/responsive/responsive-images-101-part-6-picture-element.html
CHAPTER 1
Introduction 1
Web standards: friend or foe? 2
Web 标准是友是敌?
http://www.w3cplus.com/css3/css-secrets/web-standards-friend-or-foe.html
CSS coding tips
CSS 编码技巧
http://www.w3cplus.com/css3/css-secrets/css-coding-tips.html
CHAPTER 2
Backgrounds & Borders
1 Translucent borders
透明边框
http://www.w3cplus.com/css3/css-secrets/translucent-borders.html
2 Multiple borders
多边框
http://www.w3cplus.com/css3/css-secrets/multiple-borders.html
3 Flexible background positioning
灵活的背景定位
http://www.w3cplus.com/css3/css-secrets/flexible-background-positioning.html
4 Inner rounding
内凹圆角
http://www.w3cplus.com/css3/css-secrets/inner-rounding.html
5 Striped backgrounds
条纹背景
http://www.w3cplus.com/css3/css-secrets/striped-backgrounds.html
6 Complex background patterns 50
复杂背景图案
http://www.w3cplus.com/css3/css-secrets/complex-background-pattern.html
7 (Pseudo)random backgrounds 62
随机背景
http://www.w3cplus.com/css3/css-secrets/random-backgrounds.html
8 Continuous image borders 68
图片边框
http://www.w3cplus.com/css3/css-secrets/continuous-image-borders.html
CHAPTER 3
Shapes 75
9 Flexible ellipses 76
灵活的椭圆形
http://www.w3cplus.com/css3/css-secrets/flexible-ellipses.html
10 Parallelograms 84
平行四边形
http://www.w3cplus.com/css3/css-secrets/parallelograms.html
11 Diamond images 90
菱形图片
http://www.w3cplus.com/css3/css-secrets/diamond-images.html
12 Cutout corners 96
斜切角
http://www.w3cplus.com/css3/css-secrets/cutout-corners.html
13 Trapezoid tabs 108
梯形标签
http://www.w3cplus.com/blog/1658.html
14 Simple pie charts 114
CHAPTER 4
Visual Effects 129
15 One-sided shadows 130
单面阴影
http://www.w3cplus.com/css3/css-secrets/one-sided-shadows.html
16 Irregular drop shadows 134
不规则的阴影
http://www.w3cplus.com/css3/css-secrets/Irregular-drop-shadows.html
17 Color tinting 13
色调
http://www.w3cplus.com/css3/css-secrets/color-tinting.html
18 Frosted glass effect 146
磨砂玻璃效果
http://www.w3cplus.com/css3/css-secrets/frosted-glass-effect.html
19 Folded corner effect 156
折角效果
http://www.w3cplus.com/css3/css-secrets/folded-corner-effect.html
CHAPTER 5
Typography 167
20 Hyphenation 168
断字
http://www.w3cplus.com/css3/css-secrets/hyphenation.html
21 Inserting line breaks 172
插入换行符
http://www.w3cplus.com/css3/css-secrets/inserting-line-breaks.html
22 Zebra-striped text lines 178
23 Adjusting tab width 182
调整tab缩进宽度
http://www.w3cplus.com/css3/css-secrets/adjusting-tab-width.html
24 Ligatures 184
连体字母
http://www.w3cplus.com/css3/css-secrets/ligatures.html
25 Fancy ampersands 188
花式的&符号
http://www.w3cplus.com/css3/css-secrets/fancy-ampersands.html
26 Custom underlines 194
自定义下划线
http://www.w3cplus.com/css3/css-secrets/custom-underlines.html
27 Realistic text effects 200
逼真的文本效果
http://www.w3cplus.com/css3/css-secrets/realistic-text-effects.html
28 Circular text 210
环形文本
http://www.w3cplus.com/css3/css-secrets/circular-text.html
CHAPTER 6
User Experience 217
29 Picking the right cursor 218
挑选合适的光标
http://www.w3cplus.com/css3/css-secrets/picking-the-right-cursor.html
30 Extending the clickable area 224
扩展可点击区域
http://www.w3cplus.com/css3/css-secrets/extending-the-clickable-area.html
31 Custom checkboxes 228
自定义复选框
http://www.w3cplus.com/css3/css-secrets/custom-checkboxes.html
32 De-emphasize by dimming 234
通过亮度调节去强调(De-emphasize)
http://www.w3cplus.com/css3/css-secrets/de-emphasize-by-dimming.html
33 De-emphasize by blurring 240
通过模糊来De-emphasize(去强调)
http://www.w3cplus.com/css3/css-secrets/de-emphasize-by-blurring.html
34 Scrolling hints 244
滚动提示
http://www.w3cplus.com/css3/css-secrets/scrolling-hints.html
35 Interactive image comparison 250
交互式图像对比
http://www.w3cplus.com/css3/css-secrets/interactive-image-comparison.html
CHAPTER 7
Structure & Layout 261
36 Intrinsic sizing 262
内容尺寸
http://www.w3cplus.com/css3/css-secrets/intrinsic-sizing.html
37 Taming table column widths
驾驭列表宽度
http://www.w3cplus.com/css3/css-secrets/taming-table-column-widths.html
38 Styling by sibling count 270
相邻元素样式
http://www.w3cplus.com/css3/css-secrets/styling-by-sibling-count.html
39 Fluid background, ?xed content 276
流体背景,固定内容
http://www.w3cplus.com/css3/css-secrets/fluid-background-fixed-content.html
40 Vertical centering 280
垂直居中
http://www.w3cplus.com/css3/css-secrets/vertical-centering.html
41 Sticky footers 288
http://www.w3cplus.com/css3/css-secrets/sticky-footers.html
CHAPTER 8
Transitions & Animations 293
42 Elastic transitions 294
灵活的过渡
http://www.w3cplus.com/css3/css-secrets/elastic-transitions.html
43 Frame-by-frame animations 308
逐帧动画
http://www.w3cplus.com/css3/css-secrets/frame-by-frame-animations.html
44 Blinking 314
闪烁动画
http://www.w3cplus.com/css3/css-secrets/blinking.html
45 Typing animation 320
文本动画
http://www.w3cplus.com/css3/css-secrets/typing-animation.html
46 Smooth state animations 328
动画状态
http://www.w3cplus.com/css3/css-secrets/smooth-state-animations.html
47 Animation along a circular path 334
CSS秘密花园: 沿着路径的动画
http://www.w3cplus.com/css3/css-secrets/animation-along-a-circular-path.html
环形文本
http://www.w3cplus.com/css3/css-secrets/circular-text.html
css秘密花园的更多相关文章
- css秘密花园一
css秘密花园 1.透明边框 <style> div{ width: 120px; height: 60px; margin: 30px auto; background: pink; b ...
- 读书笔记 —— 《css秘密花园》
浏览器兼容性有效性信息查询 : Can I Use? http://caniuse.com/ 自动为css添加浏览器厂商前缀 https://autoprefixer.github.io/ 在线编辑H ...
- CSS秘密花园:多边框
今天在查询CSS3动画相关资料时偶然发现这个,感觉有时还是挺方便的.原文链接:http://www.w3cplus.com/css3/css-secrets/multiple-borders.html ...
- css特效 - 环形文字
记一次群友问题和回答: 下面这种效果,文字是动态的,不能使用图片的情况下,前端怎么实现? 一.插件实现: arctext.js 教程地址:实现文字平滑弯曲弧形效果的插件-arctext.js 二.原生 ...
- 推荐一些关于学习Html Css和Js的书吗?
前端易学易懂,随着移动互联网的日益兴起,it行业对于前端的需求也在不断的提高,那么从前端小白修炼成为前端大神的这个过程之中,一些必备的枕边书也是必不可少的. 第一本,入门<Head first ...
- CSS 标准发布流程
随着 CSS 3 的广泛应用,很多新的 CSS 属性层出不穷,有很多陌生的 CSS 属性出现,所以经常需要去学习新的 CSS 属性.新的属性往往介绍文章不多,所以有时候就需要去看看官方文档,此时会发现 ...
- 移动端web开发的一些知识点
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...
- HTML - 毛玻璃 滤镜 模糊
css 秘密花园 http://dabblet.com/gist/d9f243ddd7dbffa341a4 场景,背景图片 + 毛玻璃遮盖 原理:利用background的cover特性,将毛玻璃的区 ...
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
随机推荐
- axure8.0注册码
激活码:(亲测可用) 用户名:aaa 注册码:2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3gEN5h7FkVPIn8oG3uphlOeytIajxGU 用户名:axureuse ...
- C++ 常量类型 const 详解
1.什么是const? 常类型是指使用类型修饰符const说明的类型,常类型的变量或对象的值是不能被更新的.(当然,我们可以偷梁换柱进行更新:) 2.为什么引入const? const 推出的初始目的 ...
- Error while registering Oracle JDBC Diagnosabilityh
Error while registering Oracle JDBC Diagnosability 把ojdbc6.jar换成ojdbc14.jar就可以了: 后来发现又没有问题了:不过据说这个是数 ...
- ProjectManager Beta 2 项目管理器发布
上次载Alpha阶段有一个可用版本Alpha 8也在这个博客发布了,传送:http://www.cnblogs.com/deali/p/ProjectManager.html ProjectManag ...
- 《JAVASCRIPT高级程序设计》DOM扩展
虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...
- Struts1文件上传、单文件、多文件上传【Struts1】
将struts1文件上传的操作汇总了一下,包括单文件上传和多文件上传,内容如下,留作备忘: Struts2实现文件上传的文章(http://blog.csdn.net/itwit/article/d ...
- JAVA中的小数
JAVA中的小数称为浮点数 1.有两种类型: float:单精度浮点数.4个字节. double:双精度浮点数.8个字节. 2.类型转换 容量小 -------------------------- ...
- 谁该吃药了(线性判别法LDA小故事)
一家"胡说八道医院"拥有一种治疗癌症的药物, 根据过去的记录, 该药物对一些患者非常有效, 但是会让一些患者感到更痛苦... 我们希望有一种判别准则能帮助我们判断哪些病人该吃药,哪 ...
- Hibernate基本原理
一.Hibernate是对JDBC进一步封装 原来没有使用Hiberante做持久层开发时,存在很多冗余,如:各种JDBC语句,connection的管理,所以出现了Hibernate把JDBC封装了 ...
- [Spark] - Spark部署安装
环境:centos6.0 虚拟机 搭建单机版本的spark 前提条件:搭建好hadoop环境 1. 下载scala进行安装 只需要设置环境变量SCALA_HOME和PATH即可 export SCAL ...