本书是一本注重实践的教程，作者为我们揭示了47个鲜为人知的CSS技巧，主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。
史上最全的实例
建议不要买书 因为电子版的更适合我们
下载链接 css揭秘pdf
dome
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
background: url('http://csssecrets.io/images/stone-art.jpg') no-repeat center top;
background-size: cover;
}
.box{
max-width: 200px;
padding: 10px;
font-size: 16px;
margin: 16px auto;
}
.transaprent{
border: 10px solid rgba(255, 255, 255, 0.5);
background-color: #fff;
background-clip: padding-box;
}
.shadow{
border-radius:20px;
background-color:greenyellow;
box-shadow: 0 0 0 5px gray,
0 0 0 10px green,
0 0 0 15px rgba(0, 0, 0, 0.5)
}
.outline{
border:10px solid #655;
background-color: yellowgreen;
outline: 2px dashed deeppink;
outline-offset: -15px;
}
.background{
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-origin: content-box;
height: 100px;
}
.borderImage{
border: 10px solid transparent;
background: linear-gradient(white 10px, rgb(121, 4, 4)) padding-box,
url(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover;
overflow: hidden;
resize: both;
}
.button{
position: relative;
display: inline-block;
padding: .5em 1em;
border: 0; margin:0 auto;
background: transparent;
color: white;
text-transform: uppercase;
text-decoration: none;
font: bold 200%/1 sans-serif;
}
.button:before{
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(-45deg);
}
.diamond{
width: 250px;
height: 250px;
transform: rotate(45deg);
overflow: hidden;
margin: 100px;
background-color: #fff;
}
.img{
max-width: 250px;
margin: 20px;
height: 200px;
background-color: #fff;
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s;
}
.img:hover{
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.glow{
color: #ffc;
text-decoration: none;
transition: 1s;
margin-left: 500px;
}
.glow:hover{
text-shadow: 0 0 .1em, 0 0 .3em;
}
:disabled, [disabled], [aria-disabled="true"] {
cursor: not-allowed;
}
.speech {
border-radius: .3em;
position: relative;
vertical-align: bottom;
box-sizing: border-box;
width: 5.9em;
height: 5.2em;
margin: .6em;
background: #fb3;
/*box-shadow: .1em .1em .3em rgba(0,0,0,.5);*/
-webkit-filter: drop-shadow(.1em .1em .1em rgba(255,0,0,.5));
filter: drop-shadow(.1em .1em .1em rgba(255,0,0,.5));
font: 200%/1.6 Baskerville, Palatino, serif;
text-align: center;}
.speech::before {
content: '';
position: absolute;
top: 1em;
right: -.7em;
width: 0;
height: 0;
border: 1em solid transparent;
border-left-color: #fb3;
border-right-width: 0;
}
dt, dd { display: inline;color:#fff;margin-left: 40px;}
dd {
margin: 0;
font-weight: bold;
}
dd::after {
content: "\A";
white-space: pre;
}
.image-slider {
position:relative;
display: inline-block;
}
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 10%;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}
.image-slider > div:before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 12px; height: 12px;
padding: 5px;
background: linear-gradient(-45deg, white 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}
.image-slider img {
display: block;
user-select: none;
}
input:not(:focus) + .callout:not(:hover) {
transform: scale(0);
transition: .25s transform;
}
.callout {
transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
transform-origin: 1.4em -.4em;
}
input {
display: block;
padding: 0 .4em;
font: inherit;
}
.callout {
position: absolute;
max-width: 14em;
padding: .6em .8em;
border-radius: .3em;
margin: .3em 0 0 -.2em;
background: #fed;
border: 1px solid rgba(0,0,0,.3);
box-shadow: .05em .2em .6em rgba(0,0,0,.2);
font-size: 75%;
}
.callout:before {
content: "";
position: absolute;
top: -.4em;
left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
.ease{
width: 200px;
height: 200px;
background-color: firebrick;
margin: 100px auto;
}
.ease{
background: rgb(100%, 0%, 40%);
transition: 1s cubic-bezier(.25,.1,.2,3);
}
.ease:hover{
background: gray;
}
@keyframes loader {
to { background-position: -800px 0; }
}
.loader {
width: 100px; height: 100px;
margin: 100px auto;
text-indent: 999px; overflow: hidden; /* Hide text */
background: url(http://dabblet.com/img/loader.png) 0 0;
animation: loader 1s infinite steps(8);
}
@keyframes blink-1 { 50% { color: transparent } }
@keyframes blink-2 { to { color: transparent } }
p {
padding: 1em;
background: gold;
}
.blink-smooth-1 {
animation: 1s blink-1 3;
}
.blink-smooth-2 {
animation: .5s blink-2 6;
animation-direction: alternate;
}
.blink {
animation: 1s blink-1 3 steps(1);
}
@keyframes panoramic {
to { background-position: 100% 0; }
}
.panoramic {
width: 150px; height: 150px;
background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
animation-play-state: paused;
}
.panoramic:hover, .panoramic:focus {
animation-play-state: running;
}
/**
* Animation along a circular path - Solution 1
*/
@keyframes spin {
to { transform: rotate(1turn); }
}
.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px;
}
.avatar > img {
animation: inherit;
animation-direction: reverse;
}
/* Anything below this is just styling */
.avatar {
width: 50px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
}
.avatar > img {
display: block;
width: inherit;
}
.path {
width: 300px; height: 300px;
padding: 20px;
border-radius: 50%;
background: #fb3;
}
/**
* Animation along a circular path - Solution 2
*/
@keyframes spin1 {
from {
transform: rotate(0turn)
translateY(-150px) translateY(50%)
rotate(1turn)
}
to {
transform: rotate(1turn)
translateY(-150px) translateY(50%)
rotate(0turn);
}
}
.avatar1 {
animation: spin1 3s infinite linear;
}
/* Anything below this is just styling */
.avatar1 {
display: block;
width: 50px;
margin: calc(50% - 25px) auto 0;
border-radius: 50%;
overflow: hidden;
}
.path1 {
width: 300px; height: 300px;
padding: 20px;
margin: 100px auto;
border-radius: 50%;
background: #fb3;
}
</style>
</head>
<body>
<!-- 浏览器前缀 -->
<!-- 最新版的浏览器基本都支持css3 基本都不用写前缀 ，写前缀是为了向前兼容老版本的浏览器-->
<!-- 大前提 代码量少 可维护性高 -->
<!-- 透明边框 -->
<div class="transaprent box">
transaprent
</div>
<!-- 多重边框 两种方案 -->
<!-- box-shadow 支持圆角-->
<div class="shadow box">shadow</div>
<!-- outline 不支持圆角 支持缝边效果 -->
<div class="outline box">outline</div>
<!-- 背景图定位 -->
<!-- 默认都是 padding-box -->
<!-- 每个元素身上都有 外边距 边框 内边距 内容区 即盒模型 -->
<!-- background-origin 两个属性 1.content-box 2. padding-box -->
<div class="background box"></div>
<!-- 图像边框 -->
<div class="borderImage box">borderImage</div>
<!-- 平行四边形 -->
<a href="###" class="button">button</a>
<!-- 菱形 -->
<div class="diamond">diamond</div>
<!-- 衍生的动画 -->
<div class="img">img</div>
<!-- 发光字体 -->
<a href="###" class="glow">GLOW</a>
<!-- 用户体验 选择合适的鼠标icon -->
<button disabled>disable</button>
<!-- 不规则投影 -->
<div class="speech">speech</div>
<!-- 插入换行 -->
<dl>
<dt>Name:</dt>
<dd>Lea Verou</dd>
<dt>Email:</dt>
<dd>lea@verou.me</dd>
<dt>Location:</dt>
<dd>Earth</dd>
</dl>
<!-- 图片对比 -->
<div class="image-slider">
<div>
<img src="http://csssecrets.io/images/adamcatlace-before.jpg" alt="Before" />
</div>
<img src="http://csssecrets.io/images/adamcatlace.jpg" alt="After" />
</div>
<!-- 弹性过度 -->
<label>
Your username: <input id="username" />
<span class="callout">Only letters, numbers,
underscores (_) and hyphens (-) allowed!</span>
</label>
<!-- 欢动动画 -->
<div class="ease">ease</div>
<!-- 逐帧动画 -->
<div class="loader">Loading...</div>
<!-- 闪烁效果 -->
<p class="blink-smooth-1">Peek-a-boo!</p>
<p class="blink-smooth-2">Peek-a-boo!</p>
<p class="blink">Peek-a-boo!</p>
<!-- 状态平滑的动画 -->
<div class="panoramic"></div>
<!-- 环路动画 -->
<div class="path">
<div class="avatar">
<img src="http://lea.verou.me/book/adamcatlace.jpg">
</div>
</div>
<!-- 精简 -->
<div class="path1">
<img src="http://lea.verou.me/book/adamcatlace.jpg" class="avatar1">
</div>
</body>
</html>本书特色
这本书是为新一代CSS所写的新一代CSS图书。在我所知的技术专家中，没人比Lea Verou更能领会新一代CSS的精髓。”——Jeffrey Zeldman，《网站重构》作者
“Lea Verou那渊博的学识是无法复制的，但她在这本书中倾囊相授，令我们都有机会一窥CSS的强大威力与神奇魔力。即使你认为自己对CSS已经了如指掌，我保证这本书仍然会让你大开眼界。”——Jeremy Keith，《JavaScript DOM编程艺术》作者
“如果你想深入探寻CSS的美妙之处、创意之处与智慧之处，那就别犹豫了——赶快翻开这本书吧。它让我爱不释手！”——Eric A. Meyer，《CSS权威指南》作者
“Lea是一位极其智慧的编码人。这本书蕴含了无穷的智慧与创意，即使你已是CSS高手，也仍将从中获益。更重要的是，这本书还将长久激发你的智慧，因为它已传授给你突破平庸的信念。”——Chris Coyier，CodePen创始人
“《CSS揭秘》是一部速成经典——它汇集了众多精彩绝伦的技巧，能够立即改善你的网页体验！”——Christopher Schmitt，CSS Cookbook作者
这是一本注重实践的教程。CSS专家Lea Verou单刀直入，教你用代码解决实际问题。她在书中揭示了47个鲜为人知的CSS技巧，指导中高级CSS开发者循序渐进，探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。
读者将在本书中领略作者的缜密思路，并学会用这种思路来应对各种不期而遇的CSS难题，最终达成DRY、可维护、可扩展、轻量级并且符合标准的结果。
本书涵盖的主题如下：
背景与边框
形状
视觉效果
字体排印
用户体验
结构与布局
过渡与动画
版权声明
献辞 阅读
本书赞誉
译者序
序
前言
致谢
本书是怎样炼成的
关于本书
第 1 章 引言
第 2 章 背景与边框
第 3 章 形状
第 4 章 视觉效果
第 5 章 字体排印
第 6 章 用户体验
第 7 章 结构与布局
第 8 章 过渡与动画
按规范分类
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
