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秘密花园的更多相关文章

  1. css秘密花园一

    css秘密花园 1.透明边框 <style> div{ width: 120px; height: 60px; margin: 30px auto; background: pink; b ...

  2. 读书笔记 —— 《css秘密花园》

    浏览器兼容性有效性信息查询 : Can I Use? http://caniuse.com/ 自动为css添加浏览器厂商前缀 https://autoprefixer.github.io/ 在线编辑H ...

  3. CSS秘密花园:多边框

    今天在查询CSS3动画相关资料时偶然发现这个,感觉有时还是挺方便的.原文链接:http://www.w3cplus.com/css3/css-secrets/multiple-borders.html ...

  4. css特效 - 环形文字

    记一次群友问题和回答: 下面这种效果,文字是动态的,不能使用图片的情况下,前端怎么实现? 一.插件实现: arctext.js 教程地址:实现文字平滑弯曲弧形效果的插件-arctext.js 二.原生 ...

  5. 推荐一些关于学习Html Css和Js的书吗?

    前端易学易懂,随着移动互联网的日益兴起,it行业对于前端的需求也在不断的提高,那么从前端小白修炼成为前端大神的这个过程之中,一些必备的枕边书也是必不可少的. 第一本,入门<Head first ...

  6. CSS 标准发布流程

    随着 CSS 3 的广泛应用,很多新的 CSS 属性层出不穷,有很多陌生的 CSS 属性出现,所以经常需要去学习新的 CSS 属性.新的属性往往介绍文章不多,所以有时候就需要去看看官方文档,此时会发现 ...

  7. 移动端web开发的一些知识点

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

  8. HTML - 毛玻璃 滤镜 模糊

    css 秘密花园 http://dabblet.com/gist/d9f243ddd7dbffa341a4 场景,背景图片 + 毛玻璃遮盖 原理:利用background的cover特性,将毛玻璃的区 ...

  9. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

随机推荐

  1. thinkphp 配置项总结

    'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TMPL_R_DELIM'=>'}&g ...

  2. redhat6 + 11G RAC 双节点部署

      一.配置网络环境 node1 [root@node1 ~]#vi/etc/sysconfig/network NETWORKING=yes NETWORKING_IPV6=no HOSTNAME= ...

  3. Flex timer使用 keydown事件注册到stage

    Flex timer使用 keydown事件注册到stage: <?xml version="1.0" encoding="utf-8"?> < ...

  4. Libcurl细说

    libcurl教程   原文地址:http://curl.haxx.se/libcurl/c/libcurl-tutorial.html 译者:JGood(http://blog.csdn.net/J ...

  5. CAReplicatorLayer复制Layer和动画, 实现神奇的效果

    今天我们看下CAReplicatorLayer, 官方的解释是一个高效处理复制图层的中间层.他能复制图层的所有属性,包括动画. 一样我们先看下头文件 @interface CAReplicatorLa ...

  6. .md即markdown文件的基本常用编写语法(图文并茂)

    序言: 很久没有写博客了,感觉只要是不写博客,人就很变得很懒,学的知识点感觉还是记不住,渐渐地让我明白,看的越多,懂的越少(你这话不是有毛病吗?应该是看的越多,懂的越多才对),此话怎讲,当你在茫茫的前 ...

  7. 如何给 UILable 添加横线

    类似淘宝上的原价现价,原价上一般都会有一条横线,这种效果怎么实现呢?其实相当的简单,我们只需要重写自定义的lable的 - (void)drawRect:(CGRect)rect 方法就行了. 具体实 ...

  8. 蓝桥网试题 java 基础练习 01字串

    ---------------------------------------------------------------------- 还括以 0.0 --------------------- ...

  9. 自己动手系列——实现一个简单的ArrayList

    ArrayList是Java集合框架中一个经典的实现类.他比起常用的数组而言,明显的优点在于,可以随意的添加和删除元素而不需考虑数组的大小.处于练手的目的,实现一个简单的ArrayList,并且把实现 ...

  10. iOS开发一些小技巧

    1.隐藏多余的tableView的cell分割线 self.tableView.tableFooterView= [[UIViewalloc]init]; 2.取消系统自带的返回字样 [[UIBarB ...