《每个设计师都应该掌握的50个css代码段》31~35段
31.css3文本框高亮
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #ddd;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
Code Source
我非常喜欢这段基本的非常好用的css代码，因为它弥补了浏览器的缺陷。chrome和safari浏览器用户知道表单边框是多么烦人。在你的样式表中添加这段内容能让你基本的输入元素焕然一新。
32.基于文件类型的链接样式
/* external links */
a[href^="http://"] {
padding-right: 13px;
background: url('external.gif') no-repeat center right;
}
/* emails */
a[href^="mailto:"] {
padding-right: 20px;
background: url('email.png') no-repeat center right;
}
/* pdfs */
a[href$=".pdf"] {
padding-right: 18px;
background: url('acrobat.png') no-repeat center right;
}
Code Source
尽管这段相当晦涩难懂，但我爱死它的创意了！你可以使用css选择器和工具图标作为背景图像来决定链接的文件类型。它们可以是各种协议（HTTP, FTP, IRC, mailto）或者仅仅是文件类型本身（mp3, avi, pdf）。
33.使用代码外层
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Code Source
这个典型的pre标签用于展示大的代码块。这是一段预格式化文本，你会在Notepad和Textedit中发现它们，除非你经常留意到冗长的代码产生的水平滚动条。css代码块会注意到所有的pre标签而不破坏容器内部。
34.使用可点击项目上的手型光标
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}
Code Source
有很多默认可点击的html元素不总是显示手型指针光标。这套css选择器让你可以设置许多关键元素上的指针，当然也少不了使用 .pointer类。
35.页面顶端阴影
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
Code Source
不同于一些令人愉悦的美学，开发人员可能不会很好地使用这段代码，但是我非常喜欢它独特的作用！仅仅是添加一小段css代码就可以让你的主体元素显示从页面顶端向下的渐变的黑色阴影。