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响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
随机推荐
- Handler消息传递机制——Handler类简洁
Handler类的主要作用有两个: 在新启动的线程中发送消息. 在主线程中获取.处理消息. 上面的说法很简单,只要分成两步即可:在新启动的线程中发送消息:然后在主线程上获取.并处理消息.但这个过程涉及 ...
- VS2013使用WebDeploy发布网站到IIS服务器
VS2013用Web Deploy方式发布网站到IIS服务器发布文档 VS版本:VS2013 服务器版本:Windows Server 2012 R2 IIS版本:IIS8.0 Web Deploy版 ...
- 让EFCore更疯狂些的扩展类库(二):查询缓存、分部sql、表名替换的策略配置
前言 上一篇介绍了扩展类库的功能简介,通过json文件配置sql语句 和 sql语句的直接执行,这篇开始说明sql配置的策略模块:策略管理器与各种策略的配置. 类库源码:github:https:// ...
- Ubuntu安装搜狗拼音
p { margin-bottom: 0.25cm; direction: ltr; color: rgb(0, 0, 0); line-height: 120% } p.western { font ...
- 【死磕Java并发】-----深入分析volatile的实现原理
通过前面一章我们了解了synchronized是一个重量级的锁,虽然JVM对它做了很多优化,而下面介绍的volatile则是轻量级的synchronized.如果一个变量使用volatile,则它 ...
- Error:(2, 0) Plugin with id 'com.github.dcendents.android-maven' not found. <a href="openFile:I:\API\PermissionGen-master\permissiongen\build.gradle">Open File</a>
不上图说个*** 报这个错的原因是因为 你在project中的build.gradle 少写了两句话 所以报这个错 你只需要在build.gradle中添加 classpath 'com.github ...
- php小测试,难点与分享
B/S(网页程序) 网页结构,依托游览器 C/S(客户端程序) 单引号和双引号包含字符串的区别: 双引号里面可以解析变量,比如: $a=555; echo "你好{$a}"; 输出 ...
- ASP.NET应用程序的文件类型及文件夹列表
文件类型: 1. *.aspx文件:这类文件是ASP.NET Web页面,它包括用户接口和隐藏代码. 2. *.ascx文件:这类文件是用户控件.用户控件同Web页面非常相似,但用户不能直接访问用户控 ...
- DataReader的用法程序简析
// 2015/07/05 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
- 一步一步在Windows中使用MyCat负载均衡 上篇
传统关系型数据库的分布式开发通常需要自己做,不仅耗时耗力而且效果不是很理想,当想快速搭建时,最初想到的是看有没有第三方,网上牛人还是很多的,做得比较好的其中之一Mycat,它是开源的分布式数据库系统, ...