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

时间: 2025-01-06 12:04:32

css秘密花园的相关文章

css秘密花园一

css秘密花园 1.透明边框 <style> div{ width: 120px; height: 60px; margin: 30px auto; background: pink; border: 10px solid hsla(0, 0%, 100%, .5) } </style> <body> <main> <div></div> </main> </body> 2.css多重边框 <style&

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

浏览器兼容性有效性信息查询 : Can I Use? http://caniuse.com/ 自动为css添加浏览器厂商前缀 https://autoprefixer.github.io/ 在线编辑HTML/CSS/JavaScript与即时预览的工作台 https://jsfiddle.net/ http://codepen.io/pens/ http://runjs.cn/ 简易的DOM获取工具函数 function $$(selector,context) { context = cont

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

整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用css设置为0.5. 平时用的比较多的也是使用transform了: div{ height:1px; background:#000; -webkit-transform: sc

响应式布局和自适应布局的不同

学了前端一段时间了,发现大家都搅浑了自适应布局和响应式布局的差别.现在我来和大家说下它们的不同: 自适应的体验   http://m.ctrip.com/html5/响应式的体验   http://segmentfault.com/ 整理了自己查阅的知识点,给各位一些提示. 起初,网页设计者都会涉及固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时本来电脑就少,即使有变化也是800,850,870,880,比如开源中国的网页就是固定宽度为998来定制的,至于为啥是998,我也不知道...

【编程书籍 大系】 计算机开放电子书汇总

计算机开放电子书汇总 站点 站点源码 100个gcc小技巧 在线阅读 PDF格式 EPUB格式 MOBI格式 100个gdb小技巧 在线阅读 PDF格式 EPUB格式 MOBI格式 关于浏览器和网络的 20 项须知 在线阅读 PDF格式 EPUB格式 MOBI格式 2015互联网企业校招笔试题 MEGA下载 Github下载 3周3页面 在线阅读 PDF格式 EPUB格式 MOBI格式 简明 Python 教程 在线阅读 PDF格式 EPUB格式 A Guide to HTML5 and CSS

响应式和自适应的区别

玩前端也有几个月了,发现大家普遍混淆了响应式和自适应的概念.先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/ 整理了几篇自适应和响应式的文章,摘抄并修改了一下,请大家欣赏: 起初,网页设计者都会设计固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时电脑本来就少,即使有变化也是 800 850 870 880.比如 开源中国的网页就是固定宽度为998

什么鬼

一.关注前端前沿知识,具体做法是加入一些前端的微信公众号,每天推送一点前沿知识新鲜玩意让你了解,每天去逛逛知名的社区和论坛,如掘金.css88.csdn: 尤其推荐使用掘金chrome插件版.这样每天打开页面就可以看到最新整理的文章和github项目了. 二.关注基本功,html.css.js.尤其是js:这没什么好说的,除了html,其他两个深似海.学到顶尖都是超神级别的人物:如css一姐Lea Verou 代表作品<css秘密花园>:https://pan.baidu.com/s/1c2r

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

一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会带来兼容各种设备工作量大.代码累赘.加载时间长的缺点,但它们跨平台和终端,能"一次设计,普遍适用",可以根据屏幕分辨率自适应以及自动缩放图片.自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile

HTML+CSS Day10实例

1.家居大视野 效果图: 代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta